Detlef G.: pixellayout mit fixierten Bereichen

Beitrag lesen

Hallo Melanu

ich habe es jetzt geschafft das Layout für die modernen Browser umzusetzen.

Zählt IE ab 7 in der Hinsicht auch zu den „modernen Browsern”?
(Ich  habe zur Zeit weder IE7 noch 8 zum Testen hier.)

Ich poste es mal.

Viel Code!
Besser ist es, das irgendwo hoschzuladen und hier zu verlinken, als so riesige Quelltexte zu posten.

Hast du dir mal angesehen, was bei schmalerem Browserfenster passiert?
Deine Navigation wird unerreichbar!

Meine Frage an Dich lautet also: Wie setze ich das ganze am Besten für den IE um (bestenfalls natürlich ab Version 5.5)?

Für IE6 hatte ich das schnell. Dürfte im IE5.5 auch nicht zu sehr zerschossen sein, wenn auch ohne fixierte Elemente.

Als erstes sorgen wir dafür, dass <html> und <body> den gesamten Viewport komplett ausfüllt.

  
* html, * html body {  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
}  

Damit keine doppelten Scrollbalken erscheinen verbieten wir es <html>.

  
* html {  
  overflow: hidden;  
}  

Dann sorgen wir dafür, dass <body> bei Bedarf Scrollbalken erzeugt. Falls wir auch kürzere Seiten absichern wollen, dann können wir dafür sorgen, dass mindestens ein vertikaler Geisterscrollbalken erzeugt wird. Und damit auch der 5er IE zentriert, noch ein center.

  
* html body {  
  overflow: auto;  
/*  overflow-y:scroll; */  
  text-align: center;  
}  

Für die alten IEs gibt es statt der fixen eine absolute Positionierung, die sich bei IE ab 6 nur auf positionierte Vorfahren oder den Viewport bezieht. Außerdem heben wir das center von oben wieder auf.

  
* html #kopf, * html #navigation {  
  position: absolute;  
  text-align: left;  
}  

Nur für den 6er IE müssen wir noch die typische Breite des Scrollbalkens ausgleichen (495 + 16/2 = 503).

  
* html b\ody #kopf, * html b\ody #navigation{  
  margin-left: -503px;  
}  

Weil die alten IEs in dem Fall margin-top ignorieren, machen wirs eben mit padding. (Das könnte auch statt über den Hack direkt für alle Browser so formatiert werden.)

  
* html #inhaltsbereich {  
  margin: 0 auto;  
  padding-top: 120px;  
}  

Und nochmal das center aufheben, dass wir für die 5er IEs gesetzt haben.

  
* html #inhalt {  
  text-align: left;  
}  

Ich hoffe, dass ich nichts übersehen habe.
Die text-align für 5er IE können auch ohne Hack direkt zu den Regeln für moderne Browser geschrieben werden. Dort sind sie zwar nicht nötig, schaden aber auch nicht.

Wenn du bei position:fixed oder position:absolute nur den Wert für top (bzw. bottom) angibst, aber keinen für left (bzw. right), wonach wird das Element dann horizontal ausgerichtet?

Leider werden die Elemente dann immer an den linken Bildschirmrand gequetscht (zumindest bei meinen Versuchen mit position:fixed).

Ja, weil sie direkt im <body> sind, der hat die volle Breite.

Kennst Du schon so ein Skript.

Auch deshalb hat meine Antwort so lange gedauert.
Ich habe meinen Ansatz etwas weiter verfolgt, damit die Navigation nicht unerreichbar wird, und dazu einen Entwurf für so ein Script verfasst.

Beispiel

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!