8 svar · 500 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>
?
