✔ CSS Design - Footer Code

futufry · 10. Juli 2007

Hallo,

momentan bin ich nach einjähriger Abstinenz wieder dabei eine Webseite zu erstellen. Irgendwie muss im Laufe dieses Jahres aber ein bissel an Wissen verloren haben, da ich ein paar Probleme mit meinem Code habe

Das Problem ist, dass mein div Footer immer am unteren Bildschirmrand sein soll. Das tut er auch fleißig, aber der Rest der Seite befindet sich dann teilweise 100-200px darüber.

Um Euch das ganze genauer zu erklären habe ich einmal zwei Bilder erstellt. Eins wie es normalerweise aussehen sollte und wie es jetzt aussieht. Dazu habe ich auch den Code hochgeladen, denn da muss ja irgendwie der Fehler lauern

Hier der dazugehörige Code:

Code:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
  	height: 100%; /* wichtig */
	background-color:#fcf9eb;
    margin: 0px 0px 0px 0px;
}
#box {
	position: relative;
	width:745px;
	left: 0px;
	top: 0px;
    min-height: 100%;
  	height:auto /* moderne Browser */
  	height:100%; /* IE */
	background-color: #FCF9EB;
}
#logo {
	position:absolute;
	width:290px;
	height:66px;
	left: 0px;
	top: 0px;
}
#nav1 {
	position:absolute;
	width:144px;
	height:7px;
	left: 0px;
	top: 67px;
	background-color: #470000;
}
#nav2 {
	position:absolute;
	width:144px;
	height:43px;
	left: 0px;
	top: 75px;
	background-color: #efe9cd;
}
#nav3 {
	position:absolute;
	width:144px;
	left: 0px;
	top: 119px;
	background-color: #EFE9CD;
	height: 469px;
}
#header {
	position:absolute;
	width:600px;
	height:150px;
	left: 145px;
	top: 75px;
	background-color: #EFE9CD;
}
#header1 {
	position:absolute;
	width:600px;
	height:7px;
	left: 145px;
	top: 67px;
	background-color: #470000;
}
#content {
	position:absolute;
	width:600px;
	left: 145px;
	top: 226px;
	background-color: #EFE9CD;
}
p#footer
{
width: 745px;
height: 13px;
line-height: 13px;
background: #470000;
text-align: center;
}
.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #470000;
}
.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FCF9EB;
}
.navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #470000;
}
</style>
</head>
<body>
<div id="box">
<div id="logo"><img src="images/lauterbach.gif" width="290" height="66" alt="Lauterbach Cottbus" /></div>
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"><br />
  <table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td class="navigation">
	    Gastronomie<br />
        <br />
        Conditorei<br />
        <br />
        Catering<br />
        <br />
        Historie<br />
        <br />
        Events<br />
        <br />
        Kunst<br />
        <br />
        Jobs<br />
        <br />
        Kontakt</td>
    </tr>
  </table>
</div>
<div id="header"><img src="images/header.jpg" alt="Max Lauterbach Cottbus" width="600" height="150" /></div>
<div id="header1"></div>
<div id="content">  <img src="images/spacer.gif" alt="Spacer" width="100" height="10" /><br />
  <table width="598" cellpadding="0" cellspacing="0">
    <tr>
      <td style="border-top: solid 1px #fcf9eb" width="199"><img src="images/gastronomie.gif" alt="Gastronomie" width="199" height="25" /></td>
      <td style="border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb; border-top: solid 1px #fcf9eb; border-bottom: solid 1px #fcf9eb">       <img src="images/conditorei.gif" alt="Conditorei" width="199" height="25" /></td>
      <td style="border-top: solid 1px #fcf9eb" width="200"><img src="images/catering.gif" alt="Catering" width="200" height="25" /></td>
    </tr>
    <tr>
      <td style="border-bottom: solid 1px #fcf9eb" width="199"><img src="images/gastronomie.jpg" alt="Cafe Lauterbach" width="199" height="110" /></td>
      <td style="border-bottom: solid 1px #fcf9eb; border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb" width="199"><img src="images/conditorei.jpg" alt="Conditorei Lauterbach" width="199" height="110" /></td>
      <td style="border-bottom: solid 1px #fcf9eb" width="200"><img src="images/catering.jpg" alt="Staatstheater Cottbus" width="200" height="110" /></td>
    </tr>
    <tr>
      <td width="199" height="37" valign="top">&nbsp;<span class="content">&raquo; Lassen Sie sich  verw&ouml;hnen</span><br />
      <br /></td>
      <td width="199" height="37" valign="top" style="border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb">&nbsp;<span class="content">&raquo; Erfahrung spricht f&uuml;r sich</span></td>
      <td width="200" height="37" valign="top">&nbsp;<span class="content">&raquo; Auch au&szlig;erhalb Top Qualit&auml;t</span></td>
    </tr>
    <tr>
      <td style="border-top: solid 1px #fcf9eb" width="199"><img src="images/historie.gif" alt="Historie" width="199" height="25" /></td>
      <td style="border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb; border-top: solid 1px #fcf9eb; border-bottom: solid 1px #fcf9eb"><img src="images/events.gif" alt="Events" width="199" height="25" /></td>
      <td style="border-top: solid 1px #fcf9eb" width="200"><img src="images/kunst.gif" alt="Kunst" width="200" height="25" /></td>
    </tr>
    <tr>
      <td style="border-bottom: solid 1px #fcf9eb" width="199"><img src="images/historie.jpg" alt="Lauterbach Geschichte" width="199" height="110" /></td>
      <td style="border-bottom: solid 1px #fcf9eb; border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb" width="199"><img src="images/events.jpg" alt="Lauterbach am Abend" width="199" height="110" /></td>
      <td style="border-bottom: solid 1px #fcf9eb" width="199"><img src="images/kunst.jpg" alt="Kunstaustellungen im Lauterbach" width="200" height="110" /></td>
    </tr>
    <tr>
      <td width="199" height="37" valign="top" style="border-bottom: solid 1px #fcf9eb">&nbsp;<span class="content">&raquo; 100 Jahre durchwehen ein Caf&eacute;<br />
<br />
</span></td>
      <td width="199" height="37" valign="top" style="border-right: solid 1px #fcf9eb; border-left: solid 1px #fcf9eb; border-bottom: solid 1px #fcf9eb">&nbsp;<span class="content">&raquo; Events im Lauterbach Haus</span></td>
      <td width="200" height="37" valign="top" style="border-bottom: solid 1px #fcf9eb">&nbsp;<span class="content">&raquo; Austellungen im Lauterbach</span></td>
    </tr>
  </table></div>
</div>
<p id="footer">...</p>
</body>
</html>

Da dies (wie bereits oben erwähnt) mein erster Code seit langem wieder ist, verzeiht mir meine (bestimmt vorhandenen) Fehler

Über Hinweise auf vorkommende Fehler würde ich mich natürlich freuen

Das Hauptproblem für mich ist jedoch erst einmal dieser Footer und natürlich die divs, denn die sollen ja eigentlich genau vor dem Footer enden.

Über Ratschläge von Eurer Seite würde ich mich sehr sehr freuen!

Ich wünsche Euch einen schönen Abend!

futu

sniffler · 10. Juli 2007

Hallo,

vielleicht bringt es was, wenn du bei der Footer - ID einen top-margin von 0px einstellst.

Gruß Chico

Maik · 10. Juli 2007

Hi,

wenn der Footer nahtlos unter den übrigen absolut positionierten DIVs anschliessen soll, dann mußt du ihn ebenfalls mit der entsprechenden Positionsangabe von oben ausstatten.

Wenn wiederum die Spalten bis zum Footer am unteren Bildschirmrand reichen sollen, dürfte mein CSS-Tutorial CSS-Layout mit 100%-Höhe ganz interessant sein.

Achja, im Selektor #box fehlt in der ersten height-Deklaration zum einen die !important-Regel, damit die modernen Browser die nachfolgende height-Angabe für den IE übergehen, und zum anderen das Semikolon nach dem Eigenschaftswert.

futufry · 21. Oktober 2007

Hallo,

hab mein altes Thema nochmal aus dem Archiv gekramt, da ich kein neues Thema dafür anfangen wollte.

Nach langer Zeit bin ich nun wieder in der Lage, die Arbeit an der Seite fortzusetzen.

Habe jetzt nochmal von vorne angefangen und bin schon relativ weit. Ein Problem ergibt sich aber wieder! Der Inhalt der content Ebene macht beim Footer nicht halt, sondern erst zirka 150px darunter. Ich bin kurz vorm verzweifeln, da es sich hierbei bestimmt nur um ein kleinen Fehler handelt und ich ihn nicht finde

Hab hier mal den Code angehangen und die content Ebene grau eingefärbt:

Code:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */

}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
background-color:#fcf9eb;
}

/* DIV-Boxen */

div#wrapper {
position: absolute;
margin: 0 auto;
width: 746px;
left: 0px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background-color:#efe9cd;
}
div#content {
position: absolute;
margin: 0 146px;
width: 600px;
left: 0px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background-color:#4c4c4c;
border-top: 1px solid #fcf9eb;
}
div#header {
height: 75px;
background-color:#fcf9eb;
}

#head {
	position:absolute;
	width:290px;
	height:66px;
	left: 0px;
	top: 0px;
}

#sitemap {
	position:absolute;
	width:321px;
	height:18px;
	left: 425px;
	top: 1px;
}
#navcon {
	position:absolute;
	width:145px;
	height:43px;
	top: 76px;
	left: 0px;
	background-color:#efe9cd;
    border-bottom: 1px solid #fcf9eb;
	border-right: 1px solid #fcf9eb;
}
div#leftCol {
width: 145px;
float: left;
}
div#centerCol {
margin: 0 146px;
float: right;
}
#headerbild {
	position:absolute;
	width:600px;
	left: 146px;
	top: 76px;
	visibility: visible;
	background-color:#efe9cd;
	height: 150px;
	border-bottom: 1px solid #fcf9eb;
}
#navoben {
	position:absolute;
	width:145px;
	height:7px;
	left: 0px;
	top: 68px;
	background-color:#470000;
	border-bottom: 1px solid #fcf9eb;
	
}
#headerverzier {
	position:absolute;
	width:600px;
	height:7px;
	left: 146px;
	top: 68px;
	visibility: visible;
	background-color:#470000;
	border-bottom: 1px solid #fcf9eb;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 746px;
height: 16px;
}
#foot {
	position:absolute;
	width:600px;
	height:15px;
	left: 146px;
	background-color:#470000;
	border-top: 1px solid #fcf9eb;
}
#foot2 {
	position:absolute;
	width:145px;
	height:15px;
	left: 0px;
	background-color:#470000;
	border-top: 1px solid #fcf9eb;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.Stil1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #470000;
}
.Stil3 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #470000; }
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style></head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
<div id="head"><img src="images/bga.gif" width="290" height="66" alt="Conditorei und Cafe Lauterbach" /></div>
<div id="sitemap"><div class="Stil1">Aktuell | Kontakt | Impressum | Sitemap | Hilfe | Startseite</div></div>
<div id="navoben"></div><div id="headerverzier"></div>
</div>
<div id="leftCol"><div id="navcon"></div></div>
<div id="centerCol"><div id="content" class="clearfix">gggg</div></div>
<div id="footer"><div id="foot"></div><div id="foot2"></div></div>
</div>
</body>
</html>

Bitte helft mir

Maik · 21. Oktober 2007

Hi,

ich häng dir die überarbeitete Fassung des Quellcodes als ZIP-Datei an, da ich, in Anlehnung an mein damals empfohlene und von dir verwendete Tutorial, noch eine Hintergrundgrafik für das DIV #wrapper erstellt habe, die den #content-Hintergrund erzeugt.

futufry · 4. November 2007

sorry für meine späte antwort. vielen dank, hat super geklappt. werd morgen mal an der seite weiterarbeiten

✔ CSS Design - Footer Code

futufry

Mitglied

Anhänge

sniffler

Mitglied

Maik

futufry

Mitglied

Maik

Anhänge

futufry

Mitglied

Neue Beiträge