Re: [css-d] css tabbed menu

[Barney Carroll]

@Zoe - sorry, wilco.

Brian Jones wrote:
 > tab         ( http://astro.temple.edu/~tua14115/tab.gif )
 > tab-right  ( http://astro.temple.edu/~tua14115/tab-right.gif )
 > tab-left    ( http://astro.temple.edu/~tua14115/tab-left.gif )

There should only be two images - as I remember it, Bowman's particular 
method involves the right tab being the longest - so attach instances of 
what you have as tab.gif to the right of tab-left.gif indefinitely until 
you reach the maximum width (for tabs, say 400px - I can't imagine 
anybody having their text size so large as to warrant anything higher).

 > <div id="tabs4">
 >        <ul>
 >            <li><a href="#"><span>Home</span></a></li>
 >            <li><a href="#"><span>Products</span></a></li>
 >            <li ><a href="#"><span>Services</span></a></li>
 >            <li><a href="#"><span>Support</span></a></li>
 >            <li><a href="#"><span>Order</span></a></li>
 >            <li><a href="#"><span>About</span></a></li>
 >        </ul>
 > </div>

The <span>s are unnecessary - the CSS you're giving it can probably be 
re-assigned to the <a>s - once you've adjusted your right tab image:

#tabs4 ul
{
   list-style:none;
}

#tabs4 li
{
   float:left;
   background:url("http://astro.temple.edu/~tua14115/tab-left.gif";) 
no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
}

#tabs4 a
{
   float:left;
   display:block;
   background:url("http://astro.temple.edu/~tua14115/tab-right.gif";) 
no-repeat right top;
   padding: 4px 4px 0 0;
}

Hope this works for you. The List Apart article is really helpful in 
terms of understanding the mechanics employed - the insight it gives 
applies to many aspects of box model cssing.

Regards,
Barney
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/