Grow your CSS skills. Land your dream job.

navigation woes

  • # September 18, 2012 at 9:25 pm

    This seems to happen to me every single time I code navigation. I really hate coding navigation. I can’t figure out what I am doing wrong. The last link in the nav always behaves like it ran out of room and gets cut off even though I have not specified a width on the navigation div or the UL. What is it that is happening?

    http://jsfiddle.net/r4Twt/

    # September 18, 2012 at 9:34 pm

    Look at the span (I gave it a background). http://jsfiddle.net/Daqp5/

    # September 18, 2012 at 10:02 pm

    I don’t understand what you are getting at. The two spans are there because I have a rounded background that the nav will have. I have had this trouble without those. I usually get this issue on all navs and I am not sure what I did that fixed it in the past.

    # September 18, 2012 at 10:23 pm

    @cybershot How do we know if you need to float those spans or not? Upload the images so we know what you’re trying to accomplish with the backgrounds.

    # September 18, 2012 at 10:25 pm

    I’ve made a few changes for you: http://jsfiddle.net/joshnh/Gfxc2/

    # September 18, 2012 at 10:42 pm

    I am floating the spans because the background of the span is a rounded corner image that has gradients. I want them to move when new menu items are added. I can’t think of another way to put them in there. The main problem I am having is that I don’t understand why the UL consistently does not expand to allow for whatever nav item is added. It’s almost like there is an invisible width that gets added to the ul which only lets it expand so much and it always cuts off the contact. This is the third time I have had this issue and I just can’t figure out what causes it. Maybe it’s floating the list items instead of using display: inline. Thanks for all the help guys. I appreciate it.

    # September 20, 2012 at 7:32 am

    There doesn’t appear to be any fixed width so I cannot determine why your menu is not expanding as it should. The example I made seems to work just fine. I have also removed the SPANS that were flanking your menu and replaced them with :before and :after pseudo thingies (technical term).

    http://jsfiddle.net/Gfxc2/18/

    * Tested in FF and IE8

    # September 20, 2012 at 8:11 am

    Is there not just a simpler option of adding a padding to the #navigation, a border-radius on that and then just a gradient?

    http://codepen.io/Paulie-D/pen/phnCv

    # September 20, 2012 at 9:15 pm

    There is an image behind the navigation that has some pretty hard to replicate gradients and borders using css. I am not even sure it is possible. So for that reason, I am sticking with the image. I wish I could do it your way though

    # September 20, 2012 at 9:46 pm

    If you assign a float:left; to the UL, it will probably do what you want it to. Since you use the spans on either side to float with the UL, it makes sense to make the UL itself float too.

    Maybe remove the right margin from the last item as well.

    Like this: http://jsfiddle.net/senff/r4Twt/2/

    # September 20, 2012 at 9:54 pm

    Well Adam, I went with the before and after and it works just fine. A little cleaner method. For some reason that I just have not been able to explain, my nav just won’t sit right. I ended up having to add a margin-top: -33px to get the right side end cap to sit where it is suppose to. It just wants to sit 33px below the nav even though there is plenty of room for it to sit where I think it should without the margin. I am sure I will figure it out one of these days.

    # September 20, 2012 at 9:57 pm

    well Senff, it seems that floating the UL left has done the trick. My end cap now sits where it is suppose to without any – margin. I have removed the spans and gone with css before and after. Now my nav looks how I think it should. Thanks guys for all the help. Those were some really good tips.

    # September 21, 2012 at 10:34 am

    the more floats you have to keep track of, the harder it is to make it work. I use to have the same problem so instead what i did was got rid of the div that was wrapping my navigation and just added a class or id to the ul itself. Saves a lot of time. Here is your fiddle, http://jsfiddle.net/r4Twt/13/

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".