SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sliding doors navigation

    Hi,
    I have used Andy Budd's CSS Mastery Book to create a 'Sliding doors' menu. Here it is: http://86.125.253.236:8888/menu/

    There is a problem. The CSS code doesn't show the complete height of the menu (notice the bottom). "tab-left.png" is 44px, altough the website shows just 30px. Any idea how can I solve this problem?

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

    As you have a fixed height menu you will need to set the height accordingly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simplified Sliding Doors</title>
    <style type="text/css">
    <!--
    /* Basic Styling
    ------------------------------------*/
    
    body {
        font: 76&#37;/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
        background-color: #fff;
    }
    /* mainNav
    ------------------------------------*/
    
    ul#mainNav {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 72em;
        list-style: none;
        text-transform: uppercase;
    }
    ul#mainNav li {
        float: left;
        background: url(http://86.125.253.236:8888/menu/img/tab-right.png) no-repeat top right;
    }
    /* Hack to make IE/Mac play nice */
    ul#mainNav li a {
        padding: 0 2em;
        background: url(http://86.125.253.236:8888/menu/img/tab-left.png) no-repeat top left;
        text-decoration: none;
        color: #fff;
        float: left;
        height:44px;
        line-height:44px;
    }
    ul#mainNav a:hover {
        color: #333;
    }
    -->
    </style>
    </head>
    <body>
    <ul id="mainNav">
        <li class="first"><a href="#">Home</a></li>
        <li><a href="about.htm">About</a></li>
        <li><a href="news.htm">News</a></li>
        <li><a href="products.htm">Products</a></li>
        <li><a href="services.htm">Services</a></li>
        <li><a href="clients.htm">Clients</a></li>
        <li><a href="casestudies.htm">Case Studies</a></li>
    </ul>
    </body>
    </html>
    Hope that was what you wanted.

    Remember to use the id name before the selctor or you will style all elements on the page and not just the one you are concerned with.

    e.g. Not this:
    ul {color:red}

    but use this:

    ul#mainNav {color:red}

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, mate. It works!
    How can I add some space between the menu elements?
    I tried:

    Code CSS:
    ul li {
      float: left;
      background: url(img/tab-right.png) no-repeat top right;
      padding: 0 10px;
    }

    and the result: http://86.125.253.236:8888/menu/

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

    Padding is the space inside the element and you need it outside the element so use margin instead.

    Code:
    ul li {
      float: left;
      background: url(img/tab-right.png) no-repeat top right;
      margin: 0 3px 0 0;
    }

  5. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I use a CSS sprite instead of the two PNG file ? Something like this : http://dl.dropbox.com/u/1924024/sprite.png

    Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes just use the one image as long as your text is never going to be longer than that image (or that the zoomed text doesn't overflow within reasonable limits).

    You shouldn't need to change much apart from the image url and some padding.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simplified Sliding Doors</title>
    <style type="text/css">
    <!--
    /* Basic Styling
    ------------------------------------*/
    
    body {
        font: 76&#37;/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
        background-color: #fff;
    }
    /* mainNav
    ------------------------------------*/
    
    ul#mainNav {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 72em;
        list-style: none;
        text-transform: uppercase;
    }
    ul#mainNav li {
        float: left;
        background: url(http://dl.dropbox.com/u/1924024/sprite.png) no-repeat top left;
            padding:0 0 0 6px;
            margin:0 3px 0 0;
    }
    /* Hack to make IE/Mac play nice */
    ul#mainNav li a {
        padding: 0 2em 0 1.5em;
        background: url(http://dl.dropbox.com/u/1924024/sprite.png) no-repeat top right;
        text-decoration: none;
        color: #fff;
        float: left;
        height:44px;
        line-height:44px;
    }
    ul#mainNav a:hover {
        color: #333;
    }
    -->
    </style>
    </head>
    <body>
    <ul id="mainNav">
        <li class="first"><a href="#">Home</a></li>
        <li><a href="about.htm">About</a></li>
        <li><a href="news.htm">News</a></li>
        <li><a href="products.htm">Products</a></li>
        <li><a href="services.htm">Services</a></li>
        <li><a href="clients.htm">Clients</a></li>
        <li><a href="casestudies.htm">Case Studies</a></li>
    </ul>
    </body>
    </html>

  8. #8
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I don't really understand the technique, but it works
    I need to remove the small gap in the sprite.png file.

  9. #9
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the first method better, because:
    Code:
    padding: 0 2em;
    sets 2em on both left and right side. The CSS sprite uses:

    Code:
    padding: 0 2em 0 1.5em;
    which is weird

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You are missing the point.

    The remainder of the padding is on the parent list so that the left edge which is 6px wide is protected and not covered by the image on the anchor which is placed on top. If there were no padding on the list then the image on the anchor would rub out the left corner.

    If you change the padding to px then you can work it out easier.

    li {padding:0 0 0 6px}
    li a{padding:0 24px 0 18px}

    This makes the padding equal on both sides.

  11. #11
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    I would like to add an aditional image file (active.png) for active links. I think, this one is enough:

    Code:
    #navbar ul li.active {
      background: url(img/active.png) no-repeat top left;
    }
    
    #navbar ul li.active a {
      background: url(img/active.png) no-repeat top right;
    }
    The other properties are inherited, right?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zoliky View Post
    Thanks!
    I would like to add an aditional image file (active.png) for active links. I think, this one is enough:

    Code:
    #navbar ul li.active {
      background: url(img/active.png) no-repeat top left;
    }
    
    #navbar ul li.active a {
      background: url(img/active.png) no-repeat top right;
    }
    The other properties are inherited, right?

    (I assume mean for the current link on a page and not the pseudo class :active.)

    Yes that should work fine but you could also incorporate that into the original sprite as well if you wanted.

    Just create a double image with the highlighted image underneath the other one at a set number of pixels down. then you just change the background-position properties for the li.active.

    Say the second image is stacked 100px from the top of the whole image:
    Code:
    #navbar ul li.active { background-position:0 -100px;}
    #navbar ul li.active a { background-position:100&#37; -100px;}
    A lot neater and no delay

  13. #13
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I noticed a small problem in the right corners:
    http://dl.dropbox.com/u/1924024/corner.png

    I can solve the problem using: margin-right: -1px on the anchor element. Any idea why does this happen?

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

    Are you using a transparent png?

    If so then when you lay the right side of the image on top of the image underneath then the image below shows through the transparent portions.

    Usually you would use non transparent pngs for sprites like this assuming you are keeping then on the same white background.

    If you want transparent pngs then you need to ensure that the transparent parts are moved away from the image underneath so that it doesn't show through the transparent corners which as you found out can be done with negative margins in most cases.

    Hope that explains it

  15. #15
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. I'm using a transparent PNG.
    I modified the sprite: http://dl.dropbox.com/u/1924024/sprite.png

    The new background-positions:

    Code:
    ul li {
       background: url(img/sprite.png) no-repeat left -47px;
    }
    
    li a {
       background: url(img/sprite.png) no-repeat right 0;
    }
    Using this method, the weird pixels dissapear in the right corner, altough I don't understand why.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zoliky View Post
    Using this method, the weird pixels dissapear in the right corner, altough I don't understand why.
    That's because the left image is only a few pixels wide and doesn't extend to the right corner so there is nothing to show through.


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
  •