Hallo,
also ich möchte, dass der Footer, welcher bei mir im Div-Container Page sitzt sich so verhält dass:
-wenn der Inhalt in Page nur ein paar Zeilen lang ist, der Footer auch gleich folgt, also nicht unten ist,
aber dennoch das Hintergrundbild vom body, welcher 950px (oder so) breit ist bis nach ganz unten zum Seitenende geht.
-wenn Page nicht mehr für eine Bildschirmseitenlänge ausreicht, also nach unten gescrollt werden muss, soll das Hintergrundbild vom Body
bis ganz zum Seitenende gehen und nicht diese Lücke entstehen wie beim Bild im 1.Post . Der Footer soll dann ganz am Ende sein, aber immernoch im container Page.
Ich hoffe ich habe mich jetzt verständlicher ausgedrückt 
css
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/
html {
background: /* url(../bgverlauf.png) repeat-x */ #f8fffc/* a4aeab */;
/* height: 100%; */
min-height: 100%;
}
body {
width: 960px;
margin: 0 auto;
/* margin-top: 20px; */
/* border: 1px solid #728e85 ; */
background-color: #ffffff;
background-image: url(../backgroundbody.png);
background-repeat: repeat-y;
/* height: 100%; */
font-family: Arial;
color: #273437;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.07em;
/* min-height: 100%; */
/* -moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: px;
-moz-border-radius-bottomleft: px;
-webkit-border-radius: 15px 15px px px;
border-radius: 15px 15px px px; */
}
#footer {
/* background-color: #728e85; */
height: 26px;
width: 900px;
margin-right: 5px;
/* background-image: url(../footer.png); */
margin: 30px;
border-top: dotted 1px #bfbfbf;
background-repeat: no-repeat;
display: block;
}
#footer p {
text-align: center;
/* padding-left: 200px; */
font-size: 12px;
/* color: white; */
padding-top: 3px;
}
#footer a {
text-decoration: none;
}
#header {
/* background: url(../header.png) no-repeat #F3F9F0; */
float: left;
width:960px;
height: 120px;
}
#header p {
font-family: Arial;
font-size: 25px;
margin-left: 5px;
}
#page {
width: 725px;
padding-left: 10px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 220px;
min-height: 400px;
display: block;
/* min-height: 100%; */
/* background-color: #800000; */
}
/* Navigationselemente */
#navigation {
float: left;
width: 200px;
background-color: #dddddd;
margin-left: 21px;
font-size: 17px;
letter-spacing: 2px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
}
#navigation ul {
width: 170px;
background-color: #ececec;
margin-left: 15px;
}
#navigation ul li {
/* height: 25px;
border-bottom: 1px solid #dddddd;
display: block;
padding-top: 3px; */
}
/* der Rahmen unten hat die Gleiche Farbe wie der Hintergrund, damit kein weißer Streifen entsteht */
#navigation a.hier {
background-color: #769980;
color: white;
border-bottom: 1px solid #769980;
border-top: 1px solid #769980;
}
#navigation a.hier:hover {
background-color: #769980;
}
#navigation li a {
text-decoration: none;
display: block;
color: #4f615b;
height: 25px;
display:block;
padding-top: 3px;
border-bottom: 1px solid #dddddd;
padding-left: 10px;
}
#navigation ul a:hover {
background-color:#91aa98;
color: white;
}
/* Bei Fertigstellung IF IE or CHROME oder so dann das, ansosten BORDER-IMAGE-LEFT auf der Linken Seite, sieht eleganter aus */
/* überschriften */
h1 {
font-variant: small-caps;
font-size: 17px;
font-weight: bold;
letter-spacing: 0.09em;
border-bottom: 1px solid #769980;
border-left: 5px solid #769980;
width: 95%;
padding-left: 5px;
}
Alles anzeigen
html ganz
<!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" xml:lang="de" lang="de">
<head>
<title>Projekt | Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="lalala" />
<meta name="author" content="ich" />
<meta name="designer" content="ich"/>
<meta name="publisher" content="lalalal"/>
<meta name="revisit-After" content="7 days"/>
<meta name="keywords" content="lalalala" />
<link href="design/style.css" type="text/css" rel="stylesheet" />
<link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<div id="wrap">
<div id="header">
<p><a href="/index.php">Projekt</a></p>
</div>
<div id="navigation">
<ul>
<li><a class="hier" href="#">Startseite</a></li>
<li><a href="#">hier kommt inhalt</a></li>
<li><a href="#">lalalala</a></li>
<li><a href="#">inhalt</a></li>
<li><a href="#">und noch mehr inhalt</a></li>
<li><a href="#">und eine navigation natürlich</a></li>
</ul>
</div>
<div id="page">
adflajfklajajasd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
</div>
<div id="footer">
<p>© 2011 - <a href="#">Impressum/Disclaimer</a></p>
</div>
</div>
</body>
</html>
Alles anzeigen
