div verschachtelung

[Corraggiouno]

mein css-code:

#ebene1
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin: 40px;
 padding-right:1px;
 padding-bottom:1px;
 background-color:#add8e6;
 width:900px;
 height: 500px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

#ebene2
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:100px;
 margin-left:10px;
 background-color:#add8e6;
 width:890px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

#ebene3
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:0px;
 margin-left:1px;
 background-color:#add8e6;
 width:100px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

#ebene4
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:0px;
 float:left;
 background-color:#add8e6;
 width:300px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

meine .html-datei:

<div id="ebene1">
     <div id="ebene2">
       <div id="ebene3">
       </div>
       <div id="ebene4">
       </div>
     </div>
   </div>

mein problem ist dabei, das ebene 4 unter der ebene1 angezeigt wird, ich möchte aber das ebene3 und ebene4 nebeneinander sind, und zwar innnerhalb der ebene2
Wie kann ich das realisieren?

 

[matibaski]

Hast du die Padding-Werte in die Breite width einberechnet?
War bei mir auch das Problem, dass es mit padding zu breit war.


MfG; matibaski

 

[Corraggiouno]

hab die padding-werte herausgelassen. habe aber immer noch das gleiche problem, nämlich das der div bereich4 unter dem bereich1 ist, div-bereich4 soll aber neben bereich3 innerhalb des div-bereiches2

 

[matibaski]

Ich kapier deinen Aufbau nicht.
HAst du mir mal nen Link, wo das ist?
Ich kann mir da schlecht irgendetwas vorstellen.

Dein HTML Code stimmt mit deiner Aussage nicht überein.
Laut des HTML Codes ist alles in der Ebene 1.


MfG; matibaski

 

[Corraggiouno]

das ist richtig! ich möchte aber das innerhalb der 2.ebene die 3. und 4. ebene nebeneinander liegen,
im moment ist das so. das die 2.ebene in der ersten und die 3.ebene in der 2. ebene liegt
Ebene 4 liegt unter den ebenen 1 bis 3.

 

[gruenspan]

Wenn Du zwei div's nebeneinander positionieren willst, dann benutze float.

 

[matibaski]

@ gruenspan:
Er hat das im Code schon verwendet.

Nun ist mir der Fehler eben aufgefallen.
Du musst Ebene 3 links floaten, nicht Ebene 4.

Also so:

#ebene3 {
float:left;
}

Wenn das nicht geht, dann mach beim Element 4 ein float:right;


MfG, matibaski

 

[gruenspan]

Sorry, hatte nicht weit genug gescrollt. Er muß beide Elemente links floaten und danach am besten ein <br clear="all" /> setzen.

 

[Corraggiouno]

ok, folgendes geschrieben:

#ebene3
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:0px;
 margin-left:1px;
 float:left;
 background-color:#add8e6;
 width:100px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

wenn ich das mache, dann wird die ebene4 auf ebene3 gesetzt und nicht neben die ebene3,
und wenn ich das schreibe

#ebene4
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:0px;
 float:right;
 background-color:#add8e6;
 width:300px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

dann wird ebene4 außerhalb der ebene1 gesetzt! Was nun? bin irgendwie ratlos?!

 

[gruenspan]

Du mußt beide Container links floaten.

 

[Corraggiouno]

meine css-datei:

#ebene1
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin: 30px;
 padding-right:1px;
 padding-bottom:1px;
 background-color:#add8e6;
 width:900px;
 height: 500px;
 border-style: solid;
 border-width: 1px;
 border-color: white;
}

#ebene2
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:100px;
 margin-left:10px;
 background-color:#add8e6;
 width:890px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

#ebene3
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 float:left;
 background-color:#add8e6;
 width:150px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

#ebene4
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12pt;
 color:red;
 margin-top:0px;
 float:left;
 background-color:#add8e6;
 width:700px;
 height: 400px;
 border-style: solid;
 border-width: 1px;
 border-color: red;
}

 
 ul#Navigation 
{
 margin:0;
 
}

meine html-datei:

<body>
    
   <div id="ebene1">
     <div id="ebene2">
       <div id="ebene3">
             <ul id="Navigation">
              <li><a href="index.html"></a></li>
              <li><a href=".html">r</a></li>
              <li><a href=".html"></a></li>
              <li><a href=".html"></a></li>
             </ul>
       </div>
       <div id="ebene4">
       </div>
     </div>
   </div>
  </body>

wenn ich nun meine navigationsliste anbringen möchte, ist diese sofort in der ebene3 rechts eingerückt, wie kann ich dies unterbinden bzw. wie kann ich die navigationsliste in der ebene3 zentrieren?

 

[matibaski]

Mit margin-left und margin-right, indem du beide auf automatisch setzt ;)


MfG, matibaski