|
|||
IE: div-Box rutscht in die Fußzeile
Hallo,
ich habe ein Problem, sicher gibt es die Lösung schon irgendwo, aber ich weiß nicht so recht, wie ich danach suchen soll. Als CSS-Anfänger weiß ich z.T. gar nicht, wie ich das Problem beschreiben geschweige denn, mit welchen Suchbegriffen ich suchen muss. Nun denn: ich habe eine Seite mit mehreren div-Boxen: -container mit fester Breite (800px) - darin faux columns "2 Spalten": Navigation und Inhalt - unten (unter dem container und ebenfalls feste Breite 800px)) feststehend eine Fußzeile (immer am unteren Bildrand, solange ein überlanger Inhalt sie nicht nach unten verschiebt) So sah's aus, alles funktionierte prima, ging der Inhalt bis nach unten, verschob er die Fußzeile automatisch. Die Höhe der faux columns-Box war auf auto gesetzt. Nun wollte ich an den unteren Rand der faux columns noch eine Box setzen, eine Grafik, als abgerundeter grafischer Abschluß der faux columns-Box. Die Höhe dieses "Randes" musste ich auf 40px setzen, da das auch die Höhe der Grafik ist. Bei Firefox und Chrome funktioniert alles weiterhin wie gewünscht, im IE rutscht jetzt aber diese 40px-Grafik über die Fußzeile, und erst danach rutscht die Fußzeile wie gewünscht runter. Meine Vermutung ist, daß der IE nur mit height:auto in der über der Fußzeile liegenden Box richtig reagiert, aber eigentlich hab ich keine Ahnung, was ich machen muss, um auch im IE den gewünschten Effekt zu erzielen. Danke für eure Hilfe! Mux |
Sponsored Links |
|
|||
Hier steht, was nötig ist, damit dir geholfen werden kann: http://xhtmlforum.de/40080-f-r-frage...twortende.html
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
ok ok, dachte, die Beschreibung wäre genau genug. Also hier die Codes:
Code:
<div id="container"> <div id="faux"> <div id="navi"> </div> <div id="content"> </div> </div> <div id="contentbottom"> </div> </div> <div id="footer"> </div> Code:
html, body { height:100%; } /*Container mit fester Breite für Navi und Content*/ #container { width:800px; margin:auto; min-height: 100%; height: auto !important; height: 100%; } #faux{ width:800px; background: url(conkachel.jpg) repeat-y; height:auto; float:left; } #navi { display:block; width: 150px; float:left; margin: 0.4em 0; } #content{ width: 580px; float:right; min-height: 100%; height: auto !important; height: 100%; margin-bottom: 30px; padding: 0 10px; } #contentbottom { background: url(conbottom.gif) no-repeat; float:left; width:800px; height:40px; } #footer { clear:both; width: 800px; height: 25px; margin:auto; margin-top:-25px; } |
|
|||
Ich sehe keinen Grund, warum #contentbottom das float benötigt, da es genauso breit ist wie die beiden gefloateten Elemente darüber.
Könntest hier gleich clearen. Es ist sowieso sauberer im Container zu clearen: Davon abgesehen dürfte dein konkretes Problem sein, dass #content 100% Höhe hat UND einen Margin-Bottom, was 100% + 30px ergibt.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Hey, erstmal danke für die schnelle Antwort. Leider lösen deine Tipps mein Problem nicht auf.
Zitat:
Zitat:
Im Link-Tipp von Corina unter Aktuelles | Webdesign mit XHTML und CSS fand ich etwas zu einem Problem vom IE mit der Eigenschaft min-height bzw. height. Kann diese Sache vielleicht mit meinem Problem zusammenhängen? Wie gesagt, bei meinem Container mit der auto-height gab es das Problem nicht, bei der conntenbottom-Box mit der festen Höhe jedoch schon... Grüße Mux |
|
|||
Dann wäre es sinnvoll, wenn Du eine lauffähige HTML-Datei auf irgendeinen Testwebspace packst und hier verlinkst. ( Mach halt "verräterische" Angaben raus.)
So kann ich dein Problem nicht nachvollziehen.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
ok, schau mal auf test
wenn ich das Browserfenster verkleinere, rückt die gelbe Zeile nach unten. wenn sie den Footer berührt: beim IE schiebt sich die gelbe Zeile über bzw. unter den Footer. bei firefox und chrome schiebt die gelbe Zeile den Footer bei Berührung aus dem viewport heraus --> so soll es auch sein. Und nun hab ich leider auch noch entdeckt, dass opera sofort bei Verkleinerung des Fensters den Footer aus dem Bild schiebt...Himmel hilf... |
|
|||
Zitat:
Cleare innerhalb von #container, z.B. mit einem hr-Element. Gib diesem Element eine passende Höhe, Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hallo Corina,
ja, so funktioniert's. Weiß nicht, ob ich's jetzt auch so gemacht habe, wie du meintest: ich hab jetzt unter die gelbe Zeile eine 10px hohes hr-Element eingefügt, in dem dann auch gecleart wird. Das ganze auf visibility:hidden und nun schiebt auch im IE die gelbe Box den Footer bei Berührung weg. Danke schön! Noch ein kleines neues Problemchen dabei: bei chrome hüpft der Footer nun beim Fenster vergrößern und verkleinern manchmal einfach raus, bleibt weg, und manchmal kommt er wieder...ganz als hätte er einen eigenen Willen Kann man das auch noch ändern bzw. würde ich gern verstehen, was es mit diesem scheinbar willkürlichen Verschwinden auf sich hat. Grüße, Mux |
Sponsored Links |
|
|||
10px ist keine passende Höhe. Du musst Platz in Höhe des Footers schaffen!
Dein Online-Code ist nicht aktualisiert.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |