css question
- Started
- Last post
- 12 Responses
- Stugoo
I have a UL which has say 5 <li>'s
displaying horizontally.
the content for each is variable,the widths are set. is it possible to have them all appear the same height regardless of the content size? (there are background images involved)
- vwsung18t0
the height of the content is variable? you can't set a set height?
- Stugoo0
would rather not.
here is what i mean :
http://www.stugoo.co.uk/testbed/…
- neverblink0
hmm.. set a min-height for the li's..
or.. and I'm just guessing.. maybe set the height of the li's to 100%, because the ul is stretched by largest li?
- YAYPaul0
Only thing i can think to do is set their min-heights so they are all at least x height then expand. Other than that a surrounding div with a background image in so the li's height doesn't matter?
- Stugoo0
cheers ill give them a bash
- YAYPaul0
Btw if you are floating your li's left you don't need the display: inline, the float takes care of that.
- Stugoo0
:)
- heavyt0
i think our best bet is to do a "faux column". That is - apply a background image to the UL element instead, that repeats vertically. If you did that, it would appear as though each LI were the same height.
- Stugoo0
was afraid i was going to have to do it like this, i thought i could so some funky stuff with css, oh well back to the work arounds!
- neverblink0
like YAYPaul said, setting the LIs height to 100% won't work.. I thought it was because there was no ul to stretch to (because float takes them outside of the normal layout), but adding a footer (as used when stretching DIVs in columns) still didn't solve it. This is caused because their parent element the UL doesn't have a height (even if it's stretched by the footer). Setting a height for the UL (min-height doesn't work) will make them all the same size.. but at a fixed height, so it's the same as setting the height for the LIs itself
- Stugoo0
luckily the design isnt set, ive rearranged the layout and it looks a bt smarter than what i was aming for anyway.
Thanks for the input all.
- vwsung18t0
for the background image repeating in the UL, it's better to put the ul in a div and put the background in the div. then float the LIs and put another div after the UL and still inside the wraaping div. then put a clear: left attribute to the second div.
- this works since you already have fixed widths for your LIsvwsung18t