[marcuslind]

Hallå WN'are!

Håller på att sätta ihop en ny design med XHTML och CSS. Är i stort sett klar utöver menyn som ska se ut såhär http://data.fuskbugg.se/skalman01/--Bild%2014.png enligt designen.

Menyn ska vara dynamisk, man ska kunna skapa sidor och ta bort sidor. Namnen på varje sida kan vara långa ord som "Vårat sortiment" eller "Hem". Därav att jag inte valt att köra display: block och sedan en bakgrund på det. Isåfall skulle ju bakgrunden vara lika lång eller kort på alla knappar och inte anpassad efter namnet på länken.

Min idé var att köra med CSS pseudoelementen :before och :after.

Jag har kört #menu a:hover:before{content: url(bildnamn.png);} och samma sak på :after. Resultatet blir följande: http://data.fuskbugg.se/skalman01/Bild%2015.png .

Alltså, bilderna från content: url(); trycker ner länken under dom. Jag har försökt med att positionera upp texten med padding och margin, jag har försökt att göra avståndet mellan bilderna och texten större med margin för att se om den trycks ner för att den inte får plats emellan...

Mitt problem är alltså positioneringen av dessa pseudoelement. De ska inte trycka ner texten på det där sättet och nu har jag försökt lite för länge och vänder mig därför hit!

[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