[thelist] CSS - specific SPAN width problem

ben morrison morrison.ben at gmail.com
Wed Apr 26 04:30:58 CDT 2006

On 4/26/06, Stefan Schwarzer <st.schwarzer at geois.de> wrote:
> Hi,
> I am struggling with a perhaps rather strange objective:
> I have a horizontal navigation bar with five items.
> Directly below I would like to have another DIV element with, again,
> five "items" - that is a background-image. But: Only if one of the
> navigation items will be selected, something will appear in the "box"
> below that navigation item.
> Now, the problem is that it seems that I can't define the width of
> the elements. The result is that the fist navigation items are spread
> out along the length of their name. But the second DIV elements
> spread out only one character, that is the &nbsp;.
> So, I have my
> <div style="width: 100%">
>         <span .... >item 1</span>
>         <span .... >item 2</span>
>         <span .... >item 3</span>
>         <span .... >item 4</span>
>         <span .... >item 5</span>
> </div>
> <div style="width: 100%">
>         <span .... >&nbsp;</span>
>         <span .... >&nbsp;</span>
>         <span .... >&nbsp;</span>
>         <span .... >&nbsp;</span>
>         <span .... >&nbsp;</span>
> </div>
> I tried to add "style='width: 20%'" to the SPAN elements, but this
> doesn't work.

I'm not quite sure what it is you are trying to achieve and there
maybe better ways of doing this.

As for your width problem, a SPAN element is a inline element and
therefore will only take up as much space as is used. You neeed to use
Block level elements to achieve what you want.

It would seem that all you want is to show an image beneath a selected
item. You could probably do this with one list.

<li>item 1</li>
<li class="selected">item 2</li>

ul {marign:0;padding:0;list-style:none;}

li {
/* using padding-bottom for image underneath */
padding:0 0 50px 0;

/* set the background image for selected item middle bottom */
li.selected {
background:url(yourimage.gif) 50% 100% no-repeat;

You could use different classes if you need different images.


More information about the thelist mailing list