8 svar · 503 visningar · startad av annesophie
Kortfattat om mitt problem...
Jag använder inte så ofta DIV ska jag kanske inleda med... 
Jag har en bild, behöver lägga en ruta med information ovanpå bilden.
Bifogar nedan kod som jag tycker kunde fungera men som natuligtvis inte funkar.
DIV:en lägger sig under bilden och inte ovanpå.
Vad är fel? *sliter mitt hår*
[1]
<HTML>
<HEAD>
<STYLE type=text/css>
#box1 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px; POSITION: relative; TOP: 0px; BACKGROUND-COLOR: #cccc99; z-index:10;
}
</STYLE>
</HEAD>
<BODY>
<img src=BILD.gif>
<DIV id=box1>Lägg dig över bilden DÅ!!!</DIV>
</BODY>
</HTML>
[/1]
Hej!
Du använder position relative lite fel... Nu vet jag inte hur stor bilden är men du borde använda "bottom"
Exempel:
#box1 { position: relative; bottom: 50px; left: 20px; }
#box2 { position: relative; top: 50px; right: 20px; }
• Box 1 kommer att förflyttas 50 pixlar uppåt "från botten" av den ursprungliga placeringen. Och 20 pixlar åt vänster.
• Box 2 kommer att förflyttas 50 pixlar nedåt "från toppen" av den ursprungliga placeringen. Och 20 pixlar åt höger.
Hoppas det hjälper! 
Aha, fast nu fick jag det att funka genom att fräckt sno Drydens kod i en annan tråd. Mo ha ha ha!
<HTML>
<HEAD>
<STYLE type=text/css>
#box1 {
width:200px;
float:left;
min-height: 110px;
margin-left: 4px;
margin-top: -20px;
}
</STYLE>
</HEAD>
<BODY>
<img src=BILD.gif>
<DIV id=box1>Lägg dig över bilden DÅ!!!</DIV>
</BODY>
</HTML>
Eller kanske inte...
Det funkar om jag kör på mitt lilla exempel ovan. Men när jag lägger in kodsnutten där den egentligen ska vara så trycker DIV:en ner bilden istället för att ligga ovanpå.
*förvirrad*
Nej, alltså du skulle inte byta ut mot min kod... Det var ett exempel...
Vet inte hur hög bilden är men du borde skriva:
POSITION: relative; bottom: (bildens höjd)px;
...sen har du väl en doctype överst på sidan egentligen?
Så här:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type=text/css>
#box1 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; WIDTH: 200px; PADDING-TOP: 10px;
POSITION: relative; bottom: 50px; BACKGROUND-COLOR: #cccc99;
}
</STYLE>
</HEAD>
<BODY>
<img src=bild.gif>
<DIV id=box1>Lägg dig över bilden DÅ!!!</DIV>
</BODY>
</HTML>
Z-index behövs inte (för detta syfte i alla fall)
Justera mina "50px" så att textboxen kommer där du vill ha den.
Du kan byta ut till HTML transitional doctype om du vill:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Har du provat divar med bakgrundsbild i stället. Så här t.ex.:
<html>
<head>
<style type=text/css>
<!--
#box1{
width:200px; /* samma som bilden om inte får du fylla på med placering i background */
padding:10px;
background: #CC9 url(bild.gif) no-repeat;
left:20px;
position:relative;
top:0px;
z-index:10;
height: ?px; /* samma som bilden */
}
-->
</style>
</head>
<body>
<div id=box1>Lägg dig över bilden DÅ!!!</div>
</body>
</html>
img {position:absolute; z-index:1;}
div {position:absolute; z-index:2; width:200px; min-height:110px;}
<img src=moo.gif />
<div>text</div>
?
