#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    24
    Rep Power
    0

    Menu not aligning properly


    I'm trying to move away from a clumsy method of styling a side menu in xhtml, but finding it impossible to get the left-hand alignment right. Please help!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>test</title>

    <style type="text/css">h4,p,ul {font-family:'Lucida Grande'}</style>

    <style type="text/css">/* the style to be emulated */
    h4.sidebar { font-size:10px bold #333333; line-height:10px; text-indent:0; margin-top:6px; margin-bottom:3px;}
    .sidebar { font-size:10px; color:#464646; line-height:10px; text-indent:0;}
    .sidebar a:link, a:visited { color: #0033cc; text-decoration: none;}
    .sidebar a:hover, a:active { color: #af247c; text-decoration:underline}
    .v143 {background-color: #cc9999; height: 1px; width: 143px; border: none; margin-left: 8px;}
    .v151 {background-color: #cc9999; height: 1px; width: 151px; border: none; margin-left: 0;}
    </style>

    <style type="text/css">/* test style - trying to emulate the above */
    ul.sidebar-nav { width:151px; }
    ul.sidebar-nav li { list-style-image: url(../a/img/n1.gif); font-size:10px; color:#464646; line-height:16px; border-top:solid 1px #cc9999; margin-left:-20px; }
    ul.sidebar-nav2 li { list-style-image: url(../a/img/n1.gif); font-size:10px; color:#464646; line-height:16px; border-top:solid 1px #cc9999; text-indent:8px; margin-left:-20px; }
    ul.sidebar-nav li a { display:block; padding: 5px 0 5px 5px;}
    a:link, a:visited { color:#0033cc; text-decoration:none}
    a:hover, a:active { color:#af247c; text-decoration:underline; }
    li.r1 {border-bottom: solid 1px #cc9999;}
    </style>

    </head>
    <body>

    <p>How it should look</p>

    <img src="../a/img/arsha-logo-on-green.png" alt="" width="151" height="16" />
    <h4 class="sidebar">Resources</h4>
    <hr class="v151" />
    <span class="sidebar">
    <img src="../a/img/n1.gif" alt="" width="5" height="8" />
    <a href="../downloads.html">Downloads</a></span>
    <hr class="v151" />
    <span class="sidebar">
    <img src="../a/img/n1.gif" alt="" width="5" height="8" />
    <a href="../links.html">Links</a></span>
    <hr class="v151" />
    <span class="sidebar">
    <img src="../a/img/n1.gif" alt="" width="5" height="8" />
    <a href="../books.html">Publications</a></span>
    <hr class="v151" />
    <span class="sidebar">
    <img src="../a/img/n2.gif" alt="" />
    <a href="../dayananda.html">Dayananda</a></span>
    <hr class="v143" />
    <span class="sidebar">
    <img src="../a/img/n2.gif" alt="" />
    <a href="../atmaprakasha.html">Atmaprakasha</a></span>
    <hr class="v143" />
    <span class="sidebar">
    <img src="../a/img/n1.gif" alt="" />
    <a href="../trustees.html">Trustees</a></span>
    <hr class="v151" />

    <p>How it does look i.e. this is as far as I've got in mimicking the above 'look'.</p>

    <img src="../a/img/arsha-logo-on-green.png" alt="" width="151" height="16" />
    <h4 class="sidebar">Resources</h4>
    <ul class="sidebar-nav">
    <li class="sidebar-nav"><a href="../downloads.html">Downloads</a></li>
    <li class="sidebar-nav"><a href="../links.html">Links</a></li>
    <li class="sidebar-nav"><a href="../books.html">Publications</a></li>
    <li class="sidebar-nav2"><a href="../dayananda.html">Dayananda</a></li>
    <li class="sidebar-nav2"><a href="../atmaprakasha.html">Atmaprakasha</a></li>
    <li id="r1" class="sidebar-nav"><a href="trustees.html">Trustees</a></li>
    </ul>

    Links to images:
    http://www.arshavidya.org.uk/a/img/n1.gif <br />
    http://www.arshavidya.org.uk/a/img/n2.gif <br />
    http://www.arshavidya.org.uk/a/img/a...o-on-green.png

    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Post


    1. Your <ul> and <li> have the same class. I think that's not a good idea since <ul>s and <li>s need different formatting rules. They really aren't the same class.
    2. Instead, just put the class on the <ul>, then use .sidebar-nav li in your CSS to specify formatting for the li. Your CSS was actually already specified that way. You just added work for yourself adding the class specification to the lis.
    3. Your .sidebar-nav and .sidebar-nav2 are nearly identical. Better to add a class to the one's marked "2" so that they all share the same CSS, but then you put the differences into the new class.

    So, I simplified your code like this:
    PHP Code:
    <ul class="sidebar-nav">
     <
    li>Downloads</li>
     <
    li>Links</li>
     <
    li>Publications</li>
     <
    li class="extra-indent">Dayananda</li>
     <
    li class="extra-indent">Atmaprakasha</li>
     <
    li>Trustees</li>
    </
    ul
    (I left out the <a>'s for clarity.)

    Now, in your CSS you "select" the various pieces like this:
    Code:
    .sidebar-nav {/* stuff for the top level menu */}
    .sidebar-nav li {/* stuff for menuitems */}
    .extra-indent {/* override for indented items*/}
    The tricky part of what you are trying to do is getting the horizontal line to underline the "bullet" part of your li. I don't think you can do that. Instead, specify "list-style-type:none;" then use the pseudo-element :before to add your images.

    Instead of specifying a special id for the last item to get the final horizontal line. Make the UL itself have a top-border, then all lis have a bottom-border.

    So, my final CSS looks like this:
    Code:
    .sidebar-nav {width:15em; border-top:#cc9999 1px solid; padding-left:0; font-size:10px; }
    .sidebar-nav li:before {content:url(../a/img/n1.gif)' '}
    .sidebar-nav li {list-style-type:none; margin-left:0; line-height:2.8em; border-bottom:#cc9999 1px solid }
    .sidebar-nav li ul {padding-left:0; margin-left:0em}
    li.extra-indent:before {content:url(../a/img/n2.gif)' '}
    li.extra-indent {margin-left:0.2em}
    .sidebar-nav li a:link, a:visited { color: #0033cc; text-decoration: none;}
    .sidebar-nav li a:hover, a:active { color: #af247c; text-decoration:underline}
    The only thing that isn't quite like your original is that there's a little extra space on the extra-indent bullets because the images themselves have that space built in. Eliminate that extra spacing from those images and you'll be all set.

    Comments on this post

    • sansarin agrees : Excellent solution
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    24
    Rep Power
    0
    Ah!! Thank you very much! Your solution works perfectly -- including the shorter rules. (I removed the extra space on the red line image as you suggested).
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Are "Dayananda" and "Atmaprakasha" the names of publications? If so, it would be better for them to be placed in a <ul>, nested within the <li> for "publications", instead of just being given special classes.

    When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Originally Posted by EEsterling
    The tricky part of what you are trying to do is getting the horizontal line to underline the "bullet" part of your li. I don't think you can do that. Instead, specify "list-style-type:none;" then use the pseudo-element :before to add your images.
    You could also use "list-style-position: inside".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Question


    Originally Posted by Kravvitz
    Are "Dayananda" and "Atmaprakasha" the names of publications? If so, it would be better for them to be placed in a <ul>, nested within the <li> for "publications", instead of just being given special classes.
    @Kravvitz. That was my initial thought too. It seems like it is the proper semantics for that menu. However, I couldn't see a reasonable way to get the lines between the items to work out.

    Specifically, when using "border-bottom" on the li in this configuration, you end up with no line immediately under "Publications" and a double line under "Atmaprakasha" (one for the bottom of Atam... li, the other for the bottom of Publications li). So, without some other machinations, it doesn't work quite right.

    Any suggestions on how to make the items under Publications a ul nested in Publications but still get the lines to work out?
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by EEsterling
    Specifically, when using "border-bottom" on the li in this configuration, you end up with no line immediately under "Publications" and a double line under "Atmaprakasha" (one for the bottom of Atam... li, the other for the bottom of Publications li). So, without some other machinations, it doesn't work quite right.

    Any suggestions on how to make the items under Publications a ul nested in Publications but still get the lines to work out?
    True. Wouldn't giving 2nd level <li>s (e.g. ".sidebar-nav li li") a top border instead of a bottom border do the trick?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    Originally Posted by Kravvitz
    Wouldn't giving 2nd level <li>s (e.g. ".sidebar-nav li li") a top border instead of a bottom border do the trick?
    Unfortunately, it would not match the original he wanted to emulate. Each line underneath the item is lined up with the item. I.e., the lines after the "Dayananda" and "Atmaprakasha" are indented, like the bullet. And the line under Publications is lined up unindented. So, just using the border-top on the li li doesn't quite match the "spec".
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by EEsterling
    Unfortunately, it would not match the original he wanted to emulate. Each line underneath the item is lined up with the item. I.e., the lines after the "Dayananda" and "Atmaprakasha" are indented, like the bullet. And the line under Publications is lined up unindented.
    Hmm. I see what you're saying. Which lines are full width and which aren't seems strange to me. To me it makes more sense for the lines above each of those two to be shorter, instead of the lines below them.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    24
    Rep Power
    0
    Originally Posted by Kravvitz
    Hmm. I see what you're saying. Which lines are full width and which aren't seems strange to me. To me it makes more sense for the lines above each of those two to be shorter, instead of the lines below them.
    The names under 'Publications' are arbitrary: I should have used the names of books as the indented items are meant to be a sub-section of the line above, i.e. 'Publications' is in effect their 'heading' -- but not in a formal <h1> sense, just a heading notionally, by mere position in the list. The visual fact of the indent plus the change of icon is sufficient to indicate that 'Publications' is a heading, and nothing more is needed for the site visitor in my view.

    The solution proposed by EEstirling works perfectly and produces a result that is exactly as required, visually, regardless of proper semantics. Nevertheless, if there is a viable semantic solution that nests a <ul> within the <li>, while still achieving the indents and shortened rules as required, I would of course be happy to use it.

    Thank you again for taking so much trouble to solve this.

IMN logo majestic logo threadwatch logo seochat tools logo