Textboxen Textcontainer Spaltenlayout formatieren mit float CSS HTML Beispiel Download

Spaltenlayout 02 - Textboxen

Home • CSS • Spalten Textboxen 1

Quellcode

Spaltenlayout / Textboxen - Bsp. 1

Die Formatierung von nebeneinander positionierten Seitenelementen mit CSS-Anweisungen in der Absicht, ein Spaltenlayout für Textbereiche / Inhaltsbereiche zu schaffen.

Spaltenlayout 01 - Textboxen

Lesen Sie zum Thema "Textspalten / Container mit CSS" auch die Seiten:

Textboxen mit CSS 02

Textboxen mit CSS 03

Container Text + Bild

Hier sehen Sie 3 mit CSS formatierte und positionierte Textboxen, keine Tabellen!

Die Position jeder einzelnen Box ist am Nachbarelement orientiert und als fließende Darstellung festgelegt durch 'float:left'. Formatierungen für Hintergrundfarbe und Breite wurden in 3 Unterklassen für die Boxen 1 - 3 festgelegt.

Textformatierungen und der Innenabstand (padding) sind in einer eigenen Klasse für die Absätze innerhalb der Boxen festgelegt. Warum? Das erkläre ich

unten

Demo 1 mit identisch langen Textspalten

Box 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Box 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Möchte man unterhalb der Boxen weiteren Inhalt anzeigen, wird es notwendig sein 'um die Ecke' zu codieren. Es muss ein leerer <DIV>-Bereich deklariert werden, der die fließende linke Ausrichtung wieder aufhebt!

<div style="clear:left;"></div>

Alles sieht bei eingefärbtem Hintergrund OK aus, solange die Inhalte nicht extrem unterschiedlich groß sind!

Demo 2 mit unterschiedlich langen Textspalten

Box 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Die wirkliche Höhe der Textboxen ist nur sichtbar, weil der Hintergrund eingefärbt wurde. Manchmal möchte man eine solche Einfärbung, dann ist die ungleiche Höhe störend.

Demo 3 mit unterschiedlich langen Textspalten

Hier schaffe ich eine Alternative durch die Randdarstellung (links und rechts) für den längsten Absatz. Eine zumindest einigermaßen befriedigende Lösung, solange keine unterschiedlichen Hintergrundfarben für die einzelnen Textcontainer gewünscht sind.

Gefällt die Darstellung in der Demo 2 und Demo 3 nicht, muss man anders vorgehen. Eine Lösung bieten diese beiden Techniken

(optisch) einheitlich hohe Textspalten mit CSS + Hintergrundgrafik

(optisch) einheitlich hohe Textspalten mit CSS ohne Hintergrundgrafik

Unterschiedliche Darstellung, Browser-Bug

Würde ich die Padding-Angaben gleich für die Boxen festlegen, gäbe es eine unterschiedliche Darstellung in den Browsern (versionsabhängig):

Grund: FF addiert die Padding-Angaben von 2 X 10 Pixel (je Box) zur Breite hinzu, IE betrachtet die Padding-Angaben als inklusiv der Breite.

Um diesen Bug zu überlisten wurden für die Boxen Padding- und Margin-Angaben auf Null (0) gesetzt. Um trotzdem einen Innenabstand zu ermöglichen, habe ich innerhalb der Boxen noch einmal einen Absatz definiert, für den ich dann Padding-Angaben von 10 Pixel festlegte.

#boxen p{
padding:10px;
margin:0px;
line-height: 100.01%;
color:#000000;
font-family:Verdana,Arial,Helvetica;
font-size: 10px;
}

Ansonsten würde das Ergebnis so aussehen, Screenshot:

CSS-Notierung im HEAD-Bereich

<style type="text/css">
<!--

#boxen {
}

#boxen .box01 {
position:relative;
left:0px;
float:left;
border: none;
width:180px;
padding:0px;
margin:0px;
background: #F1E1FF;
}


#boxen .box02 {
position:relative;
left:0px;
float:left;
border: none;
width:180px;
padding:0px;
margin:0px;
background: #F4F8FF;
}

#boxen .box03 {
position:relative;
left:0px;
float:left;
border: none;
width:180px;
padding:0px;
margin:0px;
background: #FFE6FF;
}


#boxen p{
padding:10px;
margin:0px;
line-height: 100.01%;
color:#000000;
font-family:Verdana,Arial,Helvetica;
font-size: 10px;
}

-->
</style>

Einbindung der Klassen für die Textblöcke

<div id="boxen">

<span class="box01">
<p>Box 1<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
<br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></span>

<span class="box02">
<p>Box 2<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
<br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></span>

<span class="box03">
<p>Box 3<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>
<br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></span>

</div>

<div style="clear:left;"></div>