Hallo Forum,
ich habe ein 2 spaltiges Layout umgesetzt. Hier die Backend-Ansicht:
Bild: dromed.de/backend.jpg
Mein Problem ist, dass die Spalten ja voneinander unabhängi sind, sie sind jeweils einzelne Divs. Nun werden die Inhalte versetzt angezeigt, wenn z.B. Spalte1 kürzer ist als Spalte 2 (siehe hier):
Bild: dromed.de/webansicht.jpg
Schön wäre, wenn "Überschrift 2" neben "weiterer Text 2 unten" anfangen würde:
Bild: dromed.de/webansicht2.jpg
Wie löst ihr so was (Typo3 oder per CSS?) Kann man die Spalten irgendwie aufeinander abstimmen? Oder ein Trenner-Element in Typo3 einbauen?
Wäre schön, wenn jemand einen Tipp geben könnte.
Viele Grüße
Ben
Hi,
das Schlüsselwort ist CSS "clearfix", einfach mal bei einer Suchmaschine eingeben!
Gruß, Daniz
Hi Daniz,
vielen Dank für deinen Tip. Nur wie kann ich so ein clearfix hinter ein Inhaltselement hängen? Ich habe ja die 2 Spalten mit DIVs realisiert.
Oder lässt sich das 2spaltige Layout noch irgendwie anders mit Typo3 realisieren?
Momentan lade ich ja in den einen DIV 1 die Inhalte der Backend Spalte 1 rein und in DIV 2 die der Spalte 2. Im Template sind die Divs ja fest auf der Website platziert. Div 1 links und Div 2 rechts per CSS:position.
Ergänzend dazu vielleicht mal noch der Quellcode. Div inhalt_spalte1 und inhalt_spalte2 sind die DIVs.
CSS:
/* Spalten*/
#inhalt_spalte1 {
width:19em;
border:solid 0px;
padding: 0 1em 0 0;
}
#inhalt_spalte2 {
float:right;
width:19em;
border:solid 0px;
padding: 0 0 0 1em;
}
<div id="menu_innenseite"></div>
<div id="inhalt_spalte2">
<!-- CONTENT ELEMENT, uid:314/textpic [begin] -->
<a id="c314"></a>
<h1>weiterer text</h1>
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-center csc-textpic-below csc-textpic-equalheight">
<div class="csc-textpic-text">
<!-- Text: [begin] -->
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing ata sanctus est Lorem ipsum dolor sit amet. </p>
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Text: [end] -->
</div>
<div class="csc-textpic-imagewrap" style="width:91px;">
<dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:91px;">
<dt><img src="typo3temp/pics/d308df897b.jpg" width="91" height="100" border="0" alt="" /></dt>
</dl>
</div>
</div>
<div class="csc-textpic-clear">
<!-- -->
</div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:314/textpic [end] -->
<!-- CONTENT ELEMENT, uid:316/textpic [begin] -->
<a id="c316"></a>
<h1>weiterer Text 2 unten</h1>
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-center csc-textpic-below csc-textpic-equalheight">
<div class="csc-textpic-text">
<!-- Text: [begin] -->
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Text: [end] -->
</div>
<div class="csc-textpic-imagewrap" style="width:91px;">
<dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:91px;">
<dt><img src="typo3temp/pics/076be70c92.jpg" width="91" height="100" border="0" alt="" /></dt>
</dl>
</div>
</div>
<div class="csc-textpic-clear">
<!-- -->
</div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:316/textpic [end] -->
</div>
<div id="inhalt_spalte1">
<!-- CONTENT ELEMENT, uid:313/text [begin] -->
<a id="c313"></a>
<h1>Überschrift1</h1>
<!-- Text: [begin] -->
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:313/text [end] -->
<!-- CONTENT ELEMENT, uid:315/text [begin] -->
<a id="c315"></a>
<h1>Überschrift 2</h1>
<!-- Text: [begin] -->
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:315/text [end] -->
</div>
</div>
Ich nochmal.
Da mal wieder Termindruck ist, arbeiten wir jetzt mit der Eigenschaft "Vor" und "Nach" von den Content-Elementen bei Typo3. Da können wir die Inhalte pixelgenau aufeinander abstimmen und sowas kann man auch bei einer Schulung erklären.
Viele Grüße
Muss den Thread nochmal wiederbeleben... problematisch wirds mit dem IE 6 und 7 :-(.
Gibt es eine Möglichkeit, einen Trenner im Backend einzufügen, der beide Spalten sozusagen abschneidet und die Inhaltselemente auf einer neuen Höhe anfangen lässt?
Viele Grüße