css layout
0 0 0 0 
Detlef G.
css layout
hey leude,
ich hatte mal vor einiger zeit hier gepostet was denn so toll an einem css layout sein soll und warum alle gegen ein tabellen layout sein.
doch nun habe ich mich mal ernsthaft damit befasst.... und siehe da, ich habe mein tabellen-denken abgelegt! es ist doch echt wesentlich einfacher ein layout mit css zu erstellen!
ich muss sagen ich freue mich das ich auf euch gehört habe.^^
doch eine frage stelle ich euch doch noch, und zwar
wenn ich nun eine box habe die den wert "float:left" hat, und nun will ich rechts neben dieser box noch eine box haben, muss diese 2 box auch "float:left" haben? wenn ich das bei der 2 box weglasse sitzt die nicht daneben sondern unter der ersten und nimmt auch keine css-formatierungen an. also habe ich der 2 box "float:left" gegeben, dann klappte das.
und wie bekomme eine 3 box unter die erste box?
hier mal mein code:
<style type="text/css">
div.box1 {
float:left;
width:50px;
height:200px;
background-color:#666600
}
div.box2 {
width:50px;
height:50px;
background-color:#33FF00;
}
div.box3 {
width:100px;
height:50px;
background-color:#cc0055;
}
</style>
</head>
<body>
<div class="box1">
<b> ERSTE BOX ganz links</b>
</div>
<div class="box2">
<b> ZWEITE BOX neben der ersten</b>
</div>
<div class="box3">
<b>DRITTE BOX sollte unter die erste, aber wie? </b>
</div>
danke und ich hoffe mich versteht einer...^^
-
doch nun habe ich mich mal ernsthaft damit befasst.... und siehe da, ich habe mein tabellen-denken abgelegt! es ist doch echt wesentlich einfacher ein layout mit css zu erstellen!
Das ist ein gängiger Irrtum. Sobald er dir bewusst wird, ist es aber bereits zu spät. ;-)
also habe ich der 2 box "float:left" gegeben, dann klappte das.
und wie bekomme eine 3 box unter die erste box?div.box3 { width:100px; height:50px; background-color:#cc0055; [ref:self811;css/eigenschaften/positionierung.htm#clear@title=clear:left]; }Roland
-
hi,
wenn ich nun eine box habe die den wert "float:left" hat, und nun will ich rechts neben dieser box noch eine box haben, muss diese 2 box auch "float:left" haben?
Wenn du ein Element mit float:left ausrichtest heißt das, dass nachfolgende Elemente rechts um dieses "herumfliessen" sollen.
wenn ich das bei der 2 box weglasse sitzt die nicht daneben sondern unter der ersten und nimmt auch keine css-formatierungen an.
Darunter statt daneben dürfte nur dann passieren, wenn die zweite Box so breit ist, dass sie nicht mehr neben die erste passt.
(Bei der Breitenermittlung ist das Box-Modell zu beachten.)also habe ich der 2 box "float:left" gegeben, dann klappte das.
und wie bekomme eine 3 box unter die erste box?Wenn due zweite Box ebenfalls gefloatet ist, musst du das floating mittels clear wieder aufheben, um den normalen Fluss wieder herzustellen.
Nur würde dass bei deinem derzeitigen Vorgehen ohne weiteres wohl darauf hinauslaufen, dass die dritte Box damit unter den _beiden_ vorhergehenden gefloateten landet.hier mal mein code:
Gib der zweiten und dritten Box mal ein bisschen mehr Breite (oder lasse die width-Angabe ganz weg) - dann siehst du, dass es von der Platzierung her schon ungefähr hinkommt.
Mit den angegebenen Breiten sehe ich nur im Firefox das problem, dass die Boxen anders rutschen - weil der Platz für den Inhalt nicht ansatzweise ausreicht.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Wenn due zweite Box ebenfalls gefloatet ist, musst du das floating mittels clear wieder aufheben, um den normalen Fluss wieder herzustellen.
Nur würde dass bei deinem derzeitigen Vorgehen ohne weiteres wohl darauf hinauslaufen, dass die dritte Box damit unter den _beiden_ vorhergehenden gefloateten landet.Sorry, falsch verstanden: Genau das soll ja passieren.
Dann ist clear, wie auch Orlando schon sagte, natürlich genau das richtige.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi wahsaga,
ich hoffe ich habe das richitg verstanden.
ich wollte nun 4-boxen nebeneinander und dann 2 unter den 4 vieren.
es hat geklappt. musste aber der ersten die unter den vieren soll clear:left und float:left angeben damit wiederum die nächste sich links anschließt. ist das richtig?
man hoffentlich weiss einer was ich meine^^
hier mal der code:<style type="text/css"> div#box1 { float:left; width:100px; height:200px; background-color:#666600 } div#box2 { width:100px; height:200px; background-color:#33FF00; overflow:auto; margin-left:10px; float:left; } div#box3 { width:100px; height:200px; background-color:#33FF00; overflow:auto; margin-left:10px; float:left; } div#box4 { width:100px; height:200px; background-color:#33FF00; margin-left:10px; overflow:auto } div#box5 { width:100px; height:200px; background-color:#33FF00; overflow:auto; clear:left; float:left; } div#box6 { width:100px; height:200px; background-color:#33FF00; overflow:auto; margin-left:10px; } </style> </head> <body> <div id="box1"> <b> ERSTE BOX ganz links</b> </div> <div id="box2"> <b>2 box neben der 1</b> </div> <div id="box3"> <b> 3 box neben der 2</b> </div> <div id="box4"> <b> 4 box neben der 3 </b> </div> <div id="box5"> <b> 5 box ich sitze unter der 1 </b> </div> <div id="box6"> <b> 6 box ich sitze unter der 2 </b> </div>also, wenn ich den fluss nun unterbrechen will gebe ich der box- clear:left mit auf dem weg aber auch float:left damit sich die
nächsten boxen links halten? habe ich das richtig verstanden?ich glaube jetzt versteht keiner mehr was...^^
-
hi,
also, wenn ich den fluss nun unterbrechen will gebe ich der box- clear:left mit auf dem weg aber auch float:left damit sich die
nächsten boxen links halten?Wenn du dieses Ergebnis erzielen willst, kannst du das so machen, ja.
ich glaube jetzt versteht keiner mehr was...^^
Och, warte nur, bis du floats verschachtelst, und dann per clear nur das floating auf einer bestimmtenen "Ebene" darin wieder aufheben willst - dann darfst du dich mit Sachen wie "Block Formatting Contexts" und noch mehr lustigen Browserfehlern auseinandersetzen ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
danke für die ermutigung^^
schönen abend noch!
-
-
-
-
-
Hi,
ich hatte mal vor einiger zeit hier gepostet was denn so toll an einem css layout sein soll und warum alle gegen ein tabellen layout sein.
doch nun habe ich mich mal ernsthaft damit befasst.... und siehe da, ich habe mein tabellen-denken abgelegt! es ist doch echt wesentlich einfacher ein layout mit css zu erstellen!
ich muss sagen ich freue mich das ich auf euch gehört habe.^^vielleicht fühle ich mich einfach nur gebauchpinselt[1], aber ich finde, dies sollte man Für die Nachwelt festhalten. Möge es anderen ein Vorbild sein :-)
Cheatah
[1] Ob ich nun daran beteiligt war oder nicht :-)
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi cheatah
[1] Ob ich nun daran beteiligt war oder nicht :-)
ja das hast du!^^
-
Man sollte in der CSS Spezifikation etwas vorsehen, dass man
beim Einbinden eines Stylesheets so etwas wie eine Kaufurkunde beim Fernseher-Kauf ausgestellt bekommt..."Herzlichen Glückwunsch, dass Sie sich für das Layout mit CSS entschieden haben! Sie werden viel Freude mit Ihrer neuen CSS-Seite haben..."
Hätte doch einen tollen psychologischen Effekt *gg*
-
-
Hallo rubberdoc
wenn ich nun eine box habe die den wert "float:left" hat, und nun will ich rechts neben dieser box noch eine box haben, ...
Um selbst das grundsätzliche Verhalten gefloateter Bereiche zu kapieren, habe ich mir mal ein paar einfache Seiten gemacht.
Float Left Test
Divs mit festen Breiten und float
Divs mit prozentualen Breiten und floatSchau sie dir an (möglichst in verschiedenen Browsern) und ändere dabei die Schriftgröße und die Browserfensterbreite.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!