nicht angemeldet
Tabellenstruktur mit CSS
Hallo,
ich bin gerade dabei meine Seiten auf XHTML umzustellen. Dabei stieß ich nun jedoch auf ein Problem, auf das mir keine Lösung einfällt.
Folgendes will ich machen:
Ich habe eine Grafik, die linksbündig erscheinen soll. Rechts von der Grafik sollen zwei Tabellenspalten hinkommen. In der ersten stehen Sachen wie Name, Autor, Produktionsjahr usw. und in der zweiten Spalte sollen dann Sachen wie Max Mustermann, 1999 usw. stehen.
Im Idealfall würde ich die Breite der beiden Spalten auch gerne in Pixeln angeben können.
Unter dem ganzen soll dann normaler Text weitergehen.
Folgende Probleme habe ich:
Egal was ich bisher machte, bockte es mit den zwei Spalten. Das Bild paßte ja prima, doch die beiden Spalten ragen immer zu weit nach unten (sieht man eventuell erst, wenn man da mehr Text einfügt) und bringen dort den normalen Text völlig durcheinander. Auch in der Breite paßt das alles nicht wirklich.
Die Lösung sollte bitte in CSS sein ;)
Danke für jede Hilfe!
Mein bisheriger Code (CSS):
#Bildbereich{
float: left;
width: 200px;
}
#Spalte1{
float: right;
width: 150px;
}
#Spalte2{
float: right;
width: 300px;
}
Code der HTML-Seite:
<div id="Bildbereich">
<img src="" width="100" height="100" border="0" alt="" / >
</div>
<div id="Spalte1">
Name: <br/ >
Produktionsjahr: <br/ >
</div>
<div id="Spalte2">
SelfHTML <br/ >
2000 <br/ >
</div>
NORMALER WEITERER FLIESSTEXT AB HIER
-
Hi,
Ich habe eine Grafik, die linksbündig erscheinen soll. Rechts von der Grafik sollen zwei Tabellenspalten hinkommen. In der ersten stehen Sachen wie Name, Autor, Produktionsjahr usw. und in der zweiten Spalte sollen dann Sachen wie Max Mustermann, 1999 usw. stehen.
Also tabellarische Daten. Dafür bietet sich die Verwendung einer Tabelle an.
Die Lösung sollte bitte in CSS sein ;)
Die Dokumentstruktur gehört ins HTML, nicht ins CSS.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
mit Tabellen wäre das ja kein Problem. Allerdings weiß ich, daß es auch mit CSS irgendwie machbar sein sollte. Das würde auf den einzelnen Seiten auch weniger Platz wegnehmen und übersichtlicher sein (man sieht halt nur wenige DIV-Tags statt dem ganzen TABLE, TR und TD-Krams.
Gibt es wirklich keine reine CSS ohne Tabelle hierfür ?
Danke ;)
-
-
Wenn ich Dich richtig verstanden hab, könnte das die Lösung, bzw. ein Ansatz dazu sein (ich hab die beiden Spalten mal mit borders versehen, damit ich die besser erkenne. Bzegl. der Überlänge der Spalten nach unten wird das an der Menge des Textes liegen der da rein kommt.
#Bildbereich{
float: left;
width: 200px;
}
#Spalte1{
border-width: 1px;
border-style: dotted;
float: right;
width: 150px;
}
#Spalte2{
border-width: 1px;
border-style: solid;
float: right;
width: 300px;
}
#normaltext{
position:absolute;
left:10px; top:200px; width:300px; height:150px;
}----------
<body>
<div id="Bildbereich">
<img src="" width="100" height="100" border="0" alt="" / >
</div><div id="Spalte1">
Name: <br/ >
Produktionsjahr: <br/ >
</div><div id="Spalte2">
SelfHTML <br/ >
2000 <br/ >
</div>
<div id="normaltext">
NORMALER WEITERER FLIESSTEXT AB HIER
</div>
</body>
###############zur Positioniereung findest Du hier gute Beschreibungen: http://www.css4you.de/bottom.html
viele Grüße,
Maz-
Hallo Max,
vielen Dank. Das war super! Wenn ich das noch richtig positioniere paßt es perfekt.
Noch einmal danke für die schnelle und effektive Hilfe!
-