Sent by Zoe M. Gillenwater on 9 August 2006 14:02
Magenta Placenta wrote:
> Is there a way to get a stylized list to span the width of it's parent
> container? I've tried a width:100% as well as the exact pixel width (784)
> on the <ul>, coupled with padding on the anchor tag to give the button text
> some horizontal padding. This gets me close, but I end up with a slight gap
> on the far right side.
>
> What I ended up doing was classing the first <li> and applying a pixel width
> to that. You can see this at:
> http://designs.inherent.com/dynapsis/build/bioserver.cfm
>
> Without that first li classed/width, there is a gap (oh, 10 pixels or so) on
> the far right button, which becomes very obvious when you do a mouseover to
> change the background color. You can see this at:
> http://designs.inherent.com/dynapsis/build/bioserver2.cfm
>
> Is there an easier way to accomplish what I've done at the first url above?
>
First of all, thanks so much for providing two URLs, one showing the
untouched problem, and one showing your attempted fix. Very helpful.
The float on the ul is what is making it shrinkwrap the li's inside.
Giving it width: 100% stops the shrinkwrapping and makes it expand to
fill the container. Now, this makes the last button wider than the rest,
which is probably not what you want either. But what's the alternative?
Make the widths of all the buttons get a little wider to eat up that
extra space? There's no CSS property to tell them to do this.
Essentially you're wanting table cell behavior: take a width and divide
it into 9 chunks that are equally spaced. Floating the li's makes their
widths dependent on the amount of content inside. You could make the
li's display: table-cell, but that's not supported by IE, even IE7.*
I suggest changing your design. Remember that not everyone will be using
the same font size, so sometimes that list of links will take up two
lines, not one. So don't concern yourself so much with making the links
perfectly spaced out and filling up the whole strip, because you can
only make this happen in very controlled circumstances. What if, instead
of this, you center all the buttons? Any extra space will be divided
between the left and right sides, which you can separate off from the
buttons with borders. This will look good both when the nav bar is one
line and when it has to flow onto two lines.
Zoe
* For a great example of this, check out
http://mrclay.org/web_design/tabs/. It doesn't work in IE unless you use
JavaScript to change the list into a real table. This might be
acceptable to you. Not sure how it works in older browsers, or on a Mac.
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/