2spaltige Tabelle mit Layern umsetzen
Daniel (nun registriert)
2spaltige Tabelle mit Layern umsetzen
Daniel (nun registriert)
Hallo,
es geht um folgende Seite/2spaltige Tabelle:
http://agh653.ag.funpic.de/verticalalign.htm
Der obere Teil wurde per Tabelle umgesetzt und soll nun mit CSS und Layern (<div>...</div>) umgesetzt werden - zu sehen im unteren Teil.
Wie man sieht, ist mein einziges Problem die vertikale Positionierung.
Wie bekomme ich den Text rechts neben dem Bild nach unten, so wie oben bei der Tabellenversion zu sehen?
Gibt es da irgendeinen Trick für, unabhängig von der Schriftgröße etc.?
Schonmal vielen Dank :-)
-
Hallo,
es geht um folgende Seite/2spaltige Tabelle:
http://agh653.ag.funpic.de/verticalalign.htmDer obere Teil wurde per Tabelle umgesetzt und soll nun mit CSS und Layern (<div>...</div>) umgesetzt werden -
Warum soll eine Tabelle in eine DIV-Suppe umgewandelt werden?
Wie bekomme ich den Text rechts neben dem Bild nach unten, so wie oben bei der Tabellenversion zu sehen?
<p><img src="bbild.gif" alt="Bild" /> Dieser Text soll wie der obere ganz unten stehen</p>Aber nur, wenn es sich nicht doch um eine Tabelle handelt, es also mehrere Tabellenzeilen mit Bildern und Beschreibungen gibt. Dann _muss_ da auch eine Tabellenstruktur hin, keine DIV-Suppe. Eine solche Struktur wäre höchstens noch als Liste (UL/LI) von Bildern mit Beschreibung zu sehen. Dann würde das, was bei mir im P-Element steht, im LI-Element stehen.
viele Grüße
Axel
-
Warum soll eine Tabelle in eine DIV-Suppe umgewandelt werden?
Weil ichs total verpeilt habe :
Danke für den Hinweis, dass das auch einfacher geht.Leider hat die ganze Sache einen Haken:
Mit einer Zeile Text funktioniert das ja wunderbar, aber in der endgültigen Seite werde ich leider mehrere Zeilen haben (auch einmal 2 bei denen sich ein erzwungener Zeilenumbruch mit <br /> befindet).
Gibt es denn hierfür eine Lösung?-
Hallo,
Leider hat die ganze Sache einen Haken:
Mit einer Zeile Text funktioniert das ja wunderbar, aber in der endgültigen Seite werde ich leider mehrere Zeilen haben (auch einmal 2 bei denen sich ein erzwungener Zeilenumbruch mit <br /> befindet).
Gibt es denn hierfür eine Lösung?Ist es denn nun eine Tabelle? Gibt es also mehrere Zeilen mit Bildern und Beschreibungen? Wenn ja, dann nimm eine Tabelle.
Sonst:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> p { border:1px solid black; } img { float:left; margin:0; margin-right:.5em; } /*Das folgende auskommentierte CSS setzt das LABEL-Element vertikal auf die Bildgrundlinie, allerdings nicht im Opera*/ /* p { position:relative; overflow:hidden; } label { position:absolute; bottom:0; } */ </style> <!--[if ie]> <style type="text/css"> /*p muss hasLayout triggern: [link:http://www.satzansatz.de/cssd/onhavinglayout.html]*/ p { width:100%; } </style> <![endif]--> </head> <body> <h1>Test</h1> <p><img src="Beispiel.jpg" alt="Bild" id="bild1"><label for="bild1">Das ist der Beschreibende Text zum Bild.<br>Hier können auch mehrere Zeilen Text stehen.<label></p> </body> </html>Das IE-only-CSS ist auch nur nötig, wenn das Label nach unten soll.
Wenn es eine Liste ist, dann wird aus P wieder LI in UL.
viele Grüße
Axel
-
Hallo,
Besser so:
<p><img src="Beispiel.jpg" alt="Bild" id="bild1"><label for="bild1">Das ist der Beschreibende Text zum Bild.<br>Hier können auch mehrere Zeilen Text stehen.</label></p>
viele Grüße Axel-
Veieln Dank für deine Hilfe,
es funktioniert nun alles wie es soll - auch im aktuellen Opera (einfach left:200px beim label hinzugefügt).
Im "aktuellen" Netscape wird leider garnichts angezeigt, aber damit kann ich leben (wenn ntürlich jmd. ne Idee hat, wie sich das ganze fixen lässt, wäre ich daran dennoch sehr interessiert), sofern es hoffentlich in den Linux Browsern funktioniert, die möchte ich ungern ausschließen ;)Begutachten lässt sich das ganze unter
http://agh653.ag.funpic.de/tabalt.htm-
Gibt es also mehrere Zeilen mit Bildern und Beschreibungen? Wenn ja, dann nimm eine Tabelle.
Ja sind es, und irgendwie sind Tabellen da wohl doch besser für geeignet, funktioniert dann auch im Netscape, länger ist es vom Code her auch net wirklich.
Aber warum soll ich erst bei mehreren eine Tabelle nutzen?-
Hallo,
Gibt es also mehrere Zeilen mit Bildern und Beschreibungen? Wenn ja, dann nimm eine Tabelle.
Ja sind es, und irgendwie sind Tabellen da wohl doch besser für geeignet, funktioniert dann auch im Netscape, länger ist es vom Code her auch net wirklich.
Aber warum soll ich erst bei mehreren eine Tabelle nutzen?Weil man eine Tabelle für tabellarische Daten nutzt. Meine Definition von "tabellarische Daten" ist:
Daten, die man eindeutig und logisch in Spalten und Zeilen einteilen kann, hauptsächlich daran zu erkennen, dass man Spalten- und/oder Zeilenbeschriftungen darüber/davor schreiben könnte (nicht muss).
Deine Daten könnte man so:
Bild Beschreibung
Bild1 [Bild] Beschreibung zu Bild 1
Bild2 [Bild] Beschreibung zu Bild 2
...als tabellarische Daten sehen. Bei _einem_ Bild wäre das nicht gegeben.
Da in einer Tabelle Zeilen und Spalten existieren, könnte die Tabellendarstellung auch so aussehen:
------------------------------------------------------
|Bild |Beschreibung
------------------------------------------------------
Bild1 |[Bild] |
| |Beschreibung zu Bild 1
| |weiter mit Beschreibung zu Bild 1
------------------------------------------------------
Bild2 |[Bild] |Beschreibung zu Bild 2
------------------------------------------------------
...Eine andere Interpretation dieser Daten wäre eine Liste von Bildern mit Beschreibungen
1. [Bild] Beschreibung zu Bild 1
2. [Bild] Beschreibung zu Bild 2
...Das wäre dann mit UL(OL)/LI umzusetzen. Dann würde eine mehrzeilige Beschreibung aber so aussehen:
1. [Bild] Beschreibung zu Bild 1
weiter mit Beschreibung zu Bild 12. [Bild] Beschreibung zu Bild 2
...Die Ausrichtung der Beschreibung ist also oben bündig mit dem Listenpunkt.
viele Grüße
Axel
-
-
-
-
-
-