SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS navigation

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS navigation

    I'm rather new to design a site in full CSS.

    I have some CSS code for a navigation bar. It works fine and everything, but I would like to see if there is a way of modifying it a little.

    The CSS is using ONE graphic that has 3 button states in it.........this is all for one link. So the button states are "on, out, hover".

    They use a technique to basically change the vertical position for that ONE graphic as background graphic, so it shows different button states.

    Now, It's royal pain(for me anyway) to make ONE graphic with 3 equally sized buttons stacked vertically and make them fit exactly. I much rather PREFER to make 3 single graphics for each state instead of doing ONE graphic.

    So I wonder if someone could check out this code for the ONE graphic per link solution and let me know if there is a way of doing the same stuff but using 3 graphics instead.

    It does work if I only have "off" and "hover" states by using two graphics. But I don't know how to implement the code to CSS to use the "on" state.

    The "on" state is set on each page in the body code like this <body class="about">......etc.

    Here is the current CSS code for the ONE graphic solution

    HTML Code:
    /* Main Navigation */
    /* This sets the main-nav div height to 50px, and strips all margins from the datalist. */
    #main-nav { height: 65px; }
    #main-nav dl { margin: 0; padding: 0; }
    
    
    
    /* IE5 Mac Hack \*/ 
    #main-nav { padding-left: 80px; padding-top:60px; } 
    /*/ 
    #main-nav { padding-left: 11px; overflow: hidden; } 
    /* End Hack */
    
    
    /* This sets the definition titles (our individual nav item containers) to float left, which stacks them left to right, instead of one under the other. */
    #main-nav dt { float: left; }
    
    
    /* Sets the link to the same dimensions as its surrounding container, and hides the text using the overflow property. */
    #main-nav dt a {
    	display: block;
    	height: 0px !important;
    	height /**/:65px; /* IE 5/Win hack */ 
    	padding: 65px 0 0 0;
    	overflow: hidden;
    	background-repeat: no-repeat;
    }
    
    
    /* Sets the background position to move up 50px when a link is hovered. */
    #main-nav dt a:hover {
    	background-position: 0 -60px;
    }
    
    /* Sets the individual widths of each nav item, and the paths to each image.
    
    Now if all your images are named as they are above, and are saved in the correct place, your navigation should work.
    
    Last thing we need to do to make the navigation work, is to get the selected button states to show up when you are on the corresponding page.
     */
    
    #main-nav dt#about,
    #main-nav dt#about a { width: 70px; background-image: url(images/button_about.png); }
    
    #main-nav dt#services,
    #main-nav dt#services a { width: 70px; background-image: url(images/button_service.png); }
    
    #main-nav dt#portfolio,
    #main-nav dt#portfolio a { width: 95px; background-image: url(images/nav_portfolio.gif); }
    
    #main-nav dt#contact,
    #main-nav dt#contact a { width: 106px; background-image: url(images/nav_contact.gif); }
    
    
    body.about dt#about,
    body.about dt#about a,
    body.services dt#services,
    body.services dt#services a,
    body.portfolio dt#portfolio,
    body.portfolio dt#portfolio a,
    body.contact dt#contact,
    body.contact dt#contact a {
    	background-position: 0 -126px;
    }
    

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally better to use the one graphic solution, otherwise you will have an initial delay on hover while the new graphic loads. Even though each link uses a different graphic, the :hover and "active" states only require one rule each (move the background position), but with separate graphics you would need separate :hover and "active" state rules for each link to provide the correct background graphic, increasing the amount of css required.

    Making a 3-tier graphic isn't all that hard - after you have the separate buttons made, increase the image's vertical canvas size by three for one image, and copy/paste the other images into it.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of that too and tried it, but in Photoshop, I can't find the dimension for a layer......let's say a rectangle from the drawing tool. ......there is no where in the "info" window that says how wide or long the rectanle is. It only displays the dimension for the image or when you hover over the graphic.

    I tried to select the box, but for some reason the dimensions are not accurate when you select and copy and I need it to be the same.

    Have you seen anywhere in Photoshop where you can find the dimension for the object layer you are working on?

    So, that's the only hassle I have

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These sort of issues are the main reason that, although I have access to Photoshop, I very rarely use it - I find an older version of Paint Shop Pro does this sort of thing much easier, quicker, and more accurately than Photoshop. Maybe someone in the graphics forum could shed more light on the best way to do this in Photoshop.

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    photoshop is good and I'm sure there is a solution, but I just haven't found the answer to it.

    If it's just to copy a merged image it's not much of a problem. The problem occurs when you want to use the layers as well.

    Anyway, thanks for your input. I will probably go with the ONE graphic solution. It sounds better for CSS. I just want an easy way of doing the graphics.

    Thanks

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When doing this in Paint Shop Pro, I merge (flatten) the layers on each before copying/pasting the composite together.

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, I do that too which works fine.

    But later on you need to copy and paste for all the other links too. I thought maybe there was an easier way of keeping one source file in PSD with the layers and just change the text for the buttons.

    Eiter way, I guess it's just a small problem. Nothing big really

  8. #8
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've seen examples where ALL the buttons are combined into one image. Would be easier to do that and wait until the design is finalized to do it just once?

    @Centauri:

    What are the tradeoffs here? What do you recommend?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you have everythign in 1 CSS file there is only one HTTP request which ultimately increases loading time. It gets a bit tricky for beginners to learn CSS sprites (that is what it is called) so best get started if you choose that path.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do it that way, but you would want to make sure that the final layout is really the final, otherwise you need to redo the graphic to accommodate one change (like an extra button or removal of a button). It does reduce the server calls, and possibly the overall file size, but the css can get a bit more complicated working out the required background position coordinates.


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
  •