SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Creating a horizontal menu with different images for hover/down/active

    Ok I spent some time looking on the Internet for tutorials on horizontal menus but nothing really has what I am trying to achieve. I have a background that the buttons sit on. The buttons are all sliced (6 of them for the "up" state and 6 for the "hover/down/active" state. I need a jump start to get this going. All buttons as sliced individually....don't know if that is correct. I have my unordered list and I know that I have to make it in-line to get get it horizontal...at least I think I do. If you could explain how this is done and what is the easiest way to do this so I can reuse the code in the future.

    Here is the HTML

    <div id="nav_bg">
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">How Can We Help?</a></li>
    <li><a href="#">Design Pricing</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>

    Here is the CSS so far...I have the nav background but am not sure where to start for the actual buttons.

    #nav_bg {
    background-image: url(../images/nav_bg.png);
    background-repeat: no-repeat;
    margin-left: 115px;
    height: 117px;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display:inline on the li get's them horizontal alright. I'm in a hurry now but you could use a technique that's called sprites: it uses one image instead of several different images. The result is achieved by adjusting the positioning.

    Here's a nice how to.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    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)
    Basically give
    Code:
    #nav li{float:left;}
    And sprites is something you should look into. You combine many images into 1 file and then you assign (for example) all <li>'s the background image, then assign each <li> a specific class and use the background-position property to move the image around to make a particular section of hte image you put in there show .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Basically give
    Code:
    #nav li{float:left;}
    And sprites is something you should look into. You combine many images into 1 file and then you assign (for example) all <li>'s the background image, then assign each <li> a specific class and use the background-position property to move the image around to make a particular section of hte image you put in there show .
    You like to float huh? lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have read the tutorial on sprites and it looks interesting. However, those images are all attached to each other. I do want spaces between the buttons. How do I achieve this? Or do I just have an image such as I attached with the upper row and the lower row with no space between the rows? I am sorry that I am such a newbie at this...I really am trying to keep up with the ever-changing world of web design.

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want gaps between your images then you will have to adjust the background position in the css accordingly. The trick is to use the positioning to decide where the image shows up :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    LOL well my first attempt really screwed things up...I have to go to work now but I will play with this tonight. I did upload it to www.foxdenwebsolutions.com/CSS_site/index.html.

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Never mind...I cut and pasted the code from the tutorial and didn't change the names of things....silly me!

  9. #9
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I also need to change the dimensions to mine...as I said I will play with this tonight after work.

  10. #10
    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)
    Quote Originally Posted by Luki_be View Post
    You like to float huh? lol
    Yup . It's slightly more buggy in IE but once you know what bugs are going to be triggered, fixing them before they appear makes it much funner to use them .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Yeah well, you probably now how much i like to float
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  12. #12
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok I need help...I have uploaded what I have using the tutorial and the math is all wrong for the positioning. The button is width 111px height 51px and there are 6 buttons. Could someone please tell me where I am messing up? Thanks.

  13. #13
    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)
    In the image get rid of the space between the images and the edge of the image. Like, don't allow for any whitespace in the image. It makes it harder to then place the image accordingly.

    Right now, you are close with the background-positions, but the extra whitespace in the iamge is screwing it up
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Ok I need help...I have uploaded what I have using the tutorial and the math is all wrong for the positioning. The button is width 111px height 51px and there are 6 buttons. Could someone please tell me where I am messing up? Thanks.
    Maybe (probably) i wasn't clear in my answer about the space: leave the image as it is in the tutorial: no whitespace in the image itself. Use the css background-position to create the space between the buttons :-)

    Sorry for that.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #15
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I reworked the graphics and redid the math and got it to work. However, I don't like it as much as the graphics with the spaces between the buttons or the pillow emboss I had on it. I might play with it some more to figure out the right spacing to be able to keep how I originally designed it unless there is another way to do it besides the sprite way.

  16. #16
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah just saw your answer after I posted my response...I will go ahead and redo the pillow emboss and rework the positioning then.

  17. #17
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's up to you hat technique you use lol but using 1 image has a benefit:

    Each separate images is a separate HTTP-Request, and the more of those you have, the less efficient your page is. So having 6 images for your nav instead of 1 ....
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  18. #18
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    YAY got the nav to work like I needed! Thank you so much for all your help Luki and Ryan. Now I am moving on to getting all images centered on the page and getting the text centered in the content area. I had to remove all my wrappers and containers because it broke and I was getting confused. I will start a new thread for help on that. That way others can follow the progression of this better.

  19. #19
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •