Spaltenhöhe
    
 Home • Tabellen • Spalten Textboxen 3 Beispiel 1  Beispiel 2  Quellcode  Grafik

 einheitliche, (optisch) gleiche Spaltenhöhe

Die Höhe von Textspalten in einer Tabelle erscheint gleich. Die Höhe entspricht in der Regel der Höhe der Spalte mit dem größten Inhalt. Bei mehreren, nebeneinander liegenden CSS-formatierten Absätzen ist das nicht so.

Spaltenlayout 3 - optisch einheitliche Höhen

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

Textboxen mit CSS 01    Textboxen mit CSS 02   Container Text + Bild


Nach den Regeln für das Bildschirmlesen sollten die Textzeilen etwa 137 Zeichen lang sein! Daraus resultiert, dass Texte in Spalten aufgeteilt werden müssen. Das lässt sich zwar nicht für jede Seite genauso umsetzen. Wenn Sie sich aber dazu entschließen, haben Sie unterschiedliche Lösungsmöglichkeiten.

Damit ein CSS-formatiertes Layout auch optisch stimmt, müssen Sie manchmal in die Trickkiste greifen.


Das Ziel sind Textspalten, ähnlich dem Layout einer Tageszeitung / Magazins.

Die einfachste Lösung wäre eine Darstellung in Spalten einer Tabelle. Die Höhe dieser Spalten sollte grundsätzlich gleich hoch angezeigt werden.

Die Spalten (Tabellenzellen) könnten unterschiedliche Hintergrundfarben haben.
    
Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Iuvaret scaevola tractatos te vim, ludus quodsi ex cum. Ex efficiendi dea suscipiantur mei duat. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Iuvaret scaevola tractatos te vim, ludus quodsi ex cum. Ex efficiendi dea suscipiantur mei duat.



   Lösung mit CSS

Möchte man das mit CSS umsetzen, stößt man schnell an seine Grenzen. Das beweist, CSS hat noch nicht die wirklich einfache Lösung für jedes Layout und auf Tabellen kann man offenbar nicht verzichten. Es ist zwar möglich, lässt sich aber nicht ohne Tricks umsetzen. Liegen 2 Absätze nebeneinander hat man mit CSS (nicht wirklich) eine Möglichkeit, den zwei Elementen eine identische Höhe zuzuordnen.

Ich meine hier nicht eine fest zugeordnete, für beide Container gleiche Höhe. Denn eigentlich möchte ich, abhängig vom längsten Absatz, auch die Höhe eines anderen Absatzes bestimmen ... zumindest rein optisch.

... und mit identischer Darstellung in den Browsern!


a  Seitenbereiche / Textcontainer mit CSS

Ohne Extra-Aufwand, werden bei nebeneinander angeordneten Seitenbereichen die 'Textspalten' in etwa so angezeigt, wenn man den Hintergrund einfärbt:

Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Et iuvaret voluptua similique vim, vel ne fugit oporteat molestiae, tritani cotidieque vis ut.

Ea quo brute nihil, oportere dignissim qui no, vis primis nonummy placerat ne. No vel facete meliore, mel feugiat nostrum ne, everti impedit eu quo. Quo quas appetere eu, te praesent mediocrem efficiendi sea, mel labitur feugait in. Magna disputationi eos in, aperiri epicurei verterem ad his. Iuvaret scaevola tractatos te vim, ludus quodsi ex cum. Ex efficiendi suscipiantur mei.

In putent tibique per, iusto lobortis te sea, no mucius adipisci expetendis sea. Usu eu iusto maiestatis posidonium. Stet intellegam his ei, has ut omnium dignissim gloriatur. Pri ne puto vituperata.



Eine unbefriedigende Lösung wenn man Hintergrundfarben wünscht, ... da hilft nur Mogeln!


b  Seitenbereiche / Textcontainer mit CSS

Um mit CSS den Eindruck gleichhoher Spalten in einem mehrspaltigen Layout zu erzeugen, kann man zum Beispiel eine Hintergrundgrafik verwenden, die dem alles umfassenden DIV zugeordnet wird. Die Hintergrundgrafik kann (wie hier) unterschiedliche Farbbereiche haben. Die Hintergrundfarben der Spalten werden als transparent deklariert.


<div id="alles"> mit Hintergrundgrafik

Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Et iuvaret voluptua similique vim, vel ne fugit oporteat molestiae, tritani cotidieque vis ut.

Ea quo brute nihil, oportere dignissim qui no, vis primis nonummy placerat ne. No vel facete meliore, mel feugiat nostrum ne, everti impedit eu quo. Quo quas appetere eu, te praesent mediocrem efficiendi sea, mel labitur feugait in. Magna disputationi eos in, aperiri epicurei verterem ad his. Iuvaret scaevola tractatos te vim, ludus quodsi ex cum. Ex efficiendi suscipiantur mei.

In putent tibique per, iusto lobortis te sea, no mucius adipisci expetendis sea. Usu eu iusto maiestatis posidonium. Stet intellegam his ei, has ut omnium dignissim gloriatur. Pri ne puto vituperata.

</div alles>


Wenn Sie den dazu notwendigen Aufwand (in der Quelltextdatei) betrachten und berücksichtigen, dass jedesmal eine passende Hintergrundgrafik hergestellt werden muss wird klar, dass CSS hier noch nicht ausgereift ist. Flexibel bleibt man hierbei nicht.

Quelltext   Demo 01   Demo 02   Download der Grafik


Eine Lösung ohne Hintergrundgrafik bietet auch: Textboxen mit CSS 02



  Fixe Höhen?

Es bliebe natürlich die Möglichkeit, den Textbereichen mit CSS identische, feste Höhenangaben zuzuordnen. Fixe Höhen wären nicht immer eine Lösung:

  • Mancher Browser mag die Schrift trotz CSS-Formatierung in unvorhergesehener Größe anzeigen wenn z.B. die eingetragene Schrift auf dem Rechner nicht zur Verfügung steht
  • oder dann, wenn die Schriftgröße wegen barrierefreiem Design frei wählbar ist
Schon ist Ihr Layout 'kaputt' und der Text würde über den fixen Höhenbereich hinausragen. Eine feste Höhenbstimmung ist also nicht unbedingt das, was man möchte.

Trotzdem zeige ich hier die Möglichkeiten auf:

1) Lösung durch Styleangaben im <td>-Tag 

<td style="height:300px"> ...
2) Lösung durch Höhenangabe im <td>-Tag 

<td height="300"> ...
Ältere Browser ignorierten diese Höhenangaben für Tabellenzellen!

3) Lösung durch ein transparentes Image

Verwenden Sie ein transparentes Image um die Mindesthöhe zu erzwingen!

Notieren Sie ein transparentes Image gleich zu Anfang in die Tabellenzelle und setzen das Attribut für dieses Image auf align="right". 

<td><img align="right" height="300" src="blank.gif" ...
Hinter diesem Image-Tag darf dann kein Zeilenumbruch ( <br> )stehen !

Zur Anschauung habe ich unten dieses Image farbig eingetragen.




   Demo erzwungene Mindesthöhe

... durch eingebundene Grafiken. Das war das Non Plus Ultra in der Zeit, als das Attribut 'height' in <td>-Tags uneinheitlich interpretiert wurde.

Spalte 2

Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen. denn nachschlagen Nachteil doch nachsehen können entweder-oder nähern die jedoch raten Geschwindigkeit nicht nur-sondern auch reden (übertragene oder rufen Bit sondern schaden pro sowie schmecken Sekunde) sowohl-als auch schreiben und statt schützen die und sprechen Abstrahlung weder-noch studieren störender

Spalte 1

Aktivitäten seit aufhören in so dass aufregen Deutschland sobald beantworten inzwischen sofern begegnen bis solange beginnen auf so oft bemühen wenige statt dass berichten Ausnahmen um beschäftigen eingestellt während bestehen haben weil bestehen und wenn bestehen erwähnt wenn auch betreten in wenngleich bewerben diesem wie bitten Zusammenhang wie wenn danken die wiewohl danken unerlaubt wobei denken hohen wohingegen denken Funkabstrahlungen zumal dienen (Störfeldstärken). diskutieren Inzwischen aber einfallen wird allein einladen PLC als entscheiden zunehmend anstatt entschließen kritisch ausser entschuldigen gesehen, beziehungsweise erfahren da denn erinnern die doch erkundigen enorme entweder-oder erzählen Abstrahlung jedoch erwarten Funk nicht nur-sondern auch fehlen per oder folgen Kurzwelle sondern fragen praktisch sowie freuen unmöglich sowohl-als auch freuen macht.



Transparentes Image, Größe 1x1 Pixel (vergrößert) zum Download:  

rechtsklicken und speichern als 'blank.gif'