|
|||
Problem bei Anordnung- footer nach div mit variabler Höhe
Hallo!
Hab wieder mal ein kleines Grundsatzproblem. Ich habe einen Menübalken, einen Container und einen footer. Die ersten beiden div's sind absolut zentriert positioniert. (die absolute Positionierung muss so bleiben, da ich ohne diese Probleme mit dem meinem drop down menü hatte) Die Höhe von "Container" ist variabel. Und genau hier liegt das Problem, denn der footer darunter will sich nicht unter dem div "Container" anordnen. Ich bekomm das nicht hin. Natürlich klappt es wenn ich das div "footer" innerhalb des div's "Container" verwende, aber das ist keine elegante Lösung. Bin über euren Rat sehr dankbar!! Hier das vereinfachte Beispiel: 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"> <head> <style type="text/css"> #menubalken { background-color: green; position: absolute; top: 0px; left: 50%; margin-left: -400px; width: 800px; z-index: 2; height: 80px; } #container { width: 800px; position: absolute; top: 80px; left: 50%; z-index: 1; margin-left: -400px; background-color: #ddf; } #footer{ background-color: red; width: 800px; height: 45px; } </style> </head> <body> <div id="menubalken"> </div> <div id="container"> <p> Zuerst müssen html und body auf eine Höhe von 100% gebracht werden. Dies ist nötig, damit sich nachfolgende Prozent-Angaben an dieser Basis orientieren. Mittels Seite overflow:hidden verhindert man, dass der Browser Scrollbalken darstellt, welche nicht benötigt werden - so würde z.B. der Internet Explorer ausgegraute Scrollbalken darstellen. Sowohl margin als auch padding wurden auf 0 gesetzt, um Innen- und Außenabstände zu entfernen. Für den content_container definiert man beispielsweise eine Höhe von 95% und weist ihm die CSS-Deklaration overflow:auto zu. Theoretisch könnte man auch overflow:scroll einsetzen, dann bieten aber die meisten Browser auch einen (unerwünschten) horizontalen Scrollbalken an. Dem Footer muss nun lediglich noch die verbliebene Höhe zugewiesen werden, in diesem Beispiel sind es 5%. </p> </div> <div id="footer"> </div> </body> </html> Gombi |
Sponsored Links |
|
|||
Das liegt an der absoluten Positionierung.
Vielleicht solltest du lieber versuchen, das Problem mit deinem Dropdown-Menü anders zu lösen. Ich bin mir sicher, dass das auch anders geht. Deine Zentriermethode lässt die Inhalte bei schmalem Viewport unerreichbar nach links verschwinden. Ein weiteres Problem der abs. Pos.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (18.01.2010 um 16:18 Uhr) |
Sponsored Links |
|
|||
Kann sein dass man das auch anders lösen kann. Aber wie?
Hier mal der Link zu meinem Problem mit dem drop down und warum ich absolute Positionierung verwende. [Erledigt] CSS Drop Down Menü und IE Problem - php.de Bin über Hinweise sehr dankbar! LG und Danke für die Antwort! |
|
|||
Dann lies doch mal, was draco88 ganz unten schrieb.
Die Empfehlung des Suckerfish ist ebenfalls sinnvoll. Und lies das: http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
|
|
|||
Ok, ich hab mal ein einfaches Beispiel mit dem Suckerfish Menü versucht.
Das scheint ja gut zu funtionieren, auch ohne absolute positionierung. Aber warum zeigt der Firefox eine Abstand zwischen div "menubalken" und div "container"? Der IE macht das nicht! Und was ich auch nicht verstehe; Warum wird alles schön zentriert im IE obwohl ich kein text-algin: center verwendet habe wie zB. hier beschrieben: Zentrieren mit CSS | XHTML-Akademie Danke! Ich verzweifle noch an den Unterschieden der verschiedenen Browser! Hier das Beispiel: HTML-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"> <head> <style type="text/css"> body { margin: auto; padding: 0px; background: #000000; } html{ margin: 0px; padding: 0px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; } #nav li { float: left; width: 10em; } #nav li ul { position: absolute; width: 10em; left: -999em; background-color: white; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #menubalken { background-color: green; width: 800px; z-index: 2; height: 30px; margin: auto; } #container { width: 800px; z-index: 1; background-color: #ddf; margin: auto; } #footer{ background-color: red; width: 800px; height: 45px; margin: auto; } </style> <script type='text/javascript'> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> <div id="menubalken"> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="http://google.com">Remoras</a></li> <li><a href="#">Tileftext-algin: left;ishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> </div> <div id="container"> <p> Bla, bla </p> <div id="footer"> </div> </body> </html> |
|
|||
Zitat:
[FAQ]FAQ[/FAQ], CSS-Prolog. Zitat:
Zitat:
Ich empfehle Little Boxes.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Vielen Dank für die Erklärung.
Zitat:
Ich bin Linux Sysadmin und wenn ein Webdesigner mich um Rat zur Rechteverwaltung, oder anderen Dingen unter Linux bittet, kann ich von ihm auch nicht verlangen dass er sich das alles selber aneignet. Aber wie gesagt hast du natürlich Recht. Ich hab ja bis jetzt alles gut hinbekommen und ich versuche mir alles selber zu erarbeiten, nur die Unterschiede zwischen den Browsern sind halt etwas nervig. LG Geändert von gombi (18.01.2010 um 20:04 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Footer Div verschwindet unter absolut positioniertem div | pkipper | CSS | 6 | 01.03.2010 13:48 |
div mit overflow in der höhe maximieren | aerothunder | CSS | 0 | 05.02.2010 00:14 |
Höhe von umgebendem DIV | vistree | CSS | 2 | 02.08.2007 12:00 |
Problem mit div (float) | Sp33dy G0nz4l3s | CSS | 2 | 29.05.2006 20:13 |
Footer Problem | blub19 | CSS | 6 | 25.01.2005 12:46 |