1
Hallo, ich habe eine CSS-Formatvorlage, die gut funktioniert, bis Sie das Fenster schrumpfen, dann die Fußzeile schrittweise bewegt, ich habe es lange gesucht und ich finde wirklich heraus, was ist falsch mit meinem Code hier ist mein CSS stle Blatt:css footer bewegt, wenn Fenster schrumpft
/* *
* Misc *
* */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
h1{
font-size: 28px;
}
h2{
font-size: 16px;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* *
* Header *
* */
.header{
background: grey;
height: 90px;
color: white;
}
.header h1{
position: relative;
top: 20px;
float: left;
}
.header .searchBox{
position: relative;
top: 20px;
float: right;
}
.header .nav{
position: relative;
top: 50px;
}
.header .nav li{
padding: 3px 10px 3px 10px;
display: inline;
list-style: none;
margin: 5px;
background:black;
}
.header .nav ul {
text-align: center;
}
.header .nav li a{
text-decoration: none;
color: white;
}
.header .nav ul li a:hover{
background: lightgrey;
}
/* *
* Middle Content *
* */
.middle{
overflow:auto;
}
/* *
* Navigatioin *
* */
.navigation{
position:absolute;
background: #EEEEEE;
width: 130px;
float: left;
margin: 5px;
height: 70%;
border-right-style:solid;
border-right-width:2px;
}
.navigation h2{
text-align: center;
padding: 20px 20px 20px 20px;
}
.navigation .nav{
padding: 0px 10px 20px 0px;
text-align: right;
}
.navigation .nav li{
list-style: none;
}
/* *
* Content *
* */
.content {
background: #EEEEEE;
margin-left : 13px;
margin-right : 5px;
margin-top : 5px;
padding: 5px 5px 5px 5px;
position:absolute;
left: 130px;
overflow:auto;
}
.content .item{
background: #DDDDDD;
padding: 10px 10px 10px 10px;
margin: 5px;
}
.content .item p{
margin: 5px;
}
.content .item h2{
margin-left: -5px;
}
/* *
* Footer *
* */
.footer{
background: #EEEEEE;
height: 50px;
bottom: 0px;
position: absolute;
width: 100%
}
.footer .nav ul li{
padding: 10px 10px 10px 10px;
list-style: none;
margin: 5px;
white-space: nowrap;
display: inline;
}
.footer .nav ul {
text-align: center;
}
.footer .copyright{
text-align: center;
}
und die hTML für die Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XYZ</title>
<link rel="stylesheet" type="text/css" href="Defult.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div class ="header">
<h1>XYZ</h1>
<div class ="searchBox">
<form action="">
<p><label>Search:<input type="text" /></label>
<input type="submit" value="Go"/>
</p>
</form>
</div>
<div class ="nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
</div>
<div class ="middle">
<div class ="navigation">
<h2>About</h2>
<div class="nav">
<ul>
<li><a href="#">Values</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">Company History</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Environmental Responsibility</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class ="content">
<h1>About XYZ</h1>
<div class ="item">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, ut libero ac aenean luctus, lacus blandit, consectetuer cras litora massa. Massa condimentum, etiam nunc, quis egestas quis magna vitae velit porttitor, pulvinar at vivamus. Odio nec posuere maecenas tincidunt, quam est id felis
adipiscing eros, condimentum ac lorem ante in. Molestie est risus nullam, sed dui dictum integer metus, praesent consequat nunc facilisis ante. Gravida tristique vivamus. Risus vel malesuada, dui malesuada lorem id, quam nibh at tellus id ullamcorper, ligula
vitae dictumst nisl leo. Sit natoque viverra sollicitudin diamlorem, eu massa lacinia pretium laoreet metus, rutrum ut odio molestie porta penatibus.
</p>
</div>
<div class ="item">
<h2>Sit Consequat Molestie</h2>
<p>Sit consequat molestie elit tempus et justo, conubia magna est, rutrum eleifend duis commodo ante mattis, posuere metus vel curabitur vitae leo purus. Vivamus gravida ante reprehenderit, consequat cursus id placerat, mauris ultrices, urna ultrices, ut suspendisse
accumsan imperdiet sit. Pede tristique rerum auctor suspendisse. Amet rutrum enim nullam tempor, a wisi, morbi vel volutpat sollicitudin platea, lectus velit nec. Dui sed, malesuada ac in, natoque vitae ornare interdum nulla et felis. Vitae praesent pede duis
varius lectus, suspendisse tincidunt, eleifend eget quis dolor donec ut. Felis porta ultricies, aliquam et luctus scelerisque parturient, massa ultricies et tempus eu ullamcorper mus. Donec maecenas nullam in, rutrum a, odio nibh ut tortor nunc sollicitudin
sem, scelerisque ac pede mollis massa vel ullamcorper, scelerisque velit nulla vestibulum.
</p>
</div>
<div class ="item">
<h2>Sapien Quisque Dictum</h2>
<p>Sapien quisque dictum arcu integer, elementum magna pharetra ipsum eu, nunc nulla id error odio nulla nec, pede non nec dolor mauris, eget id morbi. Nibh nibh imperdiet a imperdiet dapibus, sed auctor sed arcu morbi imperdiet in, morbi et ipsum mollis sem
massa ut. Ac sit nibh curabitur aliquet, arcu dictum varius justo. Ut in. Donec varius ad blandit, id praesent condimentum mauris magna adipiscing vitae, at dui libero nam sed ac nibh. Turpis et vel sem tempus, pellentesque id mi vitae eu eros, nonummy sagittis
eu, laoreet dolor praesent volutpat lorem, volutpat lorem sodales consequat in adipiscing convallis. Dolor ipsum integer vivamus adipiscing a tincidunt, nibh leo, vitae ac velit vestibulum porta porttitor amet, lacinia ut tortor aliquam.
</p>
</div>
</div>
</div>
<div class ="footer">
<div class ="nav">
<ul>
<li><a href="#">Site Index</a></li>
<li><a href="#">Legal Notice</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class ="copyright">
<p>© 2010 XYZ Trading Ltd.</p>
</div>
</div>
</body>
</html>
Vielen Dank im Voraus!
Nope gerade gemacht das div ist seine minimale Größe und sogar dann blieb es immer noch wo es war und der Text überflutete darunter – Houlahan