Positionieren einer DIV-Box
- Ersteller pangu
- Erstellt am
flirtratgeber
Legendäres Mitglied
vorschlag, drunter aucheine divbox setzenund mitverschieben
pangu
Angesehenes Mitglied
ok, aber wie mache ich das?
nehmen wir an ich habe folgende obere box:
CODE .box_oben
{position:absolute;
border: 6px solid #ececec;
left:10px;
top:10px;
width:800px;
background-color:#ffffff;
padding:10px;
text-align: left;
}
-> wie muss ich jetzt die zweite box definieren, dass sie unten anschließt?
nehmen wir an ich habe folgende obere box:
CODE .box_oben
{position:absolute;
border: 6px solid #ececec;
left:10px;
top:10px;
width:800px;
background-color:#ffffff;
padding:10px;
text-align: left;
}
-> wie muss ich jetzt die zweite box definieren, dass sie unten anschließt?
SirRuddy
Mitglied
Ich würde Dir empfehlen mit externe CSS zu arbeiten. Zu Deiner Frage ein Beispiel:
CODE <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Unbenannte Seite</title>
<link href="div_style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body bgcolor="#ffffff">
<div class="my_div_01">Erster DIV</div>
<div class="my_div_02">Zweiter DIV</div>
</body>
</html>
Hau das doch mal in Deinen Editor/Browser. Hier noch das passende CSS (div_style.css)
CODE
.my_div_01 { background-color: #2aff00; border: solid 1px black; outline-color: black }
.my_div_02 { background-color: #f00; border: solid 1px black }
Wie Du sehen kannst sind die beiden DIV-Container untereinander. Über das CSS kannst Du nun alle Parameter angeben. Ich hoffe ich konnte weiterhelfen.
Gruß
SirRuddy
CODE <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Unbenannte Seite</title>
<link href="div_style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body bgcolor="#ffffff">
<div class="my_div_01">Erster DIV</div>
<div class="my_div_02">Zweiter DIV</div>
</body>
</html>
Hau das doch mal in Deinen Editor/Browser. Hier noch das passende CSS (div_style.css)
CODE
.my_div_01 { background-color: #2aff00; border: solid 1px black; outline-color: black }
.my_div_02 { background-color: #f00; border: solid 1px black }
Wie Du sehen kannst sind die beiden DIV-Container untereinander. Über das CSS kannst Du nun alle Parameter angeben. Ich hoffe ich konnte weiterhelfen.
Gruß
SirRuddy
pangu
Angesehenes Mitglied
ok thx. problem bei mir ist aber, dass ich den ersten div an eine bestimmte position setzen möchte, und dann funktioniert dein beispiel nicht mehr:
div_style.css:
CODE
.my_div_01 {
position:absolute;
left:5px;
top:120px;
background-color: #2aff00; border: solid 1px black; outline-color: black
}
.my_div_02 { background-color: #f00; border: solid 1px black }
->der zweite div wird einfach am seitenanfang plaziert, anstattunter den zweiten div..
-> wie bekomme ich den zweiten div in so einen fall unter den ersten?
div_style.css:
CODE
.my_div_01 {
position:absolute;
left:5px;
top:120px;
background-color: #2aff00; border: solid 1px black; outline-color: black
}
.my_div_02 { background-color: #f00; border: solid 1px black }
->der zweite div wird einfach am seitenanfang plaziert, anstattunter den zweiten div..
-> wie bekomme ich den zweiten div in so einen fall unter den ersten?
SirRuddy
Mitglied
Dann versuch es doch mit einem zusätzlichem DIV der die anderen Beiden umschliesst:
CODE [...]
<body bgcolor="#ffffff">
<div class="my_div_00">DIV Null
<div class="my_div_01">Erster DIV</div>
<div class="my_div_02">Zweiter DIV</div>
</div>
</body>
[...]
Und das CSS:
CODE
.my_div_00 { background-color: #ffdfaa; width: 300px; height: 300px; border: solid 1pt black }
.my_div_01 { background-color: #2aff00; width: 250px; border: solid 1px black }
.my_div_02 { background-color: #f00; position: absolute; top: 100px; left: 20px; width: 250px; border: solid 1px black }
Besser?!
CODE [...]
<body bgcolor="#ffffff">
<div class="my_div_00">DIV Null
<div class="my_div_01">Erster DIV</div>
<div class="my_div_02">Zweiter DIV</div>
</div>
</body>
[...]
Und das CSS:
CODE
.my_div_00 { background-color: #ffdfaa; width: 300px; height: 300px; border: solid 1pt black }
.my_div_01 { background-color: #2aff00; width: 250px; border: solid 1px black }
.my_div_02 { background-color: #f00; position: absolute; top: 100px; left: 20px; width: 250px; border: solid 1px black }
Besser?!
