|
|||
Kniffliges Layout mit float
Hallo Zusammen,
ich möchte den gbanner und fuss zusammenlassen aber den Abstand von fuss zu info entfernen, so dass der gbanner neben info ist und zentriert unter dem Inhalt steht. Gibt es da eine Möglichkeit? Siehe Bilder ist_zustand.jpg und soll_zustand.jpg Gruss Roadrunnerle Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>new</title> <style type="text/css"> #container { background-color:#CCCC33; color:#000000; height:1%; } #navigation { background-color:#99FF00; color:#000000; float:left; width:10em; height:300px; } #infobox { background-color:#99FF00; color:#000000; float:right; width:165px; height:600px; } #inhalt { background-color:#00FFFF; color:#000000; margin-left:11em; margin-right:170px; height:1%; } .box { background-color:#9966FF; color:#000000; width:14em; float:left; } #gbanner { background-color:#FF00FF; color:#000000; margin:auto; width:470px; clear:both; } #fusszeile { background-color:#0000FF; color:#FFFFFF; } </style> </head> <body> <div id="container"> <div id="navigation"> menü1 menü1 menü1 menü1 menü1 menü1 menü1</p></div> <div id="infobox">info</div> <div id="inhalt"><h3>Hier kommt eine Überschrift</h3> und möglicherweise auch Inhalte.</p> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> </div> <div id="gbanner">gbanner</div> <div id="fusszeile">fuss</div> </div> </body> </html> |
Sponsored Links |
|
|||
Du bist ungeduldig...
Solange #gbanner nicht floatet wird es nicht neben #info angezeigt werden, sondern darunter. Blockelemente verhalten sich so. Im Prinzip hast Du auch "nur" ein 3-Spalten-Layout. Schau mal in meine Sig, wie man das einfach umsetzen kann. |
|
|||
@mazzo
Danke für deine Antwort und sorry für meine Ungeduld. Ich schau mir mal deine Sig an. Mein Problem war immer, dass wenn ich #gbanner floate, dass der dann nach oben abhaut und nicht an der Fusszeile dran kleben bleibt. Vielleicht finde ich etwas in deiner Sig. Gruß Roadrunnerle. |
|
|||
Du denkst falschrum
Je nachdem wo Du floatest wird das Element dort aus dem Fluss genommen und links oder rechts "gefloatet". Der Rest verläuft dann drumherum. Ein clear hebt das wieder auf. Somit wird die hohe Spalte aus info über den schmalen footer hinausragen, wenn dieser floatet. Evtl. benötigst Du eine Kombination mit "Faux columns" (guck mal damit in die Suche oder in die FAQ des XHTML-wiki, oben verlinkt) damit die Spalte "mitwächst" und das Layout geschlossen wirkt. |
|
|||
@mazzo
folgendes habe ich mal gemacht: - mit dem clearfix erreiche ich, dass der die .box 'en im #inhalt bleiben - mit #klammer + clearfix, dass der gbanner nicht daneben rutscht - fusszeile ganz raus aus dem #container - gbanner rein in den #inhalt "Faux columns" habe ich so verstanden, dass das nur eine Täuschung ist, die floats aber ihre Höhe behalten und nicht ausgedehnt werden. Firefox: immer noch Abstand zwischen info und fuss IE: sieht schon ganz gut aus Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>new</title> <style type="text/css"> #container { color:#000000; height:1%; } #navigation { background-color:#99FF00; color:#000000; float:left; width:10em; } #infobox { background-color:#99FF00; color:#000000; float:right; width:165px; height:600px; } #inhalt { background-color:#00FFFF; color:#000000; margin-left:11em; margin-right:170px; height:1%; } .box { background-color:#9966FF; color:#000000; width:13em; float:left; } #gbanner { background-color:#FF00FF; color:#000000; margin:auto; width:450px; } #fusszeile { background-color:#0000FF; color:#FFFFFF; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ </style> </head> <body> <div id="container"> <div id="navigation"> menü1 menü1 menü1 menü1 menü1 menü1 menü1</p></div> <div id="infobox">info</div> <div id="inhalt" class="clearfix" ><h3>Hier kommt eine Überschrift</h3> und möglicherweise auch Inhalte.</p> <div id="klammer" class="clearfix"> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> <div class="box"> box box box box box box</p></div> </div> <div id="gbanner">gbanner</div> </div> </div> <div id="fusszeile">fuss</div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
joomla template | wrock | CSS | 2 | 06.04.2012 20:24 |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
Webseite für Smartphones Optimieren. | Cybertronic | CSS | 8 | 25.08.2011 12:44 |