nicht angemeldet
dreispaltiges Layout
Hallo,
ich brauche ein dreispaltiges Layout, in dem alle drei Spalten die gleiche Länge haben.
Frage in die Runde, ob mein Lösungsansatz ok ist, etwas grundsätzlich dagegen spricht, oder ob es eine bessere Lösung gibt.
<html><head><style type="text/css">
<!--
#spaltencont {
display:table;
background-color: red;
padding:10px;
}
#w { display:table-row;}
#l, #m, #r{
display:table-cell;
vertical-align:top;
}
#l, #r { background-color: green;}
#m { background-color: yellow;}
-->
</style></head>
<body>
<div id="spaltencont">
<div id="w">
<div id="l">links<br><br><br><br>unten</div>
<div id="m">mitte</div>
<div id="r">rechts</div>
</div>
</div>
</body></html>
-
Hi!
Dagegen spricht z.B. der gute alte IE, der table und table-cell nicht kennt. Wenn Dir z.B. egal ist, wie Leute, die z.B. noch den IE 6 verwenden (müssen), die Seite sehen, kannst Du das natürlich so machen. Wie wäre es jedenfalls egel, solange sie die Seite noch halbwegs brauchbar vorgesetzt bekommen.
--
Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
-
der gute alte IE, der table und table-cell nicht kennt. [...] die z.B. noch den IE 6 verwenden
der ie7 kennt table-cell auch nicht
-
-
Hallo,
ich brauche ein dreispaltiges Layout, in dem alle drei Spalten die gleiche Länge haben.
Frage in die Runde, ob mein Lösungsansatz ok ist, etwas grundsätzlich dagegen spricht, oder ob es eine bessere Lösung gibt.du versuchst eine tabelle mit css nachzubauen - der ansatz ist von der denkweise sicher naheliegend aber SEHR unpraktikabel (zumals im ie nicht funktioneren wird)
beschäftige dich mit der eigenschaft "float", damit gehts wesentlich schöner
im übrigen solltest du deinen drei spalten nicht l m und r nennen, mit float-basierenden layouts kannst du die reihenfolge (fast) beliebig verändern - wenn du die linke spalte rechts haben willst oder umgekehrt bzw ganz anders dann ist links/mitte/rechts verwirrend
spalte1, spalte2 und spalte3 sind hingegen viel bessere namen
<div id="container"> <div id="spalte1">1</div> <div id="spalte2">2</div> <div id="spalte3"></div> </div>#container { width: 1000px; } #spalte1, #spalte3, #spalte3 { width: 33%; float: left; /* oder right, dann ist zb die reihenfolge der spalten gespiegelt */ }die gleiche länge der spalten erreichst du mit "faux columns"
-
zumals im ie nicht funktioneren wird)
das ist allerdings ein gewichtiger grund
<div id="container">
<div id="spalte1">1</div>
<div id="spalte2">2</div>
<div id="spalte3"></div>
</div>so hatte ich es bisher gelöst, aber ich wollte gerne gleich lange Spalten
die gleiche länge der spalten erreichst du mit "faux columns"
was sind "faux columns"
-
so hatte ich es bisher gelöst, aber ich wollte gerne gleich lange Spalten
siehe faux colums
die gleiche länge der spalten erreichst du mit "faux columns"
was sind "faux columns"faux ist das französische wort für "falsch" oder "fälschung", columns das englische wort für "spalten", du kannst dir also schon denken was das bewirkt ;)
http://www.alistapart.com/articles/fauxcolumns/
es gibt aber noch andere möglichkeiten, gleich lange spalten zu simulieren - zb breite ränder in der mittleren spalte und die äusseren mit negativem margin über diese drüberschieben - ist aber imo nicht so praktisch
-
http://www.alistapart.com/articles/fauxcolumns/
es gibt aber noch andere möglichkeiten, gleich lange spalten zu simulieren - zb breite ränder in der mittleren spalte und die äusseren mit negativem margin über diese drüberschieben - ist aber imo nicht so praktisch
Hallo!
Schreibt man in diesem Fall aber nicht für eine bestimmte Auflösung?
Gruß, Gobbo-
Hi!
Schreibt man in diesem Fall aber nicht für eine bestimmte Auflösung?
Noe. Warum? Man muss ja nicht px verwenden. Oder was meinst Du?
--
Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
-
Noe. Warum? Man muss ja nicht px verwenden. Oder was meinst Du?
So wie ich die Erklärung auf der verlinkten Seite verstanden habe, handelt es sich ja um ein Hintergrundbild. Und Bilder legen sich doch auf eine Pixelanzahl fest. Folglich müsste ich ja auch die divs an diesem Hintergrund ausrichten, also an dessen Pixelangaben.
Gruß, Gobbo
-
So wie ich die Erklärung auf der verlinkten Seite verstanden habe, handelt es sich ja um ein Hintergrundbild. Und Bilder legen sich doch auf eine Pixelanzahl fest. Folglich müsste ich ja auch die divs an diesem Hintergrund ausrichten, also an dessen Pixelangaben.
wenn du flexible spaltenbreiten hast, kannst du sowieso unmöglich pixelbasierende hintergrundgrafiken nehmen ;)
aber es hindert dich niemand daran, dass du zwei hintergrundbilder nimmst (eins für links, eins für rechts) damit die mittlere spalte flexibel breit sein kann - oder wenns für alle gilt dann halt 6 hintergrundbilder
-
-
-
-
-
-