[Hjalmarsson]

Då content bara fungerar med before och after som då inte IE6-7 har stöd för ska du droppa det helt och hållet. Sen kan du ju fråga dig vad inline resp. block element är så finner du svaret på din egna fråga.

Men varför göra saker mer komplicerade än vad det är? 2 bilder positionerade på li och a elementen så är det ju klart? css sprites eller en lång bild föredrar jag i de flesta fall beroende på hur designen ser ut.

[marcuslind]

Ursprungligen postat av Hjalmarsson

Då content bara fungerar med before och after som då inte IE6-7 har stöd för ska du droppa det helt och hållet. Sen kan du ju fråga dig vad inline resp. block element är så finner du svaret på din egna fråga.

Men varför göra saker mer komplicerade än vad det är? 2 bilder positionerade på li och a elementen så är det ju klart? css sprites eller en lång bild föredrar jag i de flesta fall beroende på hur designen ser ut.

Problemet är nu löst, jag löste det med :before och :after elementen även om IE6 och IE7 inte stödjer det.

Angående li och a elmenten så menar du alltså något följande:
<li>
<a href="#">START</a>
</li>


li{
background: url(left.png);
background-position: top left;
}

a{
background: url(right.png);
background-position: top right;
}

?

Angående att använda långa bilder med dubbla knappar över/under vill jag inte använda mig av när sajten ska vara dynamisk. Vill kunden lägga till en längre länktext som "Produkter och Tjänster" eller om de vill ha en kortare som "Hem" så ska knappens storlek anpassa sig efter texten. Om man använder sig av statiska bilder så är bredden lika stor på varje knapp vilket inte efterfrågas i detta fall.

Du har rätt i li och a elementen. Jag borde gjort det på det viset, jag tänkte helt enkelt inte på det.

[Hjalmarsson]

Ursprungligen postat av marcuslind

Angående li och a elmenten så menar du alltså något följande:
<li>
<a href="#">START</a>
</li>


li{
background: url(left.png);
background-position: top left;
}

a{
background: url(right.png);
background-position: top right;
}

?

Angående att använda långa bilder med dubbla knappar över/under vill jag inte använda mig av när sajten ska vara dynamisk. Vill kunden lägga till en längre länktext som "Produkter och Tjänster" eller om de vill ha en kortare som "Hem" så ska knappens storlek anpassa sig efter texten. Om man använder sig av statiska bilder så är bredden lika stor på varje knapp vilket inte efterfrågas i detta fall.

Du har rätt i li och a elementen. Jag borde gjort det på det viset, jag tänkte helt enkelt inte på det.

Det är precis samma sak som att ha 2 bilder, skillnaden är mindre request till servern (IE6 och hover gör ny request oavsett sprites eller inte).

Så har du en sprite med left och right bilderna och bara positionerar dom på li och a, samma gäller för en lång bild, bara positionera den left eller right.

Ta en titt på youtube vettja, http://s.ytimg.com/yt/img/master-vfl125983.png