Bibliography layout CSS?

Hello

I need to list a series of articles on a page and I was wondering if the CSS can be used to automate the style of these referenced articles. I won't be the one now page in the future, and I want to make sure that the style uniformity is maintained in the future, it is in this case the same styles for all listed items.

As a general rule, each article appears in the form:

Authors (year): title. Newspaper.

I thought that maybe I could translate this:

< span class = 'Authors' > author 1, author 2 and author N </span > < span class = 'Year' > (AAAA) </span > < span class = "Title" > title etc. of paper </span > < span class = 'Sources' > J Journal, vol. V, etc. </span >

And then set these CSS classes to get something like:

Author 1, 2and author (YYYY) N: title paper etc. J Journal, vol. V, etc.

Note the space added before "(YYYY)" and «Journal...» "as well as the": "before the title.

I figured out, I can add a Pseudo-espace with a property "padding-left" on the year classes and Sources (that is the right way to go forward?), but I don't know how to add the ': '.

I would be very grateful for any idea about it!

Emilie

It depends on how your bibliographic references are listed. If they are listed one after the other, it is not necessary for the authors and the year runs. They can be treated by simply applying the default font styles. Regardless of how much space is left between the authors and the year; HTML which reduced to one space. Of course, if you want more that one space, you need the class year and span tag.

The class title and the span is OK.

Replace the source class and extend with the correct HTML tag: . This will not only facilitate style, search engines can search the tag, which indicates the source of the material quoted (see: http://www.w3.org/TR/html401/struct/text.html#h-9.2.1).

Tags: Dreamweaver

Similar Questions

  • Image Viewer does not offer native zoom level unless layout.css.devPixelsPerPx is set to 1.0, which makes all the tiny interface.

    Asked me to shake my question in one sentence, so this is.
    Image Viewer does not offer native zoom level unless layout.css.devPixelsPerPx is set to 1.0, which makes all the tiny interface.

    DevPixelsPerPx is - 1.0 by default, which causes Firefox to scale with the parameter of the BONE, which is perfectly fine. The problem is that it causes also open image files and especially the zoom level, nationwide also identical to the user interface. A zoom level is adapted to the screen, the other is native. (One is a magnifying glass with a '+', the other a '-'.) Or rather, the other * should * be native, but in practice, it is not native, is climbed by the setting of the BONE, making it as arbitrary and fuzzy like any other level of zoom, which defeats the whole point and does not allow access to a native scaling in any reasonable way.

    If you want to experiment, here is something you can try, a bookmarklet that inserts a 'Native' button on the page. It takes into account your level of "net" zoom current and reduced the image natural dimensions.

    (1) select and copy the following script:

    javascript:var btn=document.createElement('button'); btn.style.cssFloat='right'; btn.appendChild(document.createTextNode('Native')); document.body.insertBefore(btn, document.body.firstChild); btn.addEventListener('click', function(){var img=document.querySelector('img');img.style.transform='scale('+(1/window.devicePixelRatio)+')';}, false); void 0;

    (2) right-click a task on your bookmarks bar or, if you do not display this bar, click on the bookmarks menu button and right click a place there, and then click new bookmark

    (3) paste the script in the location line

    (4) assign a name like native, and then click Add a bookmark

    While you look at a picture, click the bookmark (let) to inject the button. Then click on the button to resize the image.

    Success?

    If you change the zoom level of the 'page', click on the new button to resize it due to the change.

  • Web pages too large for the screen, but layout.css.devPixelsPerPx is missing in config

    I followed all the instructions to adjust the size of the Web pages, but there is no layout.css.devPixelsPerPx to be able to make the adjustment - I don't want to use the zoom for each page that I opened - a counsellor please

    Note that you can also use this extension to set the overall zoom (layout.css.devPixelsPerPx) easily without having to go through the comments: config page.

  • Preference named layout.css.devPixelsPerPx

    I wanted to do the standard zoom in Firefox a little smaller, so I went to the preference called layout.css.devPixelsPerPx about: config and messed up her a bit. I tried to change-1.0 to 1.2, but I accidentally typed 12 or 102 instead of 1.2, and now Firefox screen is so huge, that I can't do anything on this subject, so I can't change the preference to 1.0 or 1.2 or other.

    Is it possible to fix this without having to completely uninstall firefox? I am unwilling to lose my settings and Favorites...

    Hello, Jasper, you can perform the following steps to change the still 'blind ': value

    1. Open firefox, and then press ctrl + L (this will focus in the address bar)
    2. type of topic: config
    3. Press ENTER twice
    4. type devpix
    5. Press the tab key
    6. Press enter
    7. type 1.0
    8. Press ENTER again and I hope you should be normal visibility now
  • Change the image of the bottom header.main layout.css to a model of BC

    I use a standard model of the BC in a free version of British Colombia and I'm trying to change the background image of header.main a new, Custom, the image I downloaded to the file manager, however, when I click on 'Preview' to the layout.css file, the former code of the image shows still after that I saved the layout.css with the new image in the code of header.main.

    Also, when I go to templates of pages in the site manager, the old image (original) always shows. How can I change the background image?  Is there somewhere else that I have to go in addition to the layout.css to change?

    It lacks the ".jpg" at the end of the file name.

  • How can I increase the height of the background overlay in my file layout.css?

    I can't find a way to broaden the background of a collection in my file layout.css. Here's what I have in my file layout.css.

    #footer {}
    height: 87px;
    background: URL(images/footer-tail.png) of horizontal upper;
    }

    It gives me the following.

    background.jpg

    The dark background is going across the width of the page, but I would like to extend it down so it will go behind the line of down while leaving a line just below the bottom just regular as now. When I change the height of 87px to 120 px my Web page gets taller (I can scroll down again). Also, I changed the "repeat-x h' to fill, but who filled the box with the bottom and do not leave any space downstairs which didn't fill.

    How can I extend the dark background to 3 lines and have still a space below that dark is just the regular blue background? Thank you!

    Make your image of more great background.

    http://victorylcms.org/NewSite/images/footer-tail.PNG

    Currently, it is wide 33px x 53px h.   Try making 33px x 100px.

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Video said don't touch layout.css, what will happen?

    I was watching a video on the part of DW of this site and the guy says no matter how tempting DO NOT change the .css file during the creation of the fluid grid (I called mine fluid - grid.css.) Component fluid grid of DW is too unstable, so he made his own .css file that he uses to edit once the base grids are set up, he said.

    Here's my confusion. I have page1.html and fluid - grid.css recorded since the beginning of the start of a new fluid grid. I set up the grid to fluid for each device and entered the base make content. Now, I want to start adding styles and customization of things. Okay, I get it, don't touch not fluid - grid.css in DW or bad things will happen. So what do I do to start to make custom changes?

    I copy and paste into a new .css file each sections that have been automatically created cash - grid.css and paste into a new .css custom.css file? Are the sections I mean (I don't paste everyting right at the start of each section, I refer to):

    / * Mobile layout: 480px and below. */

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 97.3913%;

    padding-left: 1.3043%;

    padding-right: 1.3043%;

    }

    #Header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    / * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

    @media only screen and (min-width: 481px) {}

    {.gridContainer}

    Width: 91.4836%;

    padding-left: 0.7581%;

    padding-right: 0.7581%;

    }

    #Header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    / * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 89.0217%;

    Max-width: 1232px;

    padding-left: 0.4891%;

    padding-right: 0.4891%;

    margin: auto;

    }

    #Header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    I take the mobile section and paste it into mobile.css, the section for Tablet and paste it into the tablet.css and Desktop section and paste it into desktop.css or stick all in 1 file called custom.css work too?

    If the answer is Yes, do the files, remove the head of <>< / head > of page1.html the original link fluid - grid.css or did stay anything?

    Finally, I read (and heard videos) to do the editing outside the fluid grid DW function. How to exit the service fluid grid? Always seems to be in there after I load the page1.html in DW.

    Any help much appreciated.

    It's true.  Do NOT MODIFY your code FluidGrid.css or boilerplate.css .

    Below, I have a concrete example of checkerboard to fluid.  View source in the browser to see the code.

    http://ALT-Web.com/FluidGrid/fluid.html

    I have three links to external style sheets:

    boilerplate. CSS"rel ="stylesheet"type ="text/css">" "

    FluidGrid.css"rel ="stylesheet"type ="text/css">" "

    Content.CSS"rel ="stylesheet"type ="text/css">" "

    Content.CSS is for my styles to content.    At the bottom of my Content.css, I added some of my own questions of the media to show/hide the divs.

    Hope this helps,

    Nancy O.

  • Remove comments in CSS layouts CSS

    According to Stephanie Rawls article on what's new in Dreamweaver CS5 CSS layouts it mentions David Powers free extension: stored query to remove CSS comments.  How can I find and download this extension?

    http://foundationphp.com/tools/css_comments.php

    "I loves me some Google..."

  • Elastic layout CSS - why there two main column widths?

    In my first all - CSS site, everything was going well until I added content to the pages.

    The layout is elastic 3-column of Dreamweaver with a header and a footer. I also inserted an extra div for a horizontal Spry menu.

    As soon as the content of the main column is less than that of the sidebar, it extends - the top of page three paragraphs may appear about 5 inches wide and everything else below are 6 inches wide. I don't understand.

    See www.krempelsfoundation.org/test/test.html. Any help appreciated.

    You have enough on your #mainContent division left and right margins.  Try this:

    {.thrColElsHdr #mainContent
    margin: 15em 0 0 15em; / * left & right margins = space down the sides * /.
    padding-top: 3em;

    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB
    http://ALT-Web.blogspot.com

  • Layout CSS Width percentage questions

    An attempt to design back at least IE6, I encountered a problem using widths for my navigation menu.

    See here: http://www.ACCU-sembly.com/test/services.html

    It looks fine in IE7 +, Firefox, Chrome and Opera, but in IE6, it seems all the widths of my button to width: auto rather than the percentage that I put to them, which was width:16.6%.

    I tried to use fixed pixels before and found IE6 full the last button in the next line (an error in interpretation sizing?) and so I thought that the percentages are was the answer.

    I understand that IE6 does not know how to calculate the percentages of the div that contains, and so it uses default style width: auto.  Is - here what I can do to force IE6 to recognize the percentages calculated from its container, or I don't have to just live with the overflow with a layout fixed pixel?

    Hello

    You can use the applicant for just IE6 using pixel widths, that all the other browsers would still have a presentation of calculated percentages.

    CICE - http://www.quirksmode.org/css/condcom.html.

    PZ

  • Layout CSS based - cannot select text to change

    We recently conducted an upgrade to our site. The complete layout is basic css. The problem we encountered is that Contribute users can select is no longer content with the mouse. In fact, the only way to change the content is to use the arrow keys on the keyboard. Although it is possible to change the content in this way it is very tedious and confusing to most of our users.

    I tired to change pages based on a template, and not based on a template pages and get the same question.
    What can I do to fix this?

    The web address is http://engineering.osu.edu

    Thank you
    Matthew

    I finally understood the question. Thank you Chris5337, you me engaged in the correct path. It turns out that there was a problem with padding. The padded div is 'covered' If you want all the other div which held the text. Once I got rid of the padding I could select any text I wanted.

  • flow layout css hides my button "Buy now" in google checkout

    Hello

    I wonder what I have to change in the css. The site works fine except that it hides my "Buy now" in google checkout button.

    IMG, object, embed, {video

    Max-width: 100%;

    margin-right: auto;

    left margin: auto;

    }

    When I delete "img", in the light of the foregoing, the google button to the desired location, but the rest of the site out of sorts.

    The google script looks like this...

    < id script = "script googlecart" type = "text/javascript" src = " " https://checkout.Google.com/seller/GSC/v2_2/cart.js?mid=550399523763319 ' = 'jscart-wizard"post-cart integration - the-sandbox = 'false' currency ="USD"productWeightUnits ="LB"> < / script >

    < script type = "text/javascript" >

    Thanks for any help

    Nancy, I just solved the problem with this...

    {.googlecart-widget-footertext

    Width: 50%! important;

    }

    Thanks for the inspiration!

  • Some, but not all web sites display incorrectly. I played with NoSquint and layout.css.devPixelsPerPx. for 45 minutes without reasonable result.

    Windows 7.
    There are open spaces on some websites and not others.

    In addition, last several months after a Web site is displayed correctly (scaling, images, text), the text became and remained unclear.

    I probably won't be able to fix it myself. \

    Thank you.

    Allan Duby

    OK, this is not a direct result of different scaling of defaults in firefox 22...

    can you try to clear the cache and cookies from flickr and reload the page or otherwise see if she does not work correctly when you start firefox in safe mode, once?

    Troubleshoot extensions, themes, and issues of hardware acceleration to resolve common problems of Firefox

    See also the Web sites look bad or display differently they should

  • What controls the space above "maincontent" in CSS layout with header?

    In a page layout CSS freshly downloaded with header (twoColHybLtHdr or similar), there is a space of subject 20px from the bottom of the header area to the top of the box maincontent.   For this reason of space, when a bottom border is added to the header and a left edging maincontent, two lines don't intersect, which is what I want.  What controls this space so I can get rid of him?

    Thank you, Joann

    Hi Joann,

    Add this to your CSS and it will consolidate the gaps for you.

    / * put the parameters of the default browser on all zero * /.

    * {margin: 0; padding: 0; line-height: 100%; do-size: 100 %}}

    Then manually add some top of the margin, margin-bottom, padding and line-height to your different selectors: h1, h2, h3, p, ul, ol, li, li, etc...

    Good luck

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB
    http://ALT-Web.blogspot.com

  • Fixed, fluid or Elastic css layout - which is best?

    I just upgraded from 3 Deamweaver to CS4 and I'm trying to understand css on the design of the table. I like that CS4 offers a variety of predesigned put css layouts but don't know what layout to use. I am reviewing all my websites and will try to do it with css layouts. I did some research and found that some Web designers are starting to make their new standard 1024 size more than 800 px as the majority of users now have wider screens. I want to choose a size of design that is compatible with the majority of users and more than 800 GB px if possible. Here's my question: what is the best page layout css to use fixed, elastic or liquid and why?

    It is a complicated issue.  Who is your target audience? If you have no significant server stats, Google Analytics can help you determine which res screen the majority of your site visitors use.

    Centered, fixed wide provisions (pixel-based) are much easier to work with. The only drawback is that you must choose a size to fit all.  940-1000 px width is usually a good average range.

    Put liquid layout (percentage based) obviously have an advantage over fixed because pages resize of the available viewport.  But it can be a mixed blessing because not resize the images.  If your page will also look good on a smart phone, as it does on a 1280 screen, 1600 or 3 components?  Probably not.

    To work around this, you can set limits to how broad or narrow your page will go using the min and max-width CSS properties.  But you have to use conditional comments to older browsers like IE6 that do not support them.

    Elastic layouts are based on EMS.  So when the text size is increased/decreased in the browser, the layout changes everything. Example of available elastic http://jontangerine.com/silo/css/elastic-layout/

    Ultimately, you have to find the right layout for your particular project.  If you have volumes of content that it must be on a variety of screens and display devices, liquid or elastic layout can be a good choice.  OTOH, if your project is light on content and you know that your audience uses for most of the desktop computers and laptops, a fixed width centered pattern may be a better option, especially if you want to learn CSS.

    Good luck with your project,

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB
    www.Alt-Web.blogspot.com

Maybe you are looking for