✔ 3 Zeilen Layout mit festen Header und Footer

F

forum-user

Mitglied
Hallo Leute, ich steh grad vor dem "Problem" das ich ein 3 Zeilen Layout erstellen will, das einen festen Header und Footer hat. Diese stehen fest oben und unten am Bildschirmrand.
Der Content Bereich soll sich dem rest anpassen und den Textfluss nur in diesem Bereich haben auch wenn massen Text vorhanden ist.
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<link href="template/design.css" rel="stylesheet" type="text/css" media="screen" />
  <!--[if IE 7]>
    <style type="text/css">@import url(template/ie7.css);</style>
  <![endif]-->
</head>

<body>
<div id="header"><img src="template/image/Logo_02.jpg" alt="ALTERNATE" width="252" height="88" hspace="50" /></div>
  <div id="top_middle"><img src="template/image/top_middle_1.jpg" alt="ALTERNATE" /></div>
<div id="conten_wrapper">
  <div id="content">
    <p></p>
 </div>
</div>

<div id="footer">
 <div class="footer_text">
  <ul>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
 </div>
<div class="footer_text">TEST</div>
<div class="footer_text">TEST2</div>
<div class="footer_text">TEST2</div>
<div class="clearfloat"></div>
</div>
</body>
</html>

Und hier meine CSS
HTML: 
@charset "utf-8";
/* CSS Document */
body{
	background-color:#100b5d;
	font-size:14px;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:110px;
	background:url(image/header_bg.jpg) repeat-x top;
}

#top_middle{
	position:absolute;
	left:50%;
	top:100px;
	margin-left:-375px;
	height:150px;
	width:750px;
}


#conten_wrapper {
	position:absolute;
	top:255px;
	left:50%;
	width:950px;
	margin-left: -475px;
	background-color:#006666;
	min-height:350px;
	overflow:auto;
}

#content{
/*	margin: 0px auto 0 auto;
	width:950px;

	/*overflow:auto;
	background-color:#00CC00;  */
}

#footer{
	position:absolute;
	bottom:0;
	height:121px;
	width:100%;
	left:0;
	background:url(image/footer_bg.jpg) repeat-x top;
}

* #header{
	position:fixed;
}

* #footer {
	position:fixed;
}

* #top_middle{
	position:fixed;
}

* #content_wrapper{
	position:fixed;
}

.footer_text{
	width:25%;
	margin-top:30px;
	float:left;
}

.footer_text ul {
	list-style:none;
	font-size:10px;

}

.footer_text ul li a:link,.footer_text ul li a:visited, .footer_text ul li a:active  {
	font-size:10px;
	font-weight:bold;
	color:#6e6556;
	text-decoration:none;
}

.footer_text ul li a:hover{
	text-decoration:underline;
}

.clearfloat {
   	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


Nun meine Frage, wo ist hier mein Denkfehler
 
Hallo,

versuch's mal so #conten_wrapper bottom:121px ; der Rest kann so bleiben.

Edit: Warum ist #content_wrapper fixed ? Kannste entfernen. Quatsch.
 
Zuletzt bearbeitet:
Jo genau sowas, danke Dir. Habe aber auch grad noch bissel an meiner CSS gewerkelt und da kam das raus
Code: 
@charset "utf-8";
/* CSS Document */
body {
	margin:0;
	padding:0;
	background-color:#100b5d;
	font-size:14px;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
}

#wrapper {
	position:absolute;
	width:950px;
	left:50%;
	margin-left:-475px;
}

#header{
	background:url(image/header_bg.jpg) repeat-x;
	height:110px;
	width:100%;
	display:block;
	min-width:950px;
}

#header_nav{
	float:right;
	width:500px;
	height:50px;
	margin:30px 50px 0 0;
	display:block;
	line-height:50px;
}

#header_nav ul { 
	margin:0; 
	padding:0; 
	list-style:none; 
}

#header_nav li { 
	float:left; 
	margin:0 0 0 40px ; 
	padding:0; 
}

#header_nav ul li a:link,#header_nav ul li a:visited, #header_nav ul li a:active  {
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	color:#6e6556;
}

#header_nav ul li a:hover{
	text-decoration:underline;
}

#top_middle{
	top:100px;
	left:0;
	right:0;
	width:100%;
	text-align:center;
}

* #top_middle{
	position:fixed;
}

#content_wrapper {
	position:absolute;
	min-width:950px;
	width:100%;
	top:260px;
	left:0;
	bottom:130px;
	overflow:auto;
}

* #content_wrapper {
	position:fixed;
}


#content{
	width:900px;
	margin:auto;
}

#footer {
	position:absolute;
	background:url(image/footer_bg.jpg) repeat-x;
	width:100%;
	height:121px;
	bottom:0;
	min-width:950px;
}

.footer_text{
	width:25%;
	margin-top:30px;
	float:left;
	color:#6e6556;
}

.footer_text ul {
	list-style:none;
	font-size:10px;

}

.footer_text ul li a:link,.footer_text ul li a:visited, .footer_text ul li a:active  {
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	color:#6e6556;
}

.footer_text ul li a:hover{
	text-decoration:underline;
}


* #header{
	position:fixed;
}

* #wrapper {
	position:fixed;
}

* #footer{
	position:fixed;
}

.clearfloat {
   	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück