title image


Smiley Re: SeitenMitte schiebt sich unter den Header
Hallo Heidekraut,



dann lass es mich so sagen:

#header ist positioniert, da sich der mittlere Container noch im Textfluss befindet,

ist es ganz logisch, dass dieser sich unter (und somit auch hinter) den positionierten

Container verschiebt. Verpasse dem mittleren Container einen Abstand (margin-top) in

der Höhe des #header, und der mittlere Container wird vollständig sichtbar.



Falls Du beabsichtigst, ein Layout nachzubilden, wo #header und mittlerer Container

genau 100% des sichtbaren Browserfensters ausfüllen, dass muss das Layout ein wenig

komplizierter aufgebaut werden.



Schrit 1:

Erstellung eines positionierten Container

Erstellung des mittleren Container (height: 100%)



Da nun der #header ein Teil des mittleren Container abdeckt, muss in den mittleren

Container ein weiterer Container rein, der mit margin-top (alternativ mit padding

top) den abgedeckten Bereich überbrückt um somit den ersten Inhalt erst unterhalb des

positionierten Container darstellt. Dieser Container darf selbst keine Höhe haben.



Schritt 2:

Erstellung eines weiteren Container in den mittleren Container, der den abgedeckten

Bereich überbrückt. (siehe oben)



Schritt 3:

Damit bei viel Inhalt der positionierte Container nicht aus dem Sichtbereich des

Browserfensters hinausgescollt wird, muss der #header per position:fixed (für den

IE: per position: absolute) positioniert werden. Zusätzlich für den IE muss der

Scrollbalken aus html und body (je nach verwendeter IE-Version und Doctype befindet

sich der Scrollbalken entweder in html oder in body) gesperrt ( #overflow: hidden;)

werden und der mittlere Container (height: 100%) mit overflow:auto; versehen werden.



Ein ähnliches Beispiel dafür findest Du auf meiner Seite:

http://www.german-digit.de/layout4/



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: