Stefan: variablen Header/Kopfzeile fixieren?

SELF-Forum

variablen Header/Kopfzeile fixieren?

Stefan
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich zermartere mir seit Tagen den Kopf, kann aber keine Anständige CSS/HTML Lösung finden :s

Also ich will eine Seite erstellen, die einen min-width und max-width hat.
So weit ja alles kein Problem.

Nun will ich den Header aber oben fixieren (position:fixed;top:0;right:0;left:0) das ist so weit auch kein Thema...

Wie kann ich es aber nun schaffen, dass der fixe Header auch einen min und max -width erhält und sich genau so wie der zentrierte Inhaltsdiv (margin:auto;min-width:950px;max-width:1200px) verhält???

mein Code (stark vereinfacht)
CSS;

  
body {  
	margin:3px;  
	margin-top:0;  
}  
.Window {  
	margin:auto;  
	border-left:1px solid black;  
	min-width:950px;  
	max-width:1200px;  
	background-color:#cccccc;  
}  
.Window_Footer {  
	border:0;  
	background-color:#eeeeee;  
	height:20px;  
}  
  
#header {  
	height:100px;  
	  
}  
#header_top {  
	height:20px;  
	background-color:red;  
	position:fixed;  
        top:0; left:0; right:0;  
}  
#main {  
	height:800px;  
}  
  
.BOX_Right {  
	border-right: 1px solid red;  
}  
  
.BOX_Left {  
	border-left: 1px solid green;  
}  
  
  
#content {  
	margin-left:170px;  
	margin-right:170px;  
	height:100px;  
}  
#content_left {  
	float:left;  
	width:170px;  
}  
#content_right {  
	float:right;  
	width:170px;  
}  
  
#footer {  
	clear:both;  
}

HTML:

  
<body>  
	<div class="Window BOX_Left">  
		<div class="BOX_Right">  
			<div id="header">  
				<div id="header_top">  
					fixer Top Header  
				</div>  
				Header ;-)  
			  
			</div>  
			  
			  
			<div id="main">  
				<div id="content_left">links</div>  
				<div id="content_right">rechts</div>  
				<div id="content">Content</div>  
			</div>  
			  
			<div id="footer">Footer</div>  
		</div>  
	</div>  
	<div class="Window Window_Footer">  
	</div>  
</body>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. variablen Header/Kopfzeile fixieren?

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    right:0;left:0
    min-width:950px;max-width:1200px

    Wie sagt Luke zu seinem Vater? "Ich spüre deinen Konflikt."

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. variablen Header/Kopfzeile fixieren?

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Nun will ich den Header aber oben fixieren (position:fixed;top:0;right:0;left:0) das ist so weit auch kein Thema...

    Kümmere dich um die Frage:
    Was ist der 'containing block' eines positionierten Elements?

    http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln