4 svar · 833 visningar · startad av Jerpa
Fick en förfrågan om hur man fick en tjock vit ram runt en bild samt en tunn linje runt alltihopa.
Padding och border kom jag fram till.
img {
padding:3px;
border:5px solid #f0f;}
När vi uppdaterar bloggen ser vi rätt resultat men när sidan har laddat klart försvinner allt som har med ramar att göra.
För att testa det mer ut gjorde jag en egen blogg, men samma sak. Provade flera olika teman i olika webbläsare men icke.
Varför tar den bort paddingen?
Edit:
Såg nu efteråt att en RSS-ikon får ramen jag efterfrågar, likaså högst upp på sidan, tydligen en "osynlig bild".
http://jerpajerpa.blogg.se/
Kanske därför att bilden är formaterad med en class som heter "thumbnail".
Testa ändra stilmallen
.thumbnail {
margin: 0 6px 6px 0;
}
till t.ex.
.thumbnail {
margin: 0 6px 6px 0;
padding:3px;
border:5px solid #f0f;
background:#fff;
}
Men tänk på att bilden också är en länk och kan påverkas av vad du satt för still på a-taggen....
Nej, det vill sig inte.
Men det är ju konstigt eftersom den fungerar ju först men försvinner efter någon sekund.
Nu har jag provat att lägga till
margin: 0 6px 6px 0;
padding:3px;
border:5px solid #f0f;
background:#fff;
på
a
a:hover
img
thumbnail
Det resulterar i att alla länkar får en tjock rosa border. Det verkar även ligga nånting under/bakom bilden som får en ram. (Lika på RSS-ikonen)
Men runt själva bilden blir det fortfarande inget.
Låter det vara så här för att visa.
Kollade i html-editorn och den lägger till class=image
<img class="image" src="http://jerpajerpa.blogg.se/images/2010/sol_79394640.jpg" alt="beskrivning" />
Lade även till föregående kod fast grön färg. Den visas, men ploppar bort.
Ok nu har jag hittat "problemet".
Tyvärr så är det så att blogg.se har valt att plocka bort den funktionen, istället för att låta varje bloggare avgöra själv.
Så, även om det ser ut som att du har en ram runt dina bilder när sidan laddas, så försvinner den när sidan har laddats klart, och det beror på att blogg.se har spärrat den funktionen.
Däremot kan man skriva:
img{
background: #000000;
padding: 2px;
}
.image {
background: #000000;
padding: 2px;
margin: 0 6px 6px 0;
}