SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Problems - Trying to create CSS Menu failing miserably

    Ok starting to get pretty frustrated with this one, tried several options and think I'm doing more css damage than good!

    Basically I'm tring to create an in-page menu to look similar to the one on the tesco .com homepage under 'Direct' with sub items; pc, phones, home electrical.

    Among other problems I can't get my width consistent for all items, tried the width attribute in several areas of my css with no success. Here is a copy:
    Code CSS:
    #content ul.mainpagenav {
                              font-size: 13px;
    		          text-indent: none;
                              list-style-type: none;
     
                              width: 200px;
                              margin-left: 0px;
                                 padding-left: 0px;
                              height: auto;
                              line-height: 124%;
    }
     
    #content ul.mainpagenav li{
                                 border-bottom: 1px solid #ffffff;
                                 margin-left: 0px;
                                 padding-left: 0px;
                                 padding: 7px 0 5px 7px;
     
     
    }
     
    #content a.mpn {
                     color: black;
                     background: #ccccff;
                     padding: 7px 0 5px 7px;
     }
     
    #content a.mpn:hover {
                            background: #ECF2F9;
    	                width: 200px;
     
    }
    My HTML
    Code HTML4Strict:
    <ul class="mainpagenav">
    	<li><a class="mpn" href="#tfg-baitrunner">TFG Baitrunner Reels</a></li>
    	<li><a class="mpn" href="#shimano-baitrunner">Shimano Baitrunner Reels</a></li>
    	<li><a class="mpn" href="#okuma-baitrunner">Okuma Baitrunners</a></li>
    	<li><a class="mpn" href="#fox-baitrunner">Fox Baitrunners</a></li>
    	<li><a class="mpn" href="http://carp-fishing-reels.com/big-pit-reels/#d">Daiwa Baitrunner Reels</a></li>
    	<li><a class="mpn" href="#other">Other Baitrunners</a></li>
    </ul>

    Am I going about this the wrong way? Any help is appreciated, thanks guys
    Last edited by descarte; Mar 7, 2011 at 09:25.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Anchors are inline elements and therefore are only as wide as the content they hold. You cannot apply dimensions to inline elements so you need to set them to display:block instead.
    e.g.
    Code:
    #content a.mpn {
        color: black;
        background: #ccccff;
        padding: 7px 0 5px 7px;
        display:block;
        position:relative;/* ie6 fix*/
    }
    There is no need to add a class to every anchor in that list because all are reachable via the parent without needing an extra class.

    Code:
    ul.mainpagenav li a {
        color: black;
        background: #ccccff;
        padding: 7px 0 5px 7px;
        display:block;
        position:relative;/* ie6 fix*/
    }
    There is also no need to put #content in front of all the classes unless you have a specific reason for doing so (such as over-riding existing styles or to give more weight). Otherwise just keep it simple.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about something like this? I didn't check it but this is what I would do before checking it in the browser. Not sure about the line-height though because there also is a padding-top and -bottom in the link.
    Code CSS:
    ul.mainpagenav {
     font-size: 13px;
     list-style: none;
     width: 200px;
     margin: 0px;
     padding: 0px;
     /* removed the width */
    }
     
    ul.mainpagenav li {
     border-bottom: 1px solid #ffffff;
     }
     
    ul.mainpagenav a { /* no need for the classname because they are all the same */
     color: black;
     background: #ccccff;
     display:block;
     width:193px; /* width moved from a:hover to here, 193px + 7px (padding-right) = 200px */
     line-height: 124%;
     padding: 7px 0 5px 7px;
     }
     
    ul.mainpagenav a:hover {
     background: #ECF2F9;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Is something like this what you are looking for?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    ul.mainpagenav {
      font-size: 13px;
      text-indent: none;
      list-style-type: none;
      width: 200px;
      margin-left: 0px;
      padding-left: 0px;
      line-height: 124%;
    }
     
    ul.mainpagenav li {
      border-bottom: 1px solid #ffffff;
      padding: 0 0 0 7px;
    }
     
    .mainpagenav a {
      color: black;
      background: #ccccff;
      padding: 7px 0 5px 7px;
      display: block;
    }
     
    .mainpagenav a:hover {
      background: #ECF2F9;
    }
    </style>
    	
    </head>
    
    <body>
    <ul class="mainpagenav">
        <li><a href="#tfg-baitrunner">TFG Baitrunner Reels</a></li>
        <li><a href="#shimano-baitrunner">Shimano Baitrunner Reels</a></li>
        <li><a href="#okuma-baitrunner">Okuma Baitrunners</a></li>
        <li><a href="#fox-baitrunner">Fox Baitrunners</a></li>
        <li><a href="http://carp-fishing-reels.com/big-pit-reels/#d">Daiwa Baitrunner Reels</a></li>
        <li><a href="#other">Other Baitrunners</a></li>
    </ul>
    
    </body>
    </html>
    The key is display: block on the <a> elements. I removed the unnecessary classes on the anchors.

    EDIT: Bleh! Must remember to refresh the thread before posting.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul: ninja'd again. I guess that's the difference between 31K+ and 15 posts BTW I really like that you explain why you do something instead of just giving a solution.

    Sorry for being off-topic.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Hueij View Post
    @Paul: ninja'd again. .
    Sorry I'm going to sleep now so its all yours for the night

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome

    Thanks for the help and explainations, time to put the new knowledege to the test.


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
  •