[thelist] CSS - specific SPAN width problem

[Stefan Schwarzer]

Dear Ben,

thanks for your quick answer. Right, I never thought about the  
possibility of using lists. I actually never worked with lists in  
combination with CSS.

What I wonna achieve is this here:

-------------- next part --------------


So, I used your suggestion and tuned it as much as I could... only to  
realize that the border of the tag will not stop above the triangle,  
but - naturally - below.

What I did then was to try to create a second list below, which would  
"store" the triangles, and be activated via javascript. But there I  
had then really strange results...


#nav-menu ul
{
     font-size: 10px;
     font-family: arial, sans-serif;
     color: #00115a;
     list-style: none;
     padding: 0;
     margin: 0;
}

#nav-menu li
{
     float: left;
     margin: 0 0.15em;
     padding: 0 0 6px 0;
}

#nav-menu li.selected
{
     border: 0.1em solid #00115a;
     background: #edc277;
     background:url('../../images/focus_triangle.png') 50% 100% no- 
repeat;
}

#nav-menu li a
{
     height: 1.7em;
     line-height: 1.7em;
     float: left;
     width: 6em;
     display: block;
     text-decoration: none;
     text-align: center;
}




<div id="nav-menu">
     <ul>
         <li class="selected"><a href="#">All</a></li>
         <li><a href="#">National</a></li>
         <li><a href="#">Subregional</a></li>
         <li><a href="#">Regional</a></li>
         <li><a href="#">more</a></li>
     </ul>
</div><br />



// for the next step then:


#nav-menu2 ul
{
     font-size: 10px;
     font-family: arial, sans-serif;
     color: #00115a;
     list-style: none;
     padding: 0;
     margin: 0;
}

#nav-menu2 li
{
     float: left;
     margin: 0 0.15em;
}

#nav-menu2 li a
{
     height: 1.7em;
     line-height: 1.7em;
     float: left;
     width: 6em;
     display: block;
     text-decoration: none;
     text-align: center;
}

#nav-menu2 li.selected
{
     background:url('../../images/focus_triangle.png') 50% 100% no- 
repeat;
}


<div>
  .... first list ...
</div>


<div id="nav-menu2">
     <ul>
         <li class="selected"><a href="#">All</a></li>
         <li><a href="#">National</a></li>
         <li><a href="#">Subregional</a></li>
         <li><a href="#">Regional</a></li>
         <li><a href="#">more</a></li>
     </ul>
</div><br />






On Apr 26, 2006, at 11:30 AM, ben morrison wrote:

> 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.
>
> <ul>
> <li>item 1</li>
> <li class="selected">item 2</li>
> ...
> </ul>
>
> css
> ul {marign:0;padding:0;list-style:none;}
>
> li {
> list-style:none;
> marign:0;
> /* using padding-bottom for image underneath */
> padding:0 0 50px 0;
> display:inline;
> }
>
> /* 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.
>
> ben
> -- 
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>