SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34

Thread: CSS Navigation

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation

    Hello, I have been designing a personal website for myself, Not a css professional by any means. I have mainly been following tutorials online on how to transfer my Photoshop layout to the web. Having a big problem trying to layout the horizontal menu though. I have found a style I really like and would like to implement the style into mine. The style: http://betanightclub.com/ http://3.7designs.co/blog/ Right now I have a basic menu that I have been following from a tut and I have been trying to code it to look like the ones I like, but lets just say im still trying!

    My site if you would like to take a look and please feel free to give me your input on things that perhaps may be wrong.
    http://www.joecampoli.com/test

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Most likely you'll want to use display:inline-block; and set a width and height. Inside of that li, you can use a heading to define the navigation item, and maybe a paragraph or <small> to define the description. Take a look at Veerle's blog to see how she does her top three boxes like that.

    ~TehYoyo

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi. Have you already fixed this? Viewing in Chrome and the top menu (at the right) is already horizontal. The only other menu is the one in the footer, and that's horizontal as well .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan, what im trying to do is style it like the ones in the links i provided up top.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's nothing special. The <li>'s are floated, basically. That's it. Then this style is applied to each anchor (they have each anchor defined separately) .

    Code:
    a#nav_video {
    height: 85px;
    width: 109px;
    display: block;
    text-indent: -9999px;
    background: url(../GFX/Global/Nav.png) -545px top;
    }
    The "sexiness" of the menu is just the image there. The text-indent takes away the text you'd put inside the anchor of the HTML and hides it so that it won't affect the view of it. It'll come back though if CSS is off .


    Here is the link to the image in question.
    http://betanightclub.com/GFX/Global/Nav.png

    The bottom part of the image I linked is used as the hover state. That image I linked to is a CSS sprite. It combines multiple images into one file for less HTTP requests.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a way to accomplish the menu with just css? im trying some different examples but really throws my divs out of whack

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Well yes, but an image would be a lot easier .

    Show us your current attempt and we will work from there.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Here's his current attempt:

    http://www.joecampoli.com/test/

    ~TehYoyo

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks TehYoyo i just did that haha.... need to work on spacing and possible separators though. and im not sure why the numbers are indented a slight touch.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    The numbers are indented because of the padding you set on the anchors. It affects the first line of text since it's an inline element. Setting the anchor to display:inline-block would fix this, or remove the padding altogether. I recommend the first option.

    Looks like you are doing pretty good. The page hs changed since last I saw it so I assume you're still making progress on the page. You're probably going to have to throw some <span>'s in there inside the anchor to replicate the horizontal "break" / border effect.

    On your page, the Gallery,Links and VIP can all have spans wrapped around that text and give that a bottom border to replicate that effect.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am going to take your tips and work on it. Packing it in for the night but I hope you can check back tomorrow if you have time and see how i did. Thank you both for your help and input!

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I work tomorrow morning until 1 PM (ET) but if you have it updated with your current attempt by then, I'll surely be able to help you along with any snags you have . Or if I don't get to it, any other member here is sure to help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My attempt has been done but im thinkin, maaaaybe I might give images a try

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It would certainly be easier .

    I went to your site though, and it's certainly not a bad attempt.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance you can point me in the right direction?

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    In what, making the image? If so, unfortunately that's not my area of expertise.

    If not, then I don't know what you could need help on, since after image creation it's straight forward: placing it on an element .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I can make the image, if you want. It's not that I usually outsource myself, but I've been looking for a chance to stretch my Photoshop brain and here it is!

    I assume that's what you want (really, b/c Ryan said that). I just skimmed over the thread.

    ~TehYoyo

    Edit: Not to discourage you from doing your own work, of course.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you TehYoyo I appreciate the offer but I have the images The layout is my own work as well. Im just wondering where i put the image in the css code. I will fiddle around!

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Vox98 View Post
    Thank you TehYoyo I appreciate the offer but I have the images The layout is my own work as well. Im just wondering where i put the image in the css code. I will fiddle around!
    Sure, no problem! Good luck with it - if you have questions, you always know where to ask.

    ~TehYoyo

  20. #20
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, cant seem to get the hover state to show. Link

    Code:
    #navigation {
      float: right;
      display: block;
      background-image:url(../images/nav.png);
      background-repeat:no-repeat;
      overflow:hidden;
      width:528px;
      height:85px;
    }
    
    #navigation ul {
      width:528px;
      padding:0px;
      margin:0px;
    }
    
    #navigation li, #navigation a {
      height:85px;
      padding:0px;
    }
    
    #navigation li {
        float: left;
        list-style: none;
        display: inline-block;
        text-indent: -9999em;
    }
    
    #nav-welcome, #nav-gallery, #nav-bio, #nav-links {
    	  width:132px;
    }
    
    #nav-welcome a:hover { 
    background-image:url(../images/nav.png) 0px -85px no-repeat;
     }
     
     #nav-gallery a:hover { 
    background-image:url(../images/nav.png) -132px -85px no-repeat;
     }
     
     #nav-bio a:hover { 
    background-image:url(../images/nav.png) -264px -85px no-repeat;
     }
     
     #nav-links a:hover { 
    background-image:url(../images/nav.png) -528px -85px no-repeat;
     }

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hello . There are a few problems. One is that you use background-image to have the image shown, but the only valid value of that is to just have the url() there. You can't include other stuff like the background-position. You need to change all the hovers there to background: instead of background-image to allow more values to show.

    You also have the anchors moved off the screen via text-indent. Though just change the background property and we'll work from there. I'm at college right now so I can only go by what my eyes see of the code.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Woo. The computers have chrome apparently.

    SO make the background changes for the anchors, remove the text-indent on the #navigation li{}'s, and set these rules for the anchors as well .
    Code:
    #navigation a {
    display: block;
    width: 100%;
    text-indent: -999em;
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for the help while you are in school! I have made your changes and 3 links seem to work but the last one doesnt seem to be working. Maybe its my numbers

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I saw that happening as well, and I'd hazard a guess that the background position coordinates are off. Though I can't be sure as of right now. Assuming the other code is exactly the same, I'd say the background-position is off . You're welcome. Come back if you can't get that last link working.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #25
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All seems to be good! The rules you had me add... what did that do? just for my knowledge


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
  •