✔ div innerhhalb div innerhalb div

campari · 8. Juli 2006

Moin,

hab hier mehrere divs, die ineinander geschachtelt sind, und die mich in den Wahnsinn treiben.
Die divs in 'main' hauen mal links, mal rechts weg, je nachdem welche clear gegen float ich dazwischen setze. Main soll variabel nach rechts ausfüllen, deshalb die Prozentangaben.
Hier ist ein Pic, wies in meiner Vorstellung aussieht:
http://atomlol.at.funpic.de/pic/divb.png

Code:

#koerper {
width: 98%;
position: absolute;
top: 100px;
left: 10px;
}
#menue{
float: left;
width: 160px;
}
#main{
margin-left: 170px;
width: 98%;
}
#obenl{
float: left;
width: 65%;
}
#obenr{
float: right;
width: 30%;
}
#clr{
clear: right;
}
#balken{
float: left;
width:98%;
}
#ziel{
width: 98%;
}
#cl {
clear: left;
}
#foot {
width: 99%;
}

HTML:

<div id="kopf">kopf</div>
<div id="koerper">
	<div id="menue">menue</div>
	<div id="main">
		<div id="obenl">links</div>
		<div id="obenr">rechts</div>
		<div id="clr"></div>
		<div id="balken">balken</div>
		<div is="ziel">ziel</div>
	</div>
</div>
<div id="cl"></div>
<div id="foot">footer</div>

Wäre über einen Hinweis sehr dankbar!

Grüsse
campari

Maik · 8. Juli 2006

Probier es doch mal so:

Code:

#koerper {
width: 98%;
position: absolute;
top: 100px;
left: 10px;
}
#menue{
float: left;
width: 160px;
}
#main{
margin-left: 170px;
width: 98%;
}
#obenl{
float: left;
width: 65%;
}
#obenr{
float: right;
width: 30%;
}
#clb{
clear: both;
}
#balken{
float: left;
width:98%;
}
#ziel{
width: 98%;
}
#cl {
clear: left;
}
#foot {
width: 99%;
}

HTML:

<div id="koerper">
     <div id="kopf">kopf</div>
     <div id="menue">menue</div>
     <div id="main">
          <div id="obenl">links</div>
          <div id="obenr">rechts</div>
          <div id="clb"></div>
          <div id="balken">balken</div>
          <div id="ziel">ziel</div>
     </div>
     <div id="cl"></div>
     <div id="foot">footer</div>
</div>

campari · 8. Juli 2006

Ne, clb lässt jetzt 'balken' und 'ziel' nach unten hauen, innerhalb von 'main' aber in der Höhe unterhalb von 'menue'.

Maik · 8. Juli 2006

Hab noch etwas am CSS-Code gefeilt:

Code:

#koerper {
width: 98%;
position: absolute;
top: 100px;
left: 10px;
border: 1px solid #000;
}

#kopf {
background: #BE1D1D;
margin: 1%;
}

#menue{
float: left;
width: 160px;
background: #1D28BE;
margin-left: 1%;
}

* html #menue { /* Für IE */
margin-left: 0.5%;
}

#main{
margin-left: 190px;
}

#obenl{
float: left;
width: 65%;
background: #F6C312;
margin-bottom: 1%;
}

* html #obenl { /* Für IE */
margin-bottom: 0.5%;
}

#obenr{
float: right;
width: 30%;
margin-right: 1%;
margin-bottom: 1%;
background: #E8CF78;
}

* html #obenr { /* Für IE */
margin-right: 0.5%;
margin-bottom: 0.5%;
}

#balken{
clear: both;
background: #A06818;
margin-right: 1%;
}

#ziel{
background: #A06818;
margin-right: 1%;
margin-top: 1%;
}

#foot {
clear: left;
background: #35A018;
margin: 1%;
}

Und hier der vollständige Quelltext meiner Testseite:

(Testumgebung: Win2k, FF 1.5.0.4, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#koerper {
width: 98%;
position: absolute;
top: 100px;
left: 10px;
border: 1px solid #000;
}

#kopf {
background: #BE1D1D;
margin: 1%;
}

#menue{
float: left;
width: 160px;
background: #1D28BE;
margin-left: 1%;
}

* html #menue { /* Für IE */
margin-left: 0.5%;
}

#main{
margin-left: 190px;
}

#obenl{
float: left;
width: 65%;
background: #F6C312;
margin-bottom: 1%;
}

* html #obenl { /* Für IE */
margin-bottom: 0.5%;
}

#obenr{
float: right;
width: 30%;
margin-right: 1%;
margin-bottom: 1%;
background: #E8CF78;
}

* html #obenr { /* Für IE */
margin-right: 0.5%;
margin-bottom: 0.5%;
}

#balken{
clear: both;
background: #A06818;
margin-right: 1%;
}

#ziel{
background: #A06818;
margin-right: 1%;
margin-top: 1%;
}

#foot {
clear: left;
background: #35A018;
margin: 1%;
}
-->
</style>

</head>
<body>

<div id="koerper">
     <div id="kopf">kopf</div>

     <div id="menue">menue</div>

     <div id="main">
          <div id="obenl">links</div>
          <div id="obenr">rechts</div>

          <div id="balken">balken</div>
          <div id="ziel">ziel</div>
     </div>

     <div id="foot">footer</div>
</div>

</body>
</html>

campari · 8. Juli 2006

Wemman menue ausfüllt, rutscht 'balken' unterhalb der höhe von dem menue-Abschluss

HTML:

<div id="menue"><br>menue<brmenue<br>menue<br>menue<br>menue<br>menue<br>menue<br></div>

so: http://atomlol.at.funpic.de/pic/divs.html

Maik · 8. Juli 2006

Sorry, das hab ich vorhin übersehen bzw. nicht beachtet und überprüft.

Hier die "Final"-Version:

Code:

#koerper {
width: 98%;
position: absolute;
top: 100px;
left: 10px;
border: 1px solid #000;
}

#kopf {
background: #BE1D1D;
margin: 1%;
}

#menue{
float: left;
width: 160px;
background: #1D28BE;
margin-left: 1%;
}

* html #menue { /* Für IE */
margin-left: 0.5%;
}

#main{
margin-left: 190px;
margin-right: 1%;
}

#obenl{
float: left;
width: 65%;
background: #F6C312;
margin-bottom: 1%;
}

* html #obenl { /* Für IE */
margin-bottom: 0.5%;
}

#obenr{
float: right;
width: 30%;
margin-bottom: 1%;
background: #E8CF78;
}

* html #obenr { /* Für IE */
margin-bottom: 0.5%;
}

#balken{
clear: right;
background: #A06818;
}

#ziel{
background: #A06818;
margin-top: 1%;
}

#foot {
clear: both;
background: #35A018;
margin: 1%;
}

campari · 8. Juli 2006

You are my hero

Noch ne Frage; warum die Anweisung für IE?

michaelsinterface hat gesagt.:
Code:

* html #menue { /* Für IE */ margin-left: 0.5%; }

Grüsse

Maik · 8. Juli 2006

Weil der IE die margin-Werte für floatende Boxen verdoppelt, habe ich sie mit Hilfe des Star-HTML-Hacks halbiert.

✔ div innerhhalb div innerhalb div

campari

Erfahrenes Mitglied

Maik

campari

Erfahrenes Mitglied

Maik

campari

Erfahrenes Mitglied

Maik

campari

Erfahrenes Mitglied

Maik

Neue Beiträge