CODEWITHSUNDEEP
htmlcssmenuhtml-lists
eskhool
eskhool

Reputation: 656

ul based html menu with css spilling into multiple lines

So essentially I have a horizontal menu using ul and li elements styled with CSS which has a fixed height attribute for the ul but since the number of li elements are too many they are spilling over into multiple lines ...since the height of the ul is fixed, the li elements appear on the next line just fine but they are outside of the 'block' of the ul...so any further html content that appears starts showing inline with the li elments on the 2nd line?

I hope I have been able to describe the problem. I wish this was a publicly accessible site, for the CSS gurus to help with using firebug or web inspector.

Upvotes: 0

Views: 3387

Answers (2)

reuven
reuven

Reputation: 23

  • you can expand the width of the container tag holding the ul, you do not have enough width for all the list elements
  • if you can not enlarge the container try to cut down the width of the li's, using less padding and margin in between them.
  • you can all so use a min-width property to bee sure that they will have enough space

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

  • use min-height on your UL, not height
  • use float:left on your LIs
  • use display:block on your A tags and put all other styling on the A tags. (DO NO STYLE THE LI TAGS OTHER THAN FLOAT:LEFT)

Upvotes: 2

Related Questions