Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Brauche Hilfe mit verschachtelten Divs“

Beowulf

Nicht mehr ganz neu hier

Ich habe ein Problem mit verschachtelten Divs und weiß nicht mehr, wie ich das Ganze hinbekommen soll. Ich möchte ein Div bauen, dass drei weitere Divs enthält. Also quasi als Pseudocode erklärt:

<div id="rahmen">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>

Da die Höhe von "box2" und "box3" unterschiedlich sein kann, die jeweils höhere Box aber die gesamte Höhe von "rahmen" bestimmen soll, klappt es nicht mit einer absoluten positionierung von "box1","box2" und "box3". Soweit ich mir das denke, müssen alle Boxen, also auch "rahmen", relativ positioniert werden. Ist das soweit richtig gedacht? :?:

Was das Ganze noch etwas komplizierter macht (zumindestens für mich), ist die Tatsache, dass "box1","box2" und "box3" nebeneinander dargestellt werden müssen (also float:left :?: ).

Mein bisheriger Code haut da leider nicht hin, zumal ich nicht weiß, was ich genau falsch mache:

Code:
#content {
    position:relative;
    margin-top:25px;
    background-color:#eeefed;
    border:2px solid;
    border-color:#a4ca9b;
    clear:left;
}

#content_left {
    position:relative;
    width:137px;
    height:200px;
    margin-right:0px;
    margin-top:0px;
    float:left;
    display:inline;
}

#content_center {
    position:relative;
    padding-left:25px;
    padding-right:100px;
    width:700px;
    float:left;
}

#content_right {
    position:relative;
    width:137px;
    margin-right:0px;
    margin-top:0px;
    float:left;
}
HTML:
<div id="content">
<!--linker Hauptbereich-->
        <div id="content_left">
            <img src="">
           </div>
<!--mittlerer Hauptbereich-->
        <div id="content_center">
            <h3>TEXTBOX MITTE</h3>
            <br>
            TEXT
        </div>
<!--rechter Hauptbereich-->
        <div id="content_right">
            <h3>TEXTBOX RECHTS</h3>
            <br>
            TEXT
        </div>
    </div>
"box1" und "box3" haben eine feste Breite, "box1" sogar eine feste Höhe, daher macht "box1" mir auch am wenigsten Probleme. Wie aber bekomme ich es hin, dass die Breite von "box2" (die mittlere box, die momentan eine feste Breite von 700 px enthält) dynamisch bestimmt wird? :?:

Was mich zudem verwirrt ist die Tatsache, dass der Rahmen, den ich im CSS in #content definiert habe nur oben angezeigt wird.

Ich wäre Euch für Eure Hilfe mal wieder sehr dankbar.
 
K

kyle66

Guest

Hallo,

damit er Rahmen um die inneren Divs rumgeht brauchts du noch ein

Code:
.clear {
	clear: both;
}

bzw.

HTML:
<div id="content">
<!--linker Hauptbereich-->
    <div id="content_left">
        <img src="">
       </div>
<!--mittlerer Hauptbereich-->
    <div id="content_center">
        <h3>TEXTBOX MITTE</h3>
        <br>
        TEXT
    </div>
<!--rechter Hauptbereich-->
    <div id="content_right">
        <h3>TEXTBOX RECHTS</h3>
        <br>
        TEXT
    </div>
    <div class="clear"></div>
</div>

Durch die Floatenden Divs merkt das Parent-Div nicht, wie hoch es eigentlich werden sollte.

Wie du dann aber noch der mittleren Box eine Dynamische Breite mitgeben kannst, weiß ich nicht. Evtl. kannst du bei der mittleren Box die Breitenangabe weglassen und links und rechts einen margin mit der Breite der anderen Boxen mitgeben. Dann musst du aber die linke und rechte Box absolut positionieren, und somit funktioniert die dynamische Höhe nicht mehr

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Unbenannt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#content {
    margin-top:25px;
    background-color:#eeefed;
    border:2px solid;
    border-color:#a4ca9b;
    clear:left;
    position: relative;
    min-width: 400px;
}

#content_center {
    margin-left: 137px;
    margin-right: 137px;
    padding-left:25px;
    padding-right:100px;
    background: #f00;
}

#content_left {
    width:137px;
    height:200px;
    position: absolute;
    top: 19px;
    right: 0px;
    background: #f0f;
}

#content_right {
    position: absolute;
    width:137px;
    margin-right:0px;
    margin-top:0px;
    top: 19px;
    left: 0px;
}
.clear {
    clear: both;
}
</style>
</head>

<body>
<div id="content">
<!--mittlerer Hauptbereich-->
    <div id="content_center">
        <h3>TEXTBOX MITTE</h3>
        <br>
        TEXT
    </div>
<!--linker Hauptbereich-->
    <div id="content_left">
        <h3>Links</h3>
        <img src="">
       </div>
<!--rechter Hauptbereich-->
    <div id="content_right">
        <h3>TEXTBOX RECHTS</h3>
        <br>
        TEXT
    </div>
    <div class="clear"></div>
</div>


</body>
</html>

Hallo nochmal,

was natürlich auch geht ist, das rechte Div nach rechts floaten zu lassen:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Unbenannt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#content {
    margin-top:25px;
    background-color:#eeefed;
    border:2px solid;
    border-color:#a4ca9b;
    clear:left;
    position: relative;
    min-width: 400px;
}

#content_left {
    width:137px;
    height:200px;
    float: left;
    background: #f0f;
}

#content_center {
    padding-left:25px;
    padding-right:100px;
    background: #f00;
    float: left;
}

#content_right {
    width:137px;
    margin-right:0px;
    margin-top:0px;
    float: right;
    background: #0f0;
}
.clear {
    clear: both;
}
</style>
</head>

<body>
<div id="content">
<!--linker Hauptbereich-->
    <div id="content_left">
        <h3>Links</h3>
        <img src="">
       </div>
<!--mittlerer Hauptbereich-->
    <div id="content_center">
        <h3>TEXTBOX MITTE</h3>
        <br>
        TEXT
    </div>
<!--rechter Hauptbereich-->
    <div id="content_right">
        <h3>TEXTBOX RECHTS</h3>
        <br>
        TEXT
    </div>
    <div class="clear"></div>
</div>


</body>
</html>

Das mittlere wird dann einfach immer Breite, je mehr Text drin steht. evtl. musst du dem mittleren Div noch ein max-width mitgeben. Das kann dann aber der IE6 nicht.

Beste Grüße
Kyle
 
Zuletzt bearbeitet von einem Moderator:

Beowulf

Nicht mehr ganz neu hier

AW: Brauche Hilfe mit verschachtelten Divs

Wie kann ich das mit dem max-width denn im IE6 oder allgemein für IE regeln? Würde es klappen, wenn ich dem umgebenen Div (content) eine feste Breite geben würde?
 

dosonaro

Aktives Mitglied

AW: Brauche Hilfe mit verschachtelten Divs

am einfachsten ist es du gibst dem body eine feste breite gibst den ganz linken div nen float:left, dem rechts daneben nen float:right und dem letzen rechts auch nen float:right. fertig ;)
 

Beowulf

Nicht mehr ganz neu hier

AW: Brauche Hilfe mit verschachtelten Divs

Leider geht das so nicht, weil das Design etwas anderes vorsieht. Es muss schon so in sich geschachtelt werden zumal die Seite als Template für CMS dienen soll.
 

jackprince

xHTML & CSS Junkie

AW: Brauche Hilfe mit verschachtelten Divs

Hast du mal überlegt ob du den Content für den rechten Bereich in den eigentlich Inhalt packst? Dort rechts floaten. Ist der Rechte Bereich da,
so nimmt er sich sozusagen den Platz den er braucht ist er nicht da hast
du je nach cms maximal ein leeres div oder so mit einem "&nbsp;".
 

jackprince

xHTML & CSS Junkie

AW: Brauche Hilfe mit verschachtelten Divs

Je grauer die fläche desto weiter verschachtelt.
Als PseudoCode (stern gibt ebene an)

------------------------------
*body
**div id="wrapper"
*** div id="left"
*** div id="content"
**** div id="right"
*** span class="clearspan"
------------------------------

left und right werden eben jeweils gefloatet in die richtung die schon die
ID vermuten lässt. Content ebenfalls nach links, damit es sich es neben dem linken div gemütlich macht.

Das div id right wird rechts gefloatet im content. Dadurch kann ich
dem content eine feste breite geben (eben immer der bereich der übrig
ist von dem was nicht durch left besetzt ist).

Wenn das ganze mit einem cms umgesetzt wird (z.B. joomla) kann
man eine abfrage ins template machen ob das modul Inhalt trägt.

Hat right Inhalt so wird es angezeigt und wird rechts oben im content
positioniert. P Elemente etc. sollten sich normal vom linken Rand aus ausbreiten solang sie Platz haben und dann nach dem rechte Bereich
wieder den ganzen Platz nutzen.


ICH HAB DAS NICHT GETESTET, war lediglich das erste was mir einfiel.

Sollte ein CMS verwendet werden welches im Template zustandsabfragen erlaubt und davon abhängig bestimmte codeteile einfügt oder nicht,
sollte es eventuell noch einfach gehen.

Für Contentbereich zwei id's im css vorbereiten (einmal breite abzüglich rechtem Bereich und einmal breite komplett).

Nun für den contenbereich sowas wie <div id="content{hier abfrage}">

Bei hier abfrage wird eben das oben genannte abgefragt (rechts da oder nicht) und gibt dann notfalls nur eine Zahl aus 0 oder 1.

Im css/quellcode steht dann eben content0 oder content1 als id.


Einigermaßen verständlich was ich meine?
 

Top_Gun

Aktives Mitglied

AW: Brauche Hilfe mit verschachtelten Divs

für den Content brauchst du kein float:left

und warum soll right mit in den content bereich?
 

jackprince

xHTML & CSS Junkie

AW: Brauche Hilfe mit verschachtelten Divs

@topgun

so wie ich seine bitte verstanden habe ist mein letzer beitrag eine gute Lösung.
Warum das right im Content steht ist im Beitrag erörtert.
 

Top_Gun

Aktives Mitglied

AW: Brauche Hilfe mit verschachtelten Divs

Warum das right im Content steht ist im Beitrag erörtert.
Das div id right wird rechts gefloatet im content. Dadurch kann ich
dem content eine feste breite geben (eben immer der bereich der übrig
ist von dem was nicht durch left besetzt ist).
Ähm, content hat dadurch keine feste Breite. Das was übrig ist ist nämlich keine feste Angabe.
Von der Haarspalterei mal abgesehen, muss right nicht im content sein damit content den Rest der Breite einnimmt, oder? Wenn ich left und right ne feste Breite mitgebe und die floate sollte der content in der Mitte doch die restliche Breite einnehmen!?
Oder mache ich da nen Denkfehler?
 

jackprince

xHTML & CSS Junkie

AW: Brauche Hilfe mit verschachtelten Divs

Glaub schon ... da block elemente meines wissens ohne angabe
der größe über die volle Breite gehen bzw. zumindest soviel wie
Platz ist.

Siehe Bild (Bsp. 1)



dazu passend der Beispiel Quelltext ...

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Turnierfotos</title>
<style>
body {
font-size: 10px;
}
 #site{
 padding: 2em;
 width: 98em;;
 height: 30em;
 background-color:#CCC;
 }
 #header {
  height: 5em;
 }
 #center {
 
 }
 #left {
  background-color:#333;
  float:left;
  width: 20em;
    height: 10em;
 }
 #content {
 background-color:#999;
   height: 10em;
 }
 #right {
  background-color:#666;
  float:right;
  width: 20em;
  height: 10em;
 }
</style>
</head>
<body>
 <div id="site">
  <div id="header"></div>
  <div id="center">
   <div id="left">&nbsp;</div>
   <div id="content">&nbsp;</div>
   <div id="right">&nbsp;</div>
  </div>
 </div>
</body>
</html>
Und setze ich die rechte box in den Content, so kann ich sie ebenso
rechts floaten aber der content ist links gefloatet neben dem menü.
Under der Rechte bereich brav drin. :)

Siehe Bild (Bsp. 2)



Dazu der Beispiel Quelltext ... (mann muss nur was im markup ändern)
HTML:
 <div id="site">
  <div id="header"></div>
  <div id="center">
   <div id="left">&nbsp;</div>
   <div id="content">
   <div id="right">&nbsp;</div>
   &nbsp;</div>
  </div>
 </div>
Wo du unzweifelhaft recht hattest, dazu hatte ich dann auch keine einwände gebracht, der content muss nicht gefloatet werden.
Und wo ich dir auch noch recht gebe (falls du das so gemeint hast)
ich muss dem Content nicht zwingen eine Breite geben, da
er sich neben den linken Bereich setzt.
Habe ich aber mal einen recht großen Inhalt (warum auch immer)
kann (wird es glaub ich auch ^_^) es passieren das der content unter left rutscht.

Edith sagt: Der Content benötigt auch wieder ein float sobald
der rechte Bereich nicht im Content liegt, da der rechte Bereich
sich ohne einen gefloateten content nicht auf gleiche Höhe schiebt.
Lass mich hier aber auch gern korrigieren.


Beide Beispiele sind übrigens screenshots direkt aus der browser ansicht.

Auch ein float:left des rechten bereichs hätte übrigens nur den effekt das es statt rechts drunter einfach nur links drunter wäre.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.849
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben