Box in eine Box????
- Ersteller milchkuh
- Erstellt am
jump.blueberry
New member
Das ist eigentlich ganz einfach:
CSS:
HTML im Body-tag:
Ich hoffe, das hilft dir!
CSS:
HTML:
<style type="text/css">
#boxAussen{
position: absolute;
top:0px;
left:0px;
width: 500px;
height:500px;
}
#boxInnen{
position: relative;
top:50px;
left:200x;
widht:200px;
height:200px;
}
</style>HTML im Body-tag:
HTML:
<div id="boxAussen">
<div id="boxInnen">Inhalt von boxInnen</div>
</div>Ich hoffe, das hilft dir!
milchkuh
New member
ja vielen Dank aber ich bin jetzt leider noch auf ein Problem gestossen, also wie kann ich dann die äussere box noch zentrieren, also das sie immer in der Mitte des Browserfensters ist...????
Also das ist mein Code bis jezt...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{text-align:center;}
#box1 {
background-image: url(http://robin.snooser.de/test34/jarryotter.jpg);
margin:auto;
width:1000px;
height:1250px;
}
#box2 {
background-color:#00FFFF;
position:relativ;
width:710px;
height:730px;
top:420px;
left:240px;
border:1px solid;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
mfg
robin
Also das ist mein Code bis jezt...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{text-align:center;}
#box1 {
background-image: url(http://robin.snooser.de/test34/jarryotter.jpg);
margin:auto;
width:1000px;
height:1250px;
}
#box2 {
background-color:#00FFFF;
position:relativ;
width:710px;
height:730px;
top:420px;
left:240px;
border:1px solid;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
mfg
robin
jump.blueberry
New member
wenn sie nur horizontal zentriert sein soll, sollte das genügen:
Bitte auch die Verschachtelung beachten. Bei dir liegt box 2 neben/unter box 1 und nicht drin!
Bei horizontaler und vertikaler zentrierung wird etwas komplizierter:
css-ergänzung:
Außerdem heißt es in box2:
position: relative
die zeile "border:" kannst du eigentlich dann löschen, weil du einen rahmen ohne farbe definierst.
HTML:
<div id="box1" align="center">
<div id="box2"></div></div>Bei horizontaler und vertikaler zentrierung wird etwas komplizierter:
css-ergänzung:
HTML:
#box1 {
background-image: url(http://robin.snooser.de/test34/jarryotter.jpg);
margin:auto;
width:1000px;
height:1250px;
margin: -625px 0px 0px -500px;
position:absolute;
top: 50%;
left: 50%;
}Außerdem heißt es in box2:
position: relative
die zeile "border:" kannst du eigentlich dann löschen, weil du einen rahmen ohne farbe definierst.