Tabellenlayout ohne <table>
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alten tabellen
ansatz
background
beitrag
container
farbverlauf
hintergrund
inhalt
layout
mache
margin
ollen tabellen
optische eindruck
overflow
quellen
recht
right
spalt
spalten
tabelle
-
Hallo,
ich lese immer wieder, da? man Tabellen (<table>) nicht zum layouten nehmen soll. Kann ich gut nachvollziehen, da HTML ja Inhalt beschreiben soll und nicht das Layout. Daf?r ist CSS da.
Soweit es geht mache ist das auch, aber jetzt stehe ich vor einem Problem.
Ich m?chte ein Layout, vereinfacht so:
+----------+
.|...........|
+----------+
.|.....|.....|
.|.A..|.B.|
.|.....|.....|
+----------+
+----------+
A und B sollen zwei Spalten sein, und sollen die gleiche H?he haben. Die H?he soll sich nach der H?heren Spalte richten. A und B sollen einen Hintergrund mit Farbverlauf und eine Border bekommen. Daher sollen die Container wirklich gleich hoch sein und nicht nur so aussehen. Gibt es da eine einfache M?glichkeit?
_____
Ich habe Beispiele gefunden die mir nichts bringen. Damit diese nicht gepostet werden f?hre ich sie hier kurz auf.
1.) A und B bekommen ein style="padding-bottom:30000px;margin-bottom:-30000px", das ?bergeordnete Element bekommt ein style="overflow:hidden".
Damit w?rde sich zwar das mit dem Hintergrund machen lassen, nicht aber der Rand. Au?erdem gef?llt mir der Ansatz mit der willk?rlichen Pixelzahl nicht.
2.) Nicht A und B bekommen einen Hintergrund, sondern ein Elternelement, das beide beinhaltet. Die Spalten werden dann nur 'aufgemalt'.
Selbes Problem, es l?sst sich kein Rand machen. Au?erdem soll der Farbverlauf von oben wei? nach unten hellgaru sein, was sich mit einem background-repeat:repeat-x machen l?sst. Dieser Ansatz ben?tigt aber ein background-repeat:repeat-y
edit: Grafik ge?ndert, hoffentlich passt es jetzt.
edit2: Ach ja, das mit <div style="display:table"> f?llt auch raus, da die Seite auch im IE betrachtbar sein soll.
Beitrag ge?ndert: 12.10.2006 14:12:36 von noll -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich kapier irgendwie nicht ganz was du meinst, willst du zwei Spalten nebeneinander?
float: left;
float: right;
Hintergrund:
background-image: url(Bild.jpg);
Border:
border: 1px;
Oder erkl?rs mal mit einer richtigen Grafik wie man sie manchmal bei selfhtml findet, oder schau mal hier:
http://de.selfhtml.org/css/layouts/index.htm
Da hab ich CSS gelernt.
Mfg,
Yannik
Beitrag ge?ndert: 12.10.2006 14:53:15 von yanniklein -
ich hab mich lange nichtmehr mit css besch?ftigt aber es gab da einen befehl mit prozenten also dass du dann die linke spalte 50% machst und die rechte halt auch.
musste halt mal wie mein vorschreiber schon geschrieben hast bei selfhtml gucken -
Also ich w?rde ja gerne eine richtige Grafik rein bringen, aber da milton down ist und hier im forum keine Bilder gepostet werden k?nnen wird es schwierig.
Ich poste mal den vereinfachten Code.
<html> <head> <title>table</title> <style> #trailer{ background-color:red; } #left{ float:left; width:60%; background-color:orange; } #right{ margin-left:60%; background-color:yellow; } #footer{ clear:both; background-color:lime; } </style> </head> <body> <div id="trailer">Geht ?ber die gesamte Breite</div> <div id="left">Das ist die linke Spalte<br />Die hat zwei Zeilen</div> <div id="right">Das ist die rechte Spalte, die ist k?rzer, daher ist der div-Container auch k?rzer</div> <div id="footer">Das ist der Abschluss</div> </div> </body> </html>
Soweit so gut.
Nur wie mache ich es, da? die Spalten #left und #right immer gleich lang sind?
Ich kann keine feste H?he eingeben, da der Inhalt aus einem CMS kommen soll.
Vielleicht hat auch jemand ne einfachere L?sung mit TYPO3.
edit: Die Beispiele auf selfhtml kenne ich. Die l?sen das Problem aber auch nicht. Ich m?chte, da? das nachher so aussieht wie mit einer Tabelle, nur eben ohne <table>. Es mu? doch m?glich sein das mit CSS zu machen, wenn nicht mu? ich eben ein <table> nehmen. Mir w?re es nur anders leiber, da das Verwenden von <table> an dieser Stelle aus Layout Gr?nden geschehen w?rde und nicht, um Inhalt mit Tabellencharakter auszugeben.
Beitrag ge?ndert: 12.10.2006 19:54:52 von noll -
"Die so entstehenden Spalten sind allerdings nicht gleich lang. Die Boxen umfassen erst einmal nur den jeweiligen unterschiedlich umfangreichen Inhalt. Es muss festgestellt werden, dass es mit CSS nicht m?glich ist, beide Boxen robust und zuverl?ssig auf die gleiche H?he zu bringen. Es gibt allerdings verschiedene Methoden, mit denen sich derselben optische Eindruck erwecken l?sst. In diesem Punkt greift man tief in die Trickkiste, um das Unm?gliche zumindest scheinbar m?glich zu machen."
Quelle: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#gleich-lange-spalten
damit beide spalten gleich lang sind musst also am besten die ollen tabellen nehmen..oda auf den higru verzichen der einzelnen boxen und die beiden in eine eigene <div></div> ebene packen.. -
Vielen Dank nilswerner, ich hab auch weiter keine L?sung daf?r gefunden. Dann m?ssen eben doch die guten alten Tabellen wieder her. Schade.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage