✔ Footer wird überlappt

Fruitgum

Fruitgum

Erfahrenes Mitglied
Hallo,

im Content liegt meine BOX und die überlappt irgendwann den Footer.

HTML: 
body {
text-align:center;
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;


}

body{
 text-align:center
}

#seite {
margin:0 auto;
text-align:left;
width:1000px;
min-height:786px;
border:0px dotted #000;
outline:none;

background:#fff;
}

#header {
height:100px;
background:url(img/header.png) no-repeat;
}

#nav {
color:#333;
height:25px;
margin:0px;
padding:0px 0px 0px 25px;
list-style:none;
background:#eee;

}



#nav li {
float:left;
margin:0;
padding:0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border:#666666;
border-bottom:none;
outline:none;


}

#nav a {
float:left;
border:1px solid #666;
border-right:none;
border-top:none;
display:block;
text-decoration:none;
margin:0 0px 0 0;
padding:4px 32px;
color:#333;
outline:none;


}
#content {
float:left;
width:70%;
height:500px;
background:#eee ;

}

#leiste {
float:right;
width:30%;
min-height:500px;
background:#eee;

}

#leiste h3 {
margin: 30px 0 12px 0;
padding:6px 8px 4px 10px;
color:#fff;
font-size:120%;
background:#990000 url(img/leiste_bg.png) no-repeat left top;

}

#s_nav {
list-style:none;
font-size:80%;
color:#990000;

}

#s_nav a {
color:#990000;
}






.box {

width:500px;
margin:25px;
background:#ccc;
background:url(img/box_u.png) no-repeat bottom left;
}

.box h3 {
margin:0;
height:24px;
padding:6px 8px 4px 10px;
font-size:130%;
color:#fff;
border-bottom:0px solid #000;
background:url(img/box_o.png) no-repeat top left;
}

.box p {
margin:0;
padding:14px 10px 14px 10px;

}



.box:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;

}








#footer {
clear:both;
width:970px;
height:20px;
color:#FFFFFF;
margin:0;
padding:0 0px 0 30px;
background:#990000;
}

#footer {height: 1%}
*html #footer {height: 1%}
*html .box {height: 1%}

ich habe auch den Footer gecleart und gefixt, doch leider geht es nicht. Jemand ne Ahnung?


Aso hier noch der HTML:

HTML: 
<body>
<div id="seite"><!-- Anfang -->








<div id="header">
</div>


<div id="navi">

<ul id="nav">
<li>LINKS</li>
<li>LINKS</li>
<li>LINKS</li>
<li>LINKS</li>
<li>LINKS</li>
<li>LINKS</li>
</ul>
</div>

<div id="content">


<div class="box">
<h3>Webdesign & Sonderangebote</h3><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>


<div class="box">
<h3>Projektvergabe</h3><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

<div class="box">
<h3>Projektvergabe</h3><p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>


</div>


<div id="leiste">
<h3>About</h3>
<ul id="s_nav">
<li>LINKS</li>
</ul>

<h3>Rent to Buy</h3>
<ul id="s_nav">
<li>LINKS</li>
<li>LINKS</li>
<li>LINKS</li>

</ul>
</div>

<div id="footer">
Copyright  2009
</div>













</div><!-- Ende -->
</body>
</html>


Grüße
 
Hi,

wenn für #content mit min-width eine Mindesthöhe eingerichtet wird (moderne Browser wie FF, Opera, Safari usw. interpretieren nämlich die derzeitige height:500px-Deklaration als fixe Boxenhöhe), wird der Footer am unteren Boxenrand von #seite ausgerichtet, und nicht mehr vom Inhalt aus #content überlappt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück