There's always Doug Bowman's "Sliding Doors":
http://www.alistapart.com/articles/slidingdoors/
It'll help you create expanding, EM width dependent tabs.
On 30/08/2006 16:03, Ross C wrote:
> I saw a site a while back that had this (I'll try to find it).
>
> I believe they had a background image for the tab that was like 150px wide
> (and 20px high in your case) that had the borders for the top, right (or in
> your case the chamfered corner), and bottom, then specified li
> {border-left: 1px...}
> So it's still expandable horizontally to scale with your text length.
>
> I can see that this method would not work for everyone (for example, if your
> li has a fluid height), but it may work for u.
>
>
> -ross
>
> -----Original Message-----
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Poyner, Matt
> Sent: Wednesday, August 30, 2006 9:55 AM
> To: [email protected]
> Subject: [css-d] (no subject)
>
> I have a problem that I'm not sure how to solve. I am attempting to
> create tabs with a small corner "cutout". I know hot to place the small
> corner image and get the rollover colors to work, etc.
>
>
>
> The problem I'm having is that the 1px border I need on the top, left,
> and right of each tab is showing around the image, so I turned border
> off and am looking for a solution to create the borders I need.
>
>
>
> Is there a way to specify a length for a border? For instance, if my
> tabs are 30px wide and 20px high, and my corner image is 5px square, can
> I specify the top border to only be 25px in length, and my right border
> to be 15px high?
>
>
>
> If not, is there a workaround for this?
>
>
>
> Thanks for any help you can give.
>
>
>
>
>
> My current code:
>
>
>
> #newsTabs ul{
>
> list-style-type: none;
>
> margin: 0;
>
> padding-bottom: 24px;
>
> font: bold 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
>
> float: left;
>
> }
>
> #newsTabs li {
>
> float: left;
>
> height: 20px;
>
> color: #000000;
>
> padding-bottom: 0px;
>
> margin: 2px 2px 0 2px;
>
> /*border-top: 1px solid #9b988f;
>
> border-left: 1px solid #9b988f;
>
> border-right: 1px solid #9b988f;*/
>
> background: url(/images/tabcorner.gif) 100% 0 no-repeat white;
>
> }
>
> #newsTabs a:link, #newsTabs a:visited {
>
> display: block;
>
> color: #000000;
>
> background-color: transparent;
>
> text-decoration: none;
>
> padding: 4px;
>
> }
>
> #newsTabs a:hover {
>
> color: #000000;
>
> background: url(/images/tabcorner.gif) 100% 0 no-repeat #dde2dc;
>
> }
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> 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/
>
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> 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/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
