SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Cardiff, Wales
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Difficulties with CSS Horizontal Navbar

    I've been trying to create a horizontal navpane via css but am experiencing difficulties in achieving the effect intended.

    Ignore some of the finer points (colours, fonts etc because I'm at an early stage) but the general intended look of the navigation is here:

    [link now dead]

    However the actual effect I get in CSS is here:

    [link now dead]

    My main problem is that other than using artificial amounts of padding, I can't seem to get each list item to display the entire background image. Secondly although the a:hover works ok in Safari it doesn't in Camino/Firefox.

    To be fair, I've messed about with the CSS a fair bit so I dare say there are a number of mistakes in there, but any help would be massively appreciated.

    Thanks.
    Last edited by norliss; Sep 27, 2007 at 04:01.

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't find your stylesheet easily but I suspect that you may not have included display:block for your <a> tags,

    If thaht's not te answer, please post your CSS code or a link to it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Cardiff, Wales
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, and thanks for your reply. I've done that before but the list items then no longer display horizontally but vertically. The link to the CSS file is here:

    [link now dead]

    Many thanks for your help.
    Last edited by norliss; Sep 27, 2007 at 04:01.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Rob_D was correct, this should get you on your way.
    Code:
    #navbar ul li
    {
    	margin: 0;
    	padding: 0;
    }
    
    #navbar li a:link, a:visited
    {
    	font-family: "Century Gothic", sans-serif;
    	color: yellow;
    	line-height: 1.5em;
    	margin: 0;
    	font-size: 1.30em;
    	background: url(../images/tabs_h.gif) no-repeat 0 0;
            height: 65px;
    	width: 118px;
            display: block;
            float: left
    }
    You want to make the a element a block shape, so that the whole button is clickable. Then you float each button left to make them line up horizontally.
    You'll need to clear the following items to make it look like you want.
    The li element itself is just for structure, you don't need to do anything with it's style.

    Post again when you come across problems

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4
    display: block;
    float: left
    Hi Mark, I know you know but i thought i'd point it out anyway that the display:block is unnecessary when you float an element because its display is automatically set via the float property so there is no need to specify display:block also.

    (However as you know display:inline is a fix for the double margin bug in ie6 so that can be added to outer floats although it means nothing in the physical sense as the display of floats can't be changed at all.)

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Cardiff, Wales
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks. I've tried the float before and it works but then I get alignment issues with the navbar which I don't know how to solve:

    [link now dead]

    Also, I'm not sure why the rollover effect works in Safari but not in Firefox/Camino.

    Thanks again.
    Last edited by norliss; Sep 27, 2007 at 04:02.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi Paul,

    Thanks, actually you give me too much credit I didn't know either of those things, so thanks jedi master..

    But I do know how to center floated elements.. You had the right idea with margin: 0 auto; but to make that work it needs a width also.
    Code:
    #navbar
    {
    	margin: 0 auto;
    	padding: 0;
            width: 600px;
    }
    
    #navbar ul
    {
             float: left;
    }
    
    
    #navbar ul li
    {
    	margin: 0 auto;
    	padding: 0;
            float: left;
    }
    
    #navbar li a:link, a:visited
    {
    	font-family: "Century Gothic", sans-serif;
    	color: yellow;
    	line-height: 1.5em;
    	margin: 0 10px;
    	font-size: 1.30em;
    	background: url(../images/tabs_h.gif) no-repeat 0 0;
        height: 65px;
    	width: 118px;
        float: left;
    }
    You have some really odd spacings/positioning on the other elements so the nav doesn't look centered but it actually is.

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Cardiff, Wales
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works a treat, thanks a million Mark! I've given the navbar div a width of the same as the sum total of the 118px background images now it seems to have centred a beaut.

    The only riddle that's got me now is why the a:hover works on Safari but not Firefox/Camino. Any ideas on this?

    Thanks again.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    The images work with these background-image-position values - kind of cool.. easy and flexible considering usually 3 states is what you want for rollover type images
    Code:
    #navbar li a
    {
    	font-family: "Century Gothic", sans-serif;
    	color: yellow;
    	line-height: 1.5em;
    	margin: 0;
    	font-size: 1.30em;
    	background: url(../images/tabs_h.gif) no-repeat top left;
            height: 65px;
    	width: 118px;
            float: left;
    }
    
    #navbar li a:hover
    {
    	font-family: "Century Gothic", sans-serif;
    	color: yellow;
    	text-align: center;
    	line-height: 1.5em;
    	margin: 0;
    	height: 65px;
    	width: 118px;
    	font-size: 1.30em;
    	background:  url(../images/tabs_h.gif) no-repeat top center;
        float: left;
    }
    
    #navbar li a:active
    {
    	font-family: "Century Gothic", sans-serif;
    	color: yellow;
    	text-align: center;
    	line-height: 1.5em;
    	margin: 0;
    	height: 65px;
    	width: 118px;
    	font-size: 1.30em;
    	background: url(../images/tabs_h.gif) no-repeat top right;
    	float: left;
    }

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Cardiff, Wales
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've come up trumps again - thanks a million Mark.

    I couldn't understand why my initial values worked in Safari but not Firefox/Camino but seeing as these work I'll stick to these types of values in future.

    Thanks again, it's greatly appreciated.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Remember to save on code as you only need to style the differences in the other states when you have define li a{}

    Code:
    #navbar li a
    {
        font-family: "Century Gothic", sans-serif;
        color: yellow;
        line-height: 1.5em;
        margin: 0;
        font-size: 1.30em;
        background: url(../images/tabs_h.gif) no-repeat top left;
     height: 65px;
        width: 118px;
     float: left;
    }
    
    #navbar li a:hover
    {
        text-align: center;
        background:  url(../images/tabs_h.gif) no-repeat top center;
    }
    
    #navbar li a:active
    {
        text-align: center;
        background: url(../images/tabs_h.gif) no-repeat top right;
    }
    I'm not sure if that text-align:center is intended there

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Firefox seemed to like negative values.. e.g. -118px, -236px; not sure..

    If you post as often as I do, you're sure to get lucky once in a while

  13. #13
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Mark, I know you know but i thought i'd point it out anyway that the display:block is unnecessary when you float an element because its display is automatically set via the float property so there is no need to specify display:block also.

    (However as you know display:inline is a fix for the double margin bug in ie6 so that can be added to outer floats although it means nothing in the physical sense as the display of floats can't be changed at all.)

    Likewise, I didn't know either.

  14. #14
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interestingly, I just did a floated horizontal nav with no height specified for the <a> tags for text resizing purposes and found I had to add display:block otherwise they overlap when I resize the text upwards.
    Attached Images Attached Images

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rob
    Interestingly, I just did a floated horizontal nav with no height specified for the <a> tags
    Hi Rob,

    Could you provide the code or a demo of this as display:block on a float should have no effect at all. Are you sure the anchor was floated?

    Not that I doubt you but if it does have an effect then that would be very interesting but I suspect something else is at play here

    I'm always on the lookout for strange behaviors so an example would be appreciated

  16. #16
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    Here are some examples I have put up.
    Cheers
    Rob

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

    Thanks for the demos and I can see where you are mistaken


    Code:
    #nav_with li a, #floated_nav_with li a  {
    display:block;
    }
    #floated_nav_without li, #floated_nav_with li {
    float:left;
    }
    The display:block has nothing to do with the floated list at all. The only element you are applying a float to is the list (li). The anchor is not floated at all.

    However you will need to add display:block to the anchor to make it expand to fill the list completely (and so that widths can be applied as widths do not apply to inline elements). The 100&#37; width on the anchor is a hack for ie to make the whole area active when display:block is applied (the height:1% hack would have worked also in conjunction with display:block).

    The above has nothing to do with wehther the floated list element has display:block applied to it or not. in your demo you have not applied display:block to the floated list at all.

    Hope that makes sense

  18. #18
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I'll look closer at this later.

  19. #19
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just had time to have at look at your explanation more closely and, yes, it makes sense!


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
  •