CSS flikar

Hej, jag har börjat skapa en flik-design, där jag vill ha två bilder med rundade hörn(en på varje sida om texten i tabben) och en bild som fyller ut mitten av tabben. Jag har gjort så här:

.tabwrap
{
    width:200px;
    height:120px;
    border: 8px solid #000000;
    background-color:#ffffff;
}
.tabwrap ul
{
    
}
.tabwrap li
{
    display: inline;
    background: url(../Content/Images/leftedge.png) no-repeat left top;
    padding-left: 10px;
    
}
.tabwrap li a
{
    background: url(../Content/Images/tabfill.png) repeat-x;
}
.tabwrap li span
{
    background: url(../Content/Images/rightedge.png) no-repeat right top;
    padding-right: 10px;
}

det är bara det att det verkar som att bakgrunden till en länk repeterar sig vidare över/under den högra bilden, vilket resulterar i en kantig högersida och en rundad vänstersida. Hur kan man lösa det, så att t.ex. länkens bakgrund bara repeterar sig fram till den högra bilden?

Här har vi också listan:

<div class="tabwrap" id="tabwrap">
<ul>
<li>
<a href="#"><span>Tab1</span></a>
</li>
<li>
<a href="#"><span>Tab2</span></a>
</li>
<li>
<a href="#"><span>Tab3</span></a>
</li>
</ul>
</div>

Mvh Sanji

Kan detta funka? Andvände margin i stället för padding så går inte a-elementet ut i hela li-elementet.

.tabwrap li
{
    display: inline;
    background: url(../Content/Images/leftedge.png) no-repeat left top;
    background: url(../Content/Images/rightedge.png) no-repeat right top;  
}
.tabwrap li a
{
    background: url(../Content/Images/tabfill.png) repeat-x;
    margin-left: 10px;
    margin-right: 10px;
}

Blergh, bakgrundsbilder för rundade hörn? Nuförtiden är det CSS som gäller!

http://www.css3.info/preview/rounded-border/
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Enda nackdelen är att det inte lirar i IE ännu, men stöd kommer i IE9.

jag vill ha en gradient look på tabbarna, därav bilder... jag har gjort om allting nu, skriver upp koden nedan:

css:

.tabwrap
{
    float:left;
    width: 195px;
    background:#ffffff url("../Content/Images/borderbg.png") repeat-x bottom;
    font-size:93%;
    font-weight: bold;
    line-height:normal;
    height: 35px;

}
.tabwrap .current
{
    background-image: url(../Content/Images/rightedge_active.png);
    padding-left: 9px;
    
}
.tabwrap .current a
{   
    background-image: url(../Content/Images/leftedge_active.png) no-repeat left top;
    padding-bottom: 5px;
}
input.tabwrap
{
    height: 20px;
    background: url(../Content/Images/tabfill.png) repeat-x;
}
.tabwrap ul
{
   margin:0;
   padding:10px 10px 0;
   list-style:none;
}
.tabwrap li
{
    background:url("../Content/Images/leftedge.png") no-repeat left top;
    
    float: left;
    margin:0;
    padding:0 0 0 9px;
}
.tabwrap a
{
    display:block;
    background:url("../Content/Images/rightedge.png") no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration: none;
}

html:

<div class="tabwrap" id="tabwrap">
<ul>
<li>
<a href="#">Tab1</a>
</li>
<li>
<a href="#" class="current">Tab2</a>
</li>
<li>
<a href="#">Tab3</a>
</li>
</ul>
</div>

så här blir resultatet med exakt den kod som finns ovan:

http://monsterbadboll.webs.com/tab.JPG

allt fungerar förutom den vänstra lilla bilden som bildar det rundade hörnet på den aktiva tabben. där finns istället den vanliga bilden för tabbar som inte är aktiva.

Om någon har ett tips på att få till denna design med gradient utan bilder, säg gärna till! Jag kan dock inte välja css3 i visual studio 2010 så det blir lite svårt att göra detta utan bilder för tillfället. Någon som vet hur jag kan uppgradera?

gradient finns ju i CSS3 idag ;)

ja det gör det, men hur uppgraderar man till css3 i visual studio 2010? finns det någon annan bra editor som jag kan använda för css3 i annat fall? jag har dreamweaver cs3 men det kanske är för gammalt för att använda css3? jag testar lite så länge.

har inget med verktyget du använder för att redigera dina CSS texter, det är webbläsarna som är problemet.

ja, men menar, de nya funktionerna i css3, finns det något verktyg som har dessa så man kan bläddra igenom dem, t.ex. om man börjar skriva en rad så kommer en ruta upp där man ser alla egenskaper man kan sätta.

Men skit samma, jag kommer inte att använda css3 än på ett bra tag, då de som kommer att använda min applikation består till 80% av windows xp användare, och säkerligen en stor del av dessa använder IE8. så det kommer sabba allt om jag ska använda css3.

någon som har en tanke om min kod jag skrev i tidigare post?

Jag gissar på att koden:

.tabwrap li
{
    background:url("../Content/Images/leftedge.png") no-repeat left top;
    
    float: left;
    margin:0;
    padding:0 0 0 9px;
}

på något sätt tar över koden för den aktiva tabben, så att bilden för en inaktiv tab tar över platsen för den aktiva. men den högra bilden på den aktiva tabben visas rätt. varför syns den, men inte den vänstra?

//Mvh Sanji

.tabwrap .current a

är ju fel, du har ju satt .current på a-elementet, men du säger att alla a-element inne i en klass current skall ändras, byt ut den till .tabwrap a.current

vet inte riktigt vad du gör med var dina runda hörn är (kan bara gissa), men spontant så känns det vettigare att sätta current på din li element istället för a-elementet.

Kan du lägga upp bilderna du använder eller ladda upp dom här så ser man vad som är vad, annars få man sitta lite i blindo.

dessa är alla bilder, så ser du hur det blir. om det hjälper så gick jag efter guiden här: http://www.alistapart.com/articles/slidingdoors/

jag testar lite till!

de blåa är active-bilderna, de gröna är de vanliga. den rektangulära är bakgrunden som finns med i .tabwrap, aka borderbg.png

jag gjorde om en del i din CSS, hade velat göra om html koden med för förstå inte varför du har en div runt din ul.

.tabwrap li
{
    background:url(leftedge.png) no-repeat left top;
    float: left;
    margin:0;
    padding:0 0 0 9px;
}
.tabwrap li a
{
    display:block;
    background:url(rightedge.png) no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration: none;
}
.tabwrap .current {
    background-image: url(leftedge_active.png);
 }
.tabwrap li.current a
{   
    background-image:url(rightedge_active.png);
}

Och satter class="active" på li, det behöver du göra för att få alla element att bli påverkade.

サンジ: Ang rundade hörn och gradienter i CSS... Det finns ju inget som utesluter att du använder en bakgrundsbild (där bilden inte har hörn utan bara är en gradient) ihop med rundade hörn mha CSS. Visserligen innebär det att IE innan version 9 får kantiga hörn, men du slipper åtminstone besväret att försöka pussla ihop bilder på sidorna om texten.

du, det blev bra det där! nu ska jag bara läsa igenom det här ordentligt så jag förstår varför det blir som det blir och det jag gjorde fel. Tack så mycket för hjälpen som vanligt voigtann1! och tack nitro2k01 för alla tips om css3 :)