|
|||
Versatz vom Footer im IE
Hallo und guten Tag Community,
ich stehe vor einem Problem, dessen Lösung mir bis dato verborgen bleibt... Es geht um eine ganz einfache Seite (bisher ohne Inhalt) und bei der Darstellung in Firefox wird die Fußzeile so angezeigt, wie es erwünscht ist. Wird die Seite im IE geöffnet, ist die Fußzeile (um die Breite des Contents) nach rechts verschoben (siehe footer_versatz.jpg). Hier der HTML-Code: 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" xml:lang="de" lang="de"> <head> <title>Eine Homepage der xyz GbR</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="Die Seite der xyz GbR - für Sie..." /> <meta name="author" content="Dipl.-Wirtsch.-Ing. (FH) Frank Boeckmann" /> <meta name="keywords" content="" /> <link href="style_hatboe.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="page"> <div id="header"> </div> <div id="navigation"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> <div id="content"> <p>der content... <br /><br /><br /><br /><br /><br /><br />der content...<br /><br /><br /><br /><br />der content... </p> </div> <div id="sitecontent"> <p>der sitecontent<br /><br /><br />der sitecontent...<br /><br /><br />der sitecontent...</p> </div> <div id="footer">© by xyz GbR | <a href="#">Impressum </a> </div> </div> </body> </html> Code:
html, body { padding: 0; margin: 0; text-align: center; /* IE-Fix */ } #page { width: 960px; margin: 10px auto; text-align: left; /* because of IE-Fix */ min-height: 100%; } /* beginn der kopfzeile */ #header { width: 960px; height: 110px; background-color: #F6F6F6; background:url(img/logo_hatboe.jpg) 0 0 no-repeat; } /* ende der kopfzeile */ /* ================================================================ */ /* beginn der navigation */ #navigation { width: auto; background-color: #b95600; height: 36px; } #navigation ul { padding: 0; margin: 0; list-style: none; } #navigation ul li { float: left; line-height: 36px; height: 36px; /* IE-Fix */ padding: 0 10px; } #navigation a { display: block; color: #FFFFFF; font-weight: bold; width: auto; height: 100%; text-decoration: none; } #navigation a:hover { color: #808080; } /* ende der navigation */ /* ================================================================ */ #content { float: left; height: auto; background-color: #00FF00; width: 640px; padding: 10px; } /* anpassung ie6 */ * html #content { height: 100%; } #sitecontent { width: 280px; margin-left: 660px; padding: 10px; height: auto; background-color: #FF00FF; } /* ================================================================ */ /* fusszeile */ #footer { position: absolute; bottom: 0; margin: 0 10px 0 0; padding: 0 20px 0 20px; width: 920px; background-color: #FFF2BC; line-height: 40px; height: 40px; /* IE-Fix */ text-align: right; } #footer a { text-align: right; font-size: 1.2em; font-weight: bold; color: #b95600; text-decoration: none; } #footer a:hover { text-decoration: underline; } /* ende fusszeile */ PS: Die grellen Farben dienen der Darstellung und sind gewöhnungsbedürftig... Vielen Dank für die Mühen im voraus. Gruß Frank |
Sponsored Links |
|
|||
Wozu unterstützt du noch den IE6?
Wir sind mittlerweile bei Version 11 angelangt. Wer floatet muss auch clearen, daher Code:
#footer { clear: both; ... }
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Hallo Explanator,
erst einmal vielen herzlichen Dank! Kurz, knapp, präzise und richtig - Super! Was den IE betrifft - so arbeiten noch einige mit den alten Dingern *hab ich gelesen*... Wenn ich einmal groß bin, werde ich auch ein wenig Erfahrung in Sachen HTML und CSS vorweisen können - hoffe ich... Nochmals vielen Dank für die schnelle Reaktion! Gruß Frank |
|
|||
Es steht im Internet deshalb kann es gar nicht falsch, bzw. unwichtig sein?
|
|
|||
Es ist mir schon klar, dass nicht alles Gold ist, was im Netz steht...
Ich kann mir aber nur dann ein bewertendes Urteil erlauben, wenn ich davon genügend Ahnung bzw. eine ausreichende Erfahrung habe... Und das habe ich nicht - deswegen lese ich ja solche Statements - und werde dazu lernen ... Danke. Gruß Frank |
|
|||
Siehe auch noch CSS Sticky Footer
Gebe mal Content bei dir reichlich Textinhalt Dan, siehst du es. __________ MfG Roland |
|
|||
Stand der Entwicklung
Du kannst beruhigt davon ausgehen nur noch mit dem IE 11 oder neuer zu tun zu haben. Der Support von Windows XP läuft morgen aus. Damit hat es sich auch für den IE 8 erledigt. Der IE 9 und 10 ist dank Autoupdate quasi Null. Es bleiben also nur nur noch moderne Browser übrig. Siehe für Statistik der Browserververteilung auch StatCounter Global Stats - Browser, OS, Search Engine including Mobile Market Share Html 4 und XHTML1.0 ist auch bald Geschichte, zumindest im Herbst 2014 ist es wohl vorbei und dann wird vom W3C nur noch HTML5 empfohlen. Es spricht aber nichts dagegen schon jetzt alle neuen Seiten in HTML5 zu schreiben und CSS3 zu nutzen. Die Unterstützung durch Broswer kann als gut bis sehr gut angesehen werden. Für einzelne Features empfiehlt es sich dennoch immer mal wieder ein Blick auf die Seite Can I use... Support tables for HTML5, CSS3, etc zu werfen, da einzelne Bereiche noch nicht ausreichend Unterstützung finden(Als Beispiel sei hier mal input type="date" genannt)
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Footer und Entwicklungsstand
@K.Roland
Du hast es geahnt denke ich ... Es kommt zu Schwierigkeiten - der Footer scrollt mit nach oben... Ich habe noch keine Ahnung, wie es umzusetzen ist, dass das nicht mehr passiert - auch wenn dem Grunde nach viel beschrieben wird ... @explanator Werde wohl dann davon ausgehen - macht Sinn und ist logisch... Die Umsetzung wird noch etwas andauern; ich muss noch dazu lernen ... Danke für die Reaktionen! Ich wünsche noch frohes Schaffen. Gruß Frank |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Footer am unteren Seitenrand | scar | CSS | 3 | 21.04.2013 21:34 |
Footer will nicht wie ich will! | vipfafen | CSS | 7 | 11.12.2012 00:07 |
Footer container werden untereinander dargestellt... | Ntracks | CSS | 10 | 07.08.2010 19:24 |
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) | Basti_LRT | CSS | 1 | 08.10.2007 23:03 |
Footer Problem | blub19 | CSS | 6 | 25.01.2005 12:46 |