SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Bibliography

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bibliography

    I'm inserting a bibliography in certain pages of a site so the sources can be seen by readers. Any suggestions on the best way to indent the second line of each bibliography entry?

    Thanks in advance,

    Steve

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi reedbird8. Welcome to the forums.

    You could put left padding on the text, and then have a negative text-indent. E.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>indented list items</title>
    	
    <style media="all">
    ul, li {margin: 0; padding:0; list-style: none;}
    li {padding-left:20px; text-indent: -20px;}
    </style>
    	
    </head>
    
    <body>
    <ul>
    <li>This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. </li>
    <li>This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. </li>
    <li>This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. </li>
    <li>This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. This is a list item. </li>
    </ul>
    </body>
    
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph! Didn't think about using padding and a negative indent on first line. Good call. I set it up as a class in my css so its easy for me to repeat on any page I want to use a bibliography. I went with
    Code:
    <p class="biblio">bibliography item</p>
    and put
    Code:
    .biblio { padding-left:20px; text-indent: -20px; }
    in my .css file.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yep, that's fine too. I just used a list because it sort of is a list of references.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yep, that's fine too. I just used a list because it sort of is a list of references.
    Yeah, I may use it that way, too. One of the two pages where I wanted to use it now only has one source. Eventually, the list format may be the more economical for me to use. Just have to decide what to name everything in the CSS file to seperate it from other lists.

    Thanks again, Ralph!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    Just have to decide what to name everything in the CSS file to seperate it from other lists.
    Probably the safest thing is to give it a class of "bibliography" (or a contraction thereof). That would make it pretty clear later on what it relates to.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oddly, no matter what I try, when I put it in list format, it wants to bullet everything... I thought "list-style: none;" should have taken care of that...

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Indeed it should. There must be an error in there somewhere.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it figured out. The "#main_wrapper" in my css file was screwing it up. Had to add it that front of my ".biblio" since it occurs within <div id="main_wrapper">. There is a default set for lists in the main_wrapper to use a specific bullet, so I had to override that. Works now. What I did is below.

    Code:
    /* bibliography list */
    #main_wrapper .biblio,
    #main_wrapper .biblio ul,
    #main_wrapper .biblio li,
    #main_wrapper .biblio * {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #main_wrapper .biblio li {
    	padding-left: 20px;
    	text-indent: -20px;
    	margin-bottom: 10px;
    }

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool. Glad you found a solution.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Cool. Glad you found a solution.
    Thanks for your help! Random thought...is there any way for it to automatically sort the items listed in alphabetical order? Or is this a thing where I have to always make sure I type them in the exact order I want?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    is there any way for it to automatically sort the items listed in alphabetical order? Or is this a thing where I have to always make sure I type them in the exact order I want?
    No, not with straight HTML/CSS. (I'm not aware of a way to do it with programming, but hesitate to say it's impossible.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I kind of thought not...but I also figured it would be an interesting question to ask!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •