Tabellen ohne <table>

[Martin]

Moin,
ich hatte den guten Vorsatz gefaßt, zum Layout CSS statt Tabellen zu verwenden. Mir geht es nur darum, zwei Spalten zu erzeugen. Links sollen die Bilder stehen, rechts der Text. Die oberste Zeile des Textes soll mit der Bildoberseite bündig sein -- wie bei einer Tabelle.

Dieses Layout habe ich mit dieser formatierung erreicht:

<p style="margin-left:120px; margin-top:25px; margin-bottom:15px"; padding:0; overflow:visible">
<img ...>
<span style="position:absolute; left: 350px; vertical-align.top; overflow:visible;">
viel Text
</span>
</p>

Dieses Beispiel funktioniert nicht, wenn ich im span margin-left statt position:absolute verwende, oder div statt span, dann erscheint der Text bündig mit der Unterseite des Bildes.
Mein Quelltextschnipsel fnktioniert wie beschrieben, enthält der Absatz aber sehr viel Text, wird er vom nächsten überlagert. overflow:visible hilft da auch nichts. Der "Absatz" liegt dann unter dem Bild, der längere span-Abschnitt wird ignoriert.
Warum?
Wie kann ich obiges Problem ohne Tabelle lösen?

Danke für die Hilfe,
Martin

[Tim Tepaße]

Hallo Martin,

ich hatte den guten Vorsatz gefaßt, zum Layout CSS statt Tabellen zu
verwenden.

Schön. Aber bei diesen speziellen Einsatz würde ich eine Tabelle nicht
als deplaziert empfinden. Denn:

Links sollen die Bilder stehen, rechts der Text.

Ein Text zum Bild? Was spricht dann gegen eine zweispaltige Tabelle?
Linke Spalte Bilder, in der rechten die Erläuterung? Entweder blind,
oder aber mit semantisch wertvollen Spaltenüberschriften.

Wäre wahrscheinlich meine Lösung, obwohl ich CSS-Utopist bin.

<p style="margin-left:120px; margin-top:25px; margin-bottom:15px";
padding:0; overflow:visible">
<img ...>
<span style="position:absolute; left: 350px; vertical-align.top;
overflow:visible;">
viel Text
</span>
</p>

Ähm. Du solltest Dich mal, wenn Du bei einer tabellenlosen Lösung
bleiben willst, mit dem CSS-Element float beschäftigen.

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

Da kann man schöne Dinge machen, siehe mal die zweispaltigen Layouts hier:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

• Tim

[Christian]

Hi,

Wäre wahrscheinlich meine Lösung, obwohl ich CSS-Utopist bin.

Du meintest sicher "CSS-Purist" !!??

:-)

Christian

[Tim Tepaße]

Hallo Christian,

Wäre wahrscheinlich meine Lösung, obwohl ich CSS-Utopist bin.
Du meintest sicher "CSS-Purist" !!??

Auch. Aber ich hoffe immer noch auf ein CSS 3 Utopia. :-)

• Tim

[rainer groth]

Hallo Martin,

ich hatte den guten Vorsatz gefaßt, zum Layout CSS statt Tabellen zu verwenden.

...gute Idee ;-)

Dieses Beispiel funktioniert nicht, wenn ich im span margin-left statt position:absolute verwende, oder div statt span, dann erscheint der Text bündig mit der Unterseite des Bildes.

1. mit CSS-Deklarationen kannst Du BESTEHENDE Darstellungs-Anweisungen ergaenzen und 'ueberschreiben';

2. der HTML-Tag 'div' beinhaltet z.B. bezueglich der Darstellung die Anweisung an den Browser, sowohl davor als auch danach einen Zeilenumbruch zu simulieren - 'span' nicht; http://selfhtml.teamone.de/html/text/bereiche.htm#block und http://selfhtml.teamone.de/html/text/bereiche.htm#inline

3. mit CSS-Deklarationen ist es moeglich, die Positionen und Abstaende von Bereichen zu bestimmen - dies sind allerdings unterschiedliche Dinge !

4. wenn Du mit CSS layouten willst, bist Du gut beraten, die in HTML definierten Darstellungsanweisungen GUT zu kennen (ein einem 'img' folgender Text soll z.B. die Unterlinie der Grafik fortfuehren), und ueber 'Block'- bzw. 'Inline'- Elemente bescheid zu wissen;

5. langer Rede kurzer Sinn: versuche fuer Deine Spalten 'div'-Elemente zu positionieren, in denen Du Deine Inhalte ablegst.

gruesse
rainer groth