Hallo liebe Leute,
ich habe mich hier angemeldet weil ich echt nicht mehr weiter weiß, ich hoffe ihr könnt mir bei meinem Problem helfen.
Es geht um eine Seite die ich gerade aufbaue. Dort positioiere ich einen Footer so (bzw. versuche es so zu positionieren=)) das er egal welche Auflösung der Betrachter hat immer unten am ViewPort positioniert wird. Egal wie groß der Content ist (der Inhalt der Seite) so soll auch der Footer immer unterhalb positioniert werden. Gibt es nur wenig Inhalt soll dennoch der Footer immer unten bleiben.
Ich poste zusätzlich mal den Quelltet mit:
Und hier die zugehörige CSS:
ich habe mich hier angemeldet weil ich echt nicht mehr weiter weiß, ich hoffe ihr könnt mir bei meinem Problem helfen.
Es geht um eine Seite die ich gerade aufbaue. Dort positioiere ich einen Footer so (bzw. versuche es so zu positionieren=)) das er egal welche Auflösung der Betrachter hat immer unten am ViewPort positioniert wird. Egal wie groß der Content ist (der Inhalt der Seite) so soll auch der Footer immer unterhalb positioniert werden. Gibt es nur wenig Inhalt soll dennoch der Footer immer unten bleiben.
Ich poste zusätzlich mal den Quelltet mit:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CRW</title>
<link rel="SHORTCUT ICON" HREF="/img/favico.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="cont1">
<div id="cont1-logo">
<img id="logo" src="img/logo.png" width="350" height="68" alt="" title="">
</div>
<div id="cont1-top">
<ul id="nav">
<li class="nav"><a href="#">Start</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">News</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">Kontakt</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">Community</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">History</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">Family Affairs</a></li>
<li class="nav">|</li>
<li class="nav"><a href="#">Media</a></li>
</ul>
<div class="clr">
</div>
</div>
<div id="cont1-middle">
<div id="cont1-content">
<p>
sads<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</p>
</div>
</div>
<div id="cont1-bottom">
<a id="top" href="#logo">Go to Top</a>
</div>
<div id="cont1-bubbles">
</div>
</div>
<!-- -->
<div id="footer">
<div id="footer-left">
</div>
<div id="footer-middle">
</div>
<div id="footer-right">
</div>
<div class="clr">
</div>
</div>
<!-- -->
</div>
</body>
</html>
HTML:
/*************** standart ***************/
* {
padding:0px;
margin:0px;
}
html, body {
height:100%;
width:100%;
margin:0px;
background-color:#f5f5f5;
}
img {
border:none;
outline:none;
}
div.clr {
width:0px;
height:0px;
clear:left;
}
a {
outline:none;
}
a:link {
color:#3bbffe;
text-decoration:none;
}
a:visited {
color:#3bbffe;
text-decoration:none;
}
a:focus {
color:#3bbffe;
text-decoration:none;
}
a:hover {
color:#3bbffe;
text-decoration:underline;
}
a:active {
color:#3bbffe;
text-decoration:underline;
}
/*************** body ***************/
div#wrapper {
position:relative;
padding-bottom:150px;
background-image:url('img/bg.png');
background-position:bottom;
background-repeat:repeat-x;
}
div#footer {
position:absolute;
width:100%;
height:100%;
height:375px;
bottom:0px;
}
div#footer-left {
width:570px;
height:375px;
float:left;
background-image:url('img/footer-left.png');
}
div#footer-middle {
position:absolute;
height:375px;
left:570px;
right:450px;
background-image:url('img/footer-middle.png');
background-repeat:repeats-x;
background-position:right;
}
div#footer-right {
width:450px;
height:375px;
float:right;
background-image:url('img/footer-right.png');
}
/*************** cont1 ***************/
div#cont1 {
width:604px;
margin:50px 100px;
font-family:arial;
font-size:12px;
color:#595959;
}
div#cont1-logo {
width:350px;
height:68px;
margin-left:31px;
}
div#cont1-top {
width:604px;
height:50px;
background-image:url('img/cont1-top.png');
color:#3bbffe;
}
ul#nav {
list-style-type:none;
padding:15px 20px;
}
li.nav {
float:left;
padding:5px 5px;
}
div#cont1-middle {
width:604px;
background-image:url('img/cont1-bg.png');
background-repeat:repeat-y;
}
div#cont1-content {
padding-left:20px;
padding-right:15px;
}
div#cont1-bottom {
width:604px;
height:50px;
background-image:url('img/cont1-bottom.png');
}
a#top {
color:#3bbffe;
position:absolute;
margin-top:15px;
margin-left:530px;
}
div#cont1-bubbles {
width:467px;
height:50px;
background-image:url('img/cont1-bubbles.png');
}