nicht angemeldet
Fixierter Header, Footer und Menü im Standardmodus
Ich möchte eine Seite mit fixiertem Header, Footer und Menü erstellen analog dem SelfHTML-Beispiel http://aktuell.de.selfhtml.org/artikel/css/footer/index.htm#fixierte_navigation_bsp bzw. http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm erstellen. Nun habe ich festgestellt, dass das Beispiel aufgrund des unvollständigen Doctypes die Browser in den Kompatibilitätsmodus (Quirksmode) versetzt. Wenn man beim Doctype die fehlende URL folgendermassen ergänzt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
damit der Browser nicht in den Kompatibilitätsmodus versetzt wird, wird die Seite im IE6 nicht mehr korrekt dargestellt. Konkret fehlt z.B. der Scrollbalken und das Menü wird zu breit dargestellt. Wie müsste das CSS geändert werden, dass das nicht passiert?
Meiner Meinung nach sollte das erwähnte Beispiel auf SelfHTML mit einem korrekten Doctype gemacht sein!
MFG
Jenny
-
hi,
Ich möchte eine Seite mit fixiertem Header, Footer und Menü erstellen [...]
Nun habe ich festgestellt, dass das Beispiel aufgrund des unvollständigen Doctypes die Browser in den Kompatibilitätsmodus (Quirksmode) versetzt. Wenn man beim Doctype die fehlende URL folgendermassen ergänzt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
damit der Browser nicht in den Kompatibilitätsmodus versetzt wird, wird die Seite im IE6 nicht mehr korrekt dargestellt. Konkret fehlt z.B. der Scrollbalken und das Menü wird zu breit dargestellt. Wie müsste das CSS geändert werden, dass das nicht passiert?Unter http://de.selfhtml.org/css/layouts/fixbereiche.htm findest du ein Beispiel, wie fixe Positionierung im IE mit vollständigem Doctype umgesetzt werden kann.
Meiner Meinung nach sollte das erwähnte Beispiel auf SelfHTML mit einem korrekten Doctype gemacht sein!
Du bist herzlich eingeladen, dich an der Verbesserung von SELFHTML zu beteiligen, wenn du Kritikpunkte findest.
Stelle deine Verbesserungsvorschläge [1] im Bugtracker ein.[1] Verbesserungsvorschlag bedeutet dann natürlich etwas mehr, als nur ein "das sollte aber anders sein".
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo Wahsaga
Unter http://de.selfhtml.org/css/layouts/fixbereiche.htm findest du ein Beispiel, wie fixe Positionierung im IE mit vollständigem Doctype umgesetzt werden kann.
Den Link kenne ich, aber da scrollen Header und Footer auch mit. Genau das möchte ich aber nicht. http://barrierefrei.e-workers.de/workshops/fixed oder http://www.german-digit.de/layout4 kommen da meinen Vorstellungen schon näher. Das Beispiel auf SelfHTML (http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm) gefällt mir sonst gut, weshalb ich gerne damit weitergearbeitet hätte. Nur müsste ich rausfinden, was geändert werden muss, damit es auch im Standardmodus funktioniert. Wahrscheinlich ist's ja eine Kleinigkeit...
Du bist herzlich eingeladen, dich an der Verbesserung von SELFHTML zu beteiligen, wenn du Kritikpunkte findest.
Stelle deine Verbesserungsvorschläge [1] im Bugtracker ein.[1] Verbesserungsvorschlag bedeutet dann natürlich etwas mehr, als nur ein "das sollte aber anders sein".
Das werde ich bei Gelegenheit machen, wenn ich auch weiss, was denn geändert werden müsste ausser dem Doctype.
MFG
Jenny-
hi,
Unter http://de.selfhtml.org/css/layouts/fixbereiche.htm findest du ein Beispiel, wie fixe Positionierung im IE mit vollständigem Doctype umgesetzt werden kann.
Den Link kenne ich, aber da scrollen Header und Footer auch mit.
Ja dann ändere es doch ...
Du solltest versuchen, dass Prinzip zu verstehen - dann kannst du es auch selber für andere Elemente analog umsetzen.
Stattdessen so lange zu suchen, bis dir zufällig das Beispiel vor die Füsse fällt, welches genau deiner Individualanforderung entspricht, wäre doch eine etwas unintelligente Strategie.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Den Link kenne ich, aber da scrollen Header und Footer auch mit.
Ja dann ändere es doch ...
Das versuche ich ja, hab's aber noch nicht raus.
Du solltest versuchen, dass Prinzip zu verstehen - dann kannst du es auch selber für andere Elemente analog umsetzen.
Genau das will ich, bin aber bisher noch nicht drauf gekommen, wieso diese kleine Ergänzung vom Doctype bzw. die Umstellung von Quirks- zu Standardmodus solche Auswirkungen hat. Vielleicht kann mir ja jemand einen kleinen Tipp geben...
MFG Jenny
-
hi,
Du solltest versuchen, dass Prinzip zu verstehen - dann kannst du es auch selber für andere Elemente analog umsetzen.
Genau das will ich, bin aber bisher noch nicht drauf gekommen, wieso diese kleine Ergänzung vom Doctype bzw. die Umstellung von Quirks- zu Standardmodus solche Auswirkungen hat.
Stichworte: Quirks Mode, fehlerhafte Interpretation des Box Models durch den IE.
Im Quellcode des von dir genannten Beispiels wird darauf hingewiesen:
* html #menu
{
margin:0;
width:10.5em; /* Der IE soll das Element breiter darstellen, da margin und padding hier von
der Breite abgezogen wird! */
}Das "funktionierende" Beispiel mit vollständigem Doctype hast du vor Augen, und dort ist auch erklärt, _wie_ es funktioniert.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo Wahsaga
Stichworte: Quirks Mode, fehlerhafte Interpretation des Box Models durch den IE.
Im Quellcode des von dir genannten Beispiels wird darauf hingewiesen:
* html #menu
{
margin:0;
width:10.5em; /* Der IE soll das Element breiter darstellen, da margin und padding hier von
der Breite abgezogen wird! */
}Das "funktionierende" Beispiel mit vollständigem Doctype hast du vor Augen, und dort ist auch erklärt, _wie_ es funktioniert.
Das mit der Menübreite und dem Quirks-Mode habe ich auch rausgefunden. Da ist die Erklärung im Beispiel ja wirklich gut. Mir geht's aber um den im IE6 fehlenden vertikalen Scrollbalken! Tut mir leid, wenn ich mich da bisher nicht klar ausgedrückt habe...
Hier kann man den overflow ja nicht auf auto setzen), obwohl so der Scrollbalken angezeigt wird, da sonst Header und Footer wieder mitscrollen:
* html, * html body {
overflow:hidden;
bottom:0;
height:100%;
}Und da ist overflow schon auf auto gesetzt:
* html #content {
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}Ich weiss wirklich nicht, wo man da ansetzen muss. Oder liegt deiner Meinung nach auch hier die Antwort greifbar nahe? :-)
MFG Jenny
PS. Übrigens habe ich gerade bemerkt, dass das ganze SelfHTML im Quirks-Mode läuft.
-
hi,
Mir geht's aber um den im IE6 fehlenden vertikalen Scrollbalken!
Wo fehlt der?
(Vollständiges, auf's wesentliche reduziertes Beispiel, wenn möglich online.)
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Guten Morgen
Wo fehlt der?
(Vollständiges, auf's wesentliche reduziertes Beispiel, wenn möglich online.)
Ich habe gedacht, ich stelle das erwähnte SelfHTML-Beispiel unverändert (http://homepage.hispeed.ch/xtream/beispiel6_quirks.htm) und mit ergänzten Doctype (http://homepage.hispeed.ch/xtream/beispiel6_standard.htm) online.
Die wesentlichen CSS-Angaben sind:
/* Nun für den MSIE */
* html, * html body {
overflow:hidden;
bottom:0;
height:100%;
}
* html #header_container, * html #footer_container {
position:absolute;
width:100%;
padding-right:16px;
}
* html #menu {
position:absolute;
}
* html #header,* html #footer {
height:100%;
position:static;
}
* html #content {
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}Der Scrollbalken im IE6 fehlt eigentlich nicht richtig, sondern ist (wie ich jetzt gerade herausgefunden habe) gegen rechts aus dem Fenster verschoben. Wenn man gegen rechts Text "markiert" kommt er zum Vorschein. Es scheint also ein Problem mit der andern Interpretation des Boxmodells zu sein. Ich hab's aber bisher nicht geschafft dies mit Eingaben wie left:-10em; oder ähnlichem oder auch der Reduzierung der Breite zu beheben. :-(
MFG Jenny
-
Moin Jenny,
Ich hab mir zuerst gedacht "typisch Frau", kann nicht mal ein solch einfaches Problem selbst lösen und hofft auf hilfsbereite Männer. Aber nun musste ich feststellen, dass die Lösung gar nicht so eifach ist. Ich geb's auf. *schäm*
Vielleicht kann uns ja Freund Wahsaga helfen...
Grüße
DtM
-
-
-
-
-
-
-
-