/ Forside/ Teknologi / Udvikling / CSS / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
CSS
#NavnPoint
molokyle 2854
Klaudi 720
bentjuul 510
smorch 310
Benjamin... 310
e.c 300
EXTERMINA.. 210
stone47 200
danielsko.. 100
10  ME.alexan.. 100
Boksmoddelen - overlapning
Fra : Angband
Vist : 864 gange
150 point
Dato : 13-03-07 13:59

hej har et problem med hensyn til boksmodellen..

se evt. http://www.webdesign101.dk/xhtml/css/hacks/ eller http://www.html.dk/tutorials/css/lektion9.asp

Men har et problem med jeg gerne vil havde nogle bokse til at overlapper hinanden, men de overlapper hinanden forkert.. dvs. at den forkert boks kommer øverst.

Har google'et lidt på problemet og fandt: http://w3schools.com/css/tryit.asp?filename=trycss_zindex2 (http://w3schools.com/css/css_positioning.asp) men kan ikke få det til at virke?

nogen der ved hvordan man gør?

/Angband

 
 
Accepteret svar
Fra : molokyle

Modtaget 150 point
Dato : 13-03-07 21:06

Nu ville det være rart om du kunne komme med et eksempel fra en side, hvor den ønskede 'effekt' illustreres. Jeg har nemlig en smule svært ved at se hvad 'problemet' er?

z-index?

Eks.:

Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="2 Box">
<meta name="keywords" content="2 Box">
<style type="text/css">
body{background:#000;}
.box1{
position:absolute;
left:32px;
top32px;
width:256px;
height:256px;
background:#663366;
color:#fff;
border:solid 1px;
z-index:0;
}
.box2{
position:absolute;
left:128px;
top:128px;
width:256px;
height:256px;
background:#fff;
color:#333333;
border:solid 1px;
z-index:5;
}
</style>
</head>
<body>
<div>
<div class="box1">
Dette er box1.
</div>
<div class="box2">
Dette er box2.
</div>
</div>
</body>
</html>


..og omvendt:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="2 Box">
<meta name="keywords" content="2 Box">
<style type="text/css">
body{background:#000;}
.box1{
position:absolute;
left:32px;
top32px;
width:256px;
height:256px;
background:#663366;
color:#fff;
border:solid 1px;
z-index:5;
}
.box2{
position:absolute;
left:128px;
top:128px;
width:256px;
height:256px;
background:#fff;
color:#333333;
border:solid 1px;
z-index:0;
}
</style>
</head>
<body>
<div>
<div class="box1">
Dette er box1.
</div>
<div class="box2">
Dette er box2.
</div>
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 13-03-07 21:33

Her er farverne måske en smule tydligere?

Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="2 Box">
<meta name="keywords" content="2 Box">
<style type="text/css">
body{background:#000;}
.box1{
position:absolute;
left:32px;
top32px;
width:256px;
height:128px;
background:#663366;
color:#fff;
padding:16px;
border:solid 1px;
z-index:0; /* nederste kasse */
}
.box2{
position:absolute;
left:128px;
top:128px;
width:256px;
height:128px;
background:#9999ff;
color:#333333;
padding:16px;
border:solid 1px #ffff99;
z-index:5; /* øverste kasse */
}
</style>
</head>
<body>
<div>
<div class="box1">
Dette er box1.
</div>
<div class="box2">
Dette er box2.
</div>
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 13-03-07 21:40

Nåeh.. ja, ..og omvendt:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="2 Box">
<meta name="keywords" content="2 Box">
<style type="text/css">
body{background:#000;}
.box1{
position:absolute;
left:32px;
top32px;
width:256px;
height:128px;
background:#663366;
color:#fff;
padding:16px;
border:solid 1px;
z-index:5; /* øverste kasse */
}
.box2{
position:absolute;
left:128px;
top:128px;
width:256px;
height:128px;
background:#9999ff;
color:#333333;
padding:16px;
border:solid 1px #ffff99;
z-index:0; /* nederste kasse */
}
</style>
</head>
<body>
<div>
<div class="box1">
Dette er box1.
</div>
<div class="box2">
Dette er box2.
</div>
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 13-03-07 21:59

w3.org bruger dette eksempel (..lettere redigeret ):
Kode
In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the 'z-index' property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Z-order positioning</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="http://teacherweb.com/images/butterfly.gif" alt="A butterfly image"
style="z-index: 1">

<DIV id="text1" class="pile"
style="z-index: 3">
This text will overlay the butterfly image.
</DIV>

<DIV id="text2">
This text will be beneath everything.
</DIV>

<DIV id="text3" class="pile"
style="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
</BODY>
</HTML>

http://www.w3.org/TR/REC-CSS2/visuren.html

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 13-03-07 22:03
Kommentar
Fra : Angband


Dato : 14-03-07 13:29

tjooh.. ser ganske lovene ud... må have en fejl i min kode et sted, prøver og at poste den snarest muligt, men er desværre på efterskole pt og har ikke min kode med...

Kommentar
Fra : molokyle


Dato : 17-03-07 09:17

Nu er det week-end. Er du hjemme fra skolen nu?

..så vil jeg da gerne 'se' dit problem efter i sømmene

Læg helst en URL, men har du ingen steder at up-loade?..så går det an med kildekoden

</MOLOKYLE>

Kommentar
Fra : Angband


Dato : 20-03-07 18:26

det blev dagligdag igen :D, skal først hjem næste weekend, men det bliver første jeg gør når jeg komer hjem fredag

Godkendelse af svar
Fra : Angband


Dato : 27-03-07 13:08

Tak for svaret molokyle.

Fand ud af at fejlen bare var noget så typisk som at glemme et ";".

Takker

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408928
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste