[HTML/CSS] Stretch background li

[Woy]

Ik ben een tabstrip aan het maken met HTML/CSS dit probeer ik voor elkaar te krijgen door een Unordered List met List Items te vullen en dan deze op te maken met CSS. Dit lukt opzich aardig en ik krijg netjes een balk met tabs. Nou heb ik voor de tabs een image met rounded corners.

De size van een tab kan varieren aan de hand van de text die erin komt te staan. Nu wil ik dat de background image automatisch de size van de listitem aan neemt maar dat wil me maar niet lukken met css.

Ik heb de volgende html

HTML:

<ul class="tabs">
    <li><a href="#" onclick="alert('tab1');">Tab1</a></li>
    <li><a href="#" onclick="alert('tab2');">Tab2</a></li>
</ul>

die ik met de volgende CSS opmaak

Cascading Stylesheet:

.tabs {position:relative; height: 27px; margin: 0; padding: 0; overflow:hidden; border:0px}
.tabs li {display:inline;}
.tabs a 
{
    background:#fff url("tab.gif");
    position:relative;
}
.tab-container
{
    background: #fff;
    border:0px
}

Op zich komen de tabs er uit te zien zoals ik wil alleen valt de rechter kant van het plaatje weg. Of als de text te lang wordt dan valt de text buiten het plaatje ( met no-repeat, anders wordt hij natuurlijk herhaald ).

Weet iemand hoe ik kan zorgen dat het background image de goed size voor een Tab krijgt?

[Willem]

Wil je wel een list-type-style?

[Woy]

willem169 schreef op dinsdag 14 februari 2006 @ 12:01:
Wil je wel een list-type-style?

Hoe bedoel je precies. Het is in princiepe een lijst van tabs. Het leek me dus logisch om dit in een ul te stoppen. Ik heb ook aan een table zitten denken maar dat lijkt me lastiger te onderhouden en te stylen en ook daar heb je neem ik aan het zelfde probleem.

Mijn echte html/css is natuurlijk iets uitgebreider om het allemaal wat mooier te maken.

[Erkens]

http://alistapart.com/articles/slidingdoors

[Woy]

Erkens schreef op dinsdag 14 februari 2006 @ 12:11:
http://alistapart.com/articles/slidingdoors

Thanks daar ga ik eens naar kijken en ik denk dat ik daar wel verder mee moet kunnen komen.