kaxigt.com

Du kanske använder bilder som klickbara länkar?

Det vanliga sättet är då att skriva border=”0″ i html-koden, vilket du absolut inte ska göra. Använder du css ska du naturligtvis låta stilmallen sköta detta istället för att stjäla utrymme i html-koden.

Ni som använder xhtml och/eller vill gå över till strict kommer direkt att upptäcka att sidan inte validerar om man inte tar bort det.

Hur gör man då? Jo lägger man till ett enkelt värde i stilmallen behöver man inte tänka så mycket mer på html-koden mer än att ta bort border=”0″. Koden under ser till att ta bort alla fula ramar som annars brukar synas runt bilderna.

a img {border:0;}

Detta gäller också ett omvänt förhållande om det är så att du vill ha en border runt dina bilder. Då lägger du bara till de värden du vill ha i css-koden.

OBS! Handlar det om en bild som inte är länkad tar du bort värdet a.

Länkade bilder:

a img {border:1px solid #000;}
a img {border:1px dotted #000;}

Olänkade bilder:

img {border:1px solid #000;}
img {border:1px dotted #000;}

Som du ser så behöver man inte lägga en klammer runt varje värdeelement utan det går alldels utmärkt att foga samma hela värdet inom en och samma klammer.

Men – för att ytterligare göra din ram runt bilden mer snygg kan man utöka css-koden till att formatera en sida i taget. Här under är ett exempel.

Länkad bild:

a img {border-left:1px solid #000;
border-right:1px solid #666;
border-top:1px solid #666;
border-bottom:1px solid #000;}

Olänkad bild:

img {border-left:1px solid #000;
border-right:1px solid #666;
border-top:1px solid #666;
border-bottom:1px solid #000;}

Vill du sedan ha en border i hovern lägger du in följande kod.

img:hover {border: 1px solid #fff;}

Eller kanske luft mellan bild och ram – då stoppar vi in en padding.

img {border:1px solid #000; padding:5px;}

Höger – vänster eller center? Placeringens kod lägger du till så här.

img {border:1px solid #000;
padding:5px; float:left;}

Man kan sedan hålla på att bygga upp dessa värdeelement utifrån hur man vill ha det. Html-koden blir däremot som vanligt men utan border=”0″.

<img src="din_bild" alt="blomma" width="150" height="150"/>

Och i xhtml.

<img src="din_bild" alt="blomma" width="150" height="150" />

Hur man kan formatera sina bakgrundsbilder

Här är ett enkelt tips om man vill specialdesigna sin bakgrund utifrån en enda bild. Du har en bakgrundsfärg och en bild, fast bilden kanske ska vara i vänstra översta hörnet och bara där utan att upprepas. Hur gör man då?

Genom att använda sig av css2 kan man ställa in positionen även för en bakgrundsbild. I praktiken kan du därför välja mellan fler alternativ.

Först om den ska upprepas eller om det ska vara statisk. Sedan om du vill positionera den på en bestämd plats utan att upprepas. Sedan om du vill att den ska upprepas antingen i sidled eller i höjdled. Variationerna är många. Med hjälp av små kodsnuttar fixar din stilmall resten. Här är några exempel.

background:#fff url(bg.gif) repeat-x;
[repeterar bilden endast i sidled]

background:#fff url(bg.gif) repeat-y;
[repeterar bilden endast i höjdled]

background:#fff url(bg.gif) repeat left top;
[repeterar bilden med början i vänstra hörnet högst upp]

background:#fff url(bg.gif) no-repeat left top;
[repeterar inte bilden – fast position i vänstra hörnet högst upp]

background:#fff url(bg.gif) repeat left bottom;
[repeterar bilden – med början i vänstra hörnet längst ned]

background:#fff url(bg.gif) no-repeat left bottom;
[repeterar inte bilden – fast position i vänstra hörnet längst ned]

background:#fff url(bg.gif) repeat right top;
[repeterar bilden – med början i högra hörnet längst upp]

background:#fff url(bg.gif) no-repeat right top;
[repeterar inte bilden – fast position i högra hörnet längst upp]

background:#fff url(bg.gif) repeat right bottom;
[repeterar bilden – med början i högra hörnet längst ned]

background:#fff url(bg.gif) no-repeat right bottom;
[repeterar inte bilden – fast position i högra hörnet längst ned]

background:#fff url(bg.gif) repeat;
[repeterar bilden över hela fönstret]

background:#fff url(bg.gif) no-repeat;
[repeterar inte bilden]

background:#fff url(bg.gif) repeat left top fixed;
[repeterar bilden med början i vänstra hörnet längst upp – fast position – ej skrollande bakgrund]
Detta värde motsvarar attachment:fixed;