|
|
 | Boksmoddelen - overlapning
Fra :  Angband  | Vist : 859 gange
150 point
Dato : 13-03-07 13:59 |
| | |
 | 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: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> |
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 13-03-07 22:03 |
| | |
| 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>
| |
| 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.
| |
|
|