I Inferis Medlem sedan sep. 2000 667 inlägg Frågan 13 aug. 2006 18:06 #1 Jag har två lager där ena bilden ska ligga över den andra.
#bild {
width: 250px;
height: 180px;
MARGIN: -210px 0px 0px 43px;
float: left;
z-index: 3;
overflow: hidden;
}
#bild2 {
width: 296px;
height: 270px;
float: left;
MARGIN: -270px 0px 0px 10px;
z-index: 4;
}
<DIV id="bild"><IMG SRC="grafik/bild.jpg" alt=""></DIV>
I Inferis Medlem sedan sep. 2000 667 inlägg Glömde säga att i IE7 så ser det ut det ska medans FF vänder på lagren.
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg z-index gäller bara för positionerade element.
Vad är det du försöker göra? Lägga till en ram runt en bild?
I Inferis Medlem sedan sep. 2000 667 inlägg Ja, jag vill ha en ram över en bild. Är den undre bilden för stor så det överflödiga gömmas med overflow: hidden var tanken.
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Ramen är "dekoration" och bör därför läggas dit med CSS istället för att använda HTML <img>. Eftersom IE saknar stöd för egenskapen 'content' kan vi använda en bakgrundsbild istället:
<p class="framed"><span></span><img alt="" src="bild.png"></p>
.framed { position:relative; float:left; overflow:hidden; }
.framed span { position:absolute; width:100%; height:100%; background-image:url(ram.png); }
.framed img { display:block; margin:20px; }
Nåt i den stilen...
I Inferis Medlem sedan sep. 2000 667 inlägg Tack! nu fick jag ihop det.
I Inferis Medlem sedan sep. 2000 667 inlägg Detta funkar inte:
.framed img { margin:20px; height: 180; width: 250; overflow: hidden; }
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Ange en bredd på .framed så borde det funka.
I Inferis Medlem sedan sep. 2000 667 inlägg Jag får inte till det... :-(
bild_ram.gif har fasta mått H:270 W:300 och har ett hål som är 250x180 där bild.jpg ska synas. Bild.jpg kommer att bli olika bilder med olika mått.
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg .framed { position:relative; float:left; overflow:hidden; [b]width:300px; height:270px;[/b] }
.framed span { position:absolute; [b]left:0; /* ie6... */[/b] width:100%; height:100%; background-image:url([b]bild_ram.gif[/b]); }
.framed img { display:block; [b]margin-top:45px; /* (270-180)/2 */ margin-left:25px; /* (300-250)/2[/b] */ }
I Inferis Medlem sedan sep. 2000 667 inlägg Tack för hjälpen! Måste dock be om ursäkt, hade råkat byta namn på bild_ram.gif... :-(
