soezkan
Erfahrenes Mitglied
Hallo Alle,
ich habe mir ein Layout gebastelt mit einem Sticky Footer.
Das klappt eigentlich auch. Nur ist jetzt das Problem, wenn ich in diesen Footer mehrere Zeilen setze (z.B. eine vertikale Liste mit Links zur Navigation), dann schiebt sich der Footer über das darüberliegende DIV.
Hier mal der Code in HTML:
und hier die style.css:
Wie kann ich das machen, dass die darüber liegenden DIVs automatisch mit Anwachsen der Footer-DIV-Höhe nach oben geschoben werden?
Ganz lieben Dank schonmal für Hilfe!
Soezkan
ich habe mir ein Layout gebastelt mit einem Sticky Footer.
Das klappt eigentlich auch. Nur ist jetzt das Problem, wenn ich in diesen Footer mehrere Zeilen setze (z.B. eine vertikale Liste mit Links zur Navigation), dann schiebt sich der Footer über das darüberliegende DIV.
Hier mal der Code in HTML:
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>Meine Seite</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="head-left">
<a href="#"><img src="images/logo.jpg" alt="Startseite" title="Startseite" /></a>
</div>
<div id="head-right">
<p><a href="#">Anmelden</a> | <a href="#">Registrieren</a></p>
<form name="suche">
<input type="text" name="suchen" class="searchfield" /> <input type="submit" value="Suche" class="submit" />
</form>
</div>
</div>
<div id="container-navigation">
<div id="navigation">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Sed vitae</a></li>
<li><a href="#">Suspendisse</a></li>
<li><a href="#">Donec consequat</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Nullam</a></li>
<li><a href="#">Vestibulum</a></li>
</ul>
</div>
</div>
<div id="container-breadcrumb">
<div id="breadcrumb">
<a href="#">Home</a> > <a href="#">Lorem</a> > <a href="#">Donec consequat</a>
</div>
</div>
<div id="container-content">
<div id="content-left">
<h1>Resize the window to see the footer move</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non
risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque
ac dolor. <a href="http://www.rodurago.net/index.php?site=details&link=chakra-test">Morbi eget erat in eros</a> rhoncus imperdiet. Aenean egestas
lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam
elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. Cras vulputate. Aliquam
sed enim non justo sollicitudin tempor.</p>
<h2>Donec consequat cursus elit</h2>
<p>Quisque posuere, massa blandit
tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et
quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna
quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean <a href="http://www.rodurago.net/index.php?site=details&link=chakra-test">volutpat,
tellus at faucibus</a> bibendum, sapien massa mattis lorem, id volutpat quam
odio vitae mauris. Donec laoreet lacinia urna.</p>
<h2>Donec consequat cursus elit</h2>
<p>Quisque posuere, massa blandit
tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et
quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna
quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean <a href="http://www.rodurago.net/index.php?site=details&link=chakra-test">volutpat,
tellus at faucibus</a> bibendum, sapien massa mattis lorem, id volutpat quam
odio vitae mauris. Donec laoreet lacinia urna.</p>
<p> </p>
<p><a href="http://www.rodurago.net/index.php?site=details&link=chakra-test">http://www.rodurago.net/index.php?site=details&link=chakra-test</a></p>
</div>
<div class="content-right">
<h3>Quisque at quam vel orci</h3>
<p>Donec laoreet lacinia urna. Integer adipiscing dui
nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis
<a href="#">volutpat, nibh risus tempus risus</a>, quis lobortis nulla erat nec ipsum.
Pellentesque ac est in libero semper hendrerit.</p>
<h3>Anmeldeformular</h3>
<p>Donec laoreet lacinia urna. Integer adipiscing dui
nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis
volutpat, <a href="#">nibh risus tempus</a> risus, </p>
<p><form name="suche">
<input type="text" name="suchen" class="searchfield" /> <input type="submit" value="Abschicken" class="submit" />
</form></p>
</div>
<div class="content-right">
<h3>Quisque at quam vel orci</h3>
<p>Donec laoreet lacinia urna. Integer adipiscing dui
nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis
volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum.
Pellentesque ac est in libero semper hendrerit.</p>
<h3>Quisque at quam vel orci</h3>
<p>Donec laoreet lacinia urna. Integer adipiscing dui
nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis
volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum.
Pellentesque ac est in libero semper hendrerit.</p>
</div>
</div>
<div id="container-footspacer">
<div id="footspacer"> </div>
</div>
<div id="container-foot">
<div id="foot">
<div class="column">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Sed vitae</a></li>
<li><a href="#">Suspendisse</a></li>
<li><a href="#">Donec consequat</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Nullam</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Sed vitae</a></li>
<li><a href="#">Suspendisse</a></li>
<li><a href="#">Donec consequat</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Nullam</a></li>
<li><a href="#">Vestibulum</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
und hier die style.css:
HTML:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; /* Required */
}
body {
font-family: Lucida Sans, Helvetica, sans-serif;
background: #F8F4EF;
background-image: url(../images/bgimage.png);
background-attachment: fixed;
background-repeat: repeat-x;
}
#container-page {
margin: 0 auto;
width: 1048px;
padding: 0px;
background-image: url(../images/background.png);
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}
#container-head {
background: #732413;
width: 1000px;
height: 117px;
min-height: 117px;
margin: 0px 24px 0px 24px;
padding: 0px 0px 0px 0px;
}
#head-left {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#head-left img {
border: 0;
}
#head-right {
float: right;
font-size: 12px;
color: #B8756B;
margin: 25px 24px 0px 24px;
padding: 0px 0px 0px 0px;
}
#head-right p {
text-align: right;
padding: 0px 0px 10px 0px;
}
#head-right p a {
color: #ffffff;
text-decoration: none;
}
#head-right p a:hover {
border-bottom: 1px solid #ffffff;
}
#head-right input.searchfield {
background-image: url(../images/inputbg.png);
border: none;
height: 18px;
min-height: 18px;
color: #041B2E;
font-size: 12px;
margin: 0 0 0 0;
padding: 2px 3px 0 3px;
}
#head-right input.submit {
border: 1px solid #041B2E;
background-color: #008268;
color: #ffffff;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
}
#container-navigation {
background: #041B2E;
width: 1000px;
height: 34px;
min-height: 34px;
margin: 0px 24px 0px 24px;
padding: 0px 0px 0px 0px;
}
#navigation ul {
list-style: none;
margin: 0px 20px 0px 21px;
padding: 8px 0px 0px 0px;
}
#navigation ul li {
float: left;
font-size: 14px;
color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px 39px 0px 0px;
}
#navigation ul li a {
color: #ffffff;
text-decoration: none;
}
#navigation ul li a:hover {
border-bottom: 1px solid #ffffff;
}
#container-breadcrumb {
background: #F5F0EE;
width: 1000px;
height: 25px;
min-height: 25px;
border-bottom: 1px solid #9D6559;
margin: 0px 24px 0px 24px;
padding: 0px 0px 0px 0px;
}
#breadcrumb {
font-size: 12px;
color: #732413;
margin: 0px 0px 0px 21px;
padding: 6px 0px 0px 0px;
}
#breadcrumb a {
color: #732413;
text-decoration: none;
}
#breadcrumb a:hover {
border-bottom: 1px solid #732413;
}
#container-content {
margin: 0px 24px 0px 24px;
padding: 20px 0 0 0;
}
#container-content:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
#content-left {
font-family: Lucida Sans, Helvetica, sans-serif;
font-size: 14px;
color: #041B2E;
float: left;
margin: 0 12px 0 20px;
padding: 0px 0 25px 0;
width: 656px;
}
#content-left p a {
color: #009D7D;
text-decoration: none;
}
#content-left p a:hover {
border-bottom: 1px dotted #041B2E;
}
#content-left h1 {
font-size: 18px;
margin: 0 0 0 0;
padding: 0 0 16px 0;
}
#content-left h2 {
font-size: 15px;
margin: 0 0 0 0;
padding: 20px 0 16px 0;
}
.content-right {
font-family: Lucida Sans, Helvetica, sans-serif;
font-size: 12px;
color: #041B2E;
float: right;
margin: 0px 20px 20px 12px;
padding: 20px 20px 0 20px;
width: 238px;
background-color: #F5F0EE;
border: 1px solid #E3D6D0;
}
.content-right h3 {
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 16px 0;
}
.content-right p {
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 16px 0;
}
.content-right a {
color: #962710;
text-decoration: none;
}
.content-right a:hover {
border-bottom: 1px dotted #041B2E;
}
.content-right input.searchfield {
background-image: url(../images/inputbgc.png);
border: 1px solid #D6C4BC;
height: 18px;
min-height: 18px;
color: #041B2E;
font-size: 12px;
margin: 0 0 0 0;
padding: 1px 3px 0 3px;
}
.content-right input.submit {
border: 1px solid #E3D6D0;
background-color: #008268;
color: #ffffff;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
}
#container-footspacer {
width: 1000px;
height: 25px;
min-height: 25px;
margin: 0px 24px 0px 24px;
padding: 30px 0px 0px 0px;
}
#footspacer {
}
#container-foot {
width: 1000px;
margin: 0px 24px 0px 24px;
padding: 0px 0px 20px 0px;
background: #156454;
position: absolute;
bottom: 0 !important;
bottom: -1px; /* For Certain IE widths */
}
#foot {
font-family: Lucida Sans, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
position: relative;
margin: 0 auto 0 auto;
padding: 20px 20px 20px 20px;
width: 960px;
}
#foot .column {
float: left;
margin: 0 0 0 0;
padding: 0px 5px 0px 5px;
width: 137px;
}
#foot .column ul {
list-style: none;
}
#foot .column ul li {
padding: 0 0 3px 0;
}
#foot .column ul a {
text-decoration: none;
color: #FFFFFF;
}
#foot .column ul a:hover {
text-decoration: underline;
}
Wie kann ich das machen, dass die darüber liegenden DIVs automatisch mit Anwachsen der Footer-DIV-Höhe nach oben geschoben werden?
Ganz lieben Dank schonmal für Hilfe!
Soezkan