The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS navigation woes

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #39914

    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?


    Look at the span (I gave it a background).


    @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.


    I’ve made a few changes for you:


    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).

    * Tested in FF and IE8


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


    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:


    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,

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.