✔ Footer Problem

Status
Nicht offen für weitere Antworten.
U

uran

Mitglied
Hallo,
Ich hab ein kleines Problem mit einem DIV Footer.

Leider liegt der DIV Footer immer über den Content anstatt untendrunter. Wenn der text mehr wird soll der footer nach unten rücken, allerdings bleibt er fest in seiner höhe und liegt dann quasi über dem Text.

DIV-Content:
Code: 
<div align="center">
  <div id="grundrahmen">
    <div id="logo">
      <div id="navspacer"></div>
      <div id="navstartseite"><a onfocus="this.blur();" href="index.php?action=startseite"></a></div>
      <div id="navlinie"></div>
      <div id="navneueste"><a onfocus="this.blur();" href="index.php?action=neueste"></a></div>
      <div id="navlinie"></div>
      <div id="navweingut"><a onfocus="this.blur();" href="index.php?action=weingut"></a></div>
      <div id="navlinie"></div>
      <div id="navweine"><a onfocus="this.blur();" href="index.php?action=weine"></a></div>
      <div id="navlinie"></div>
      <div id="navleiningerland"><a onfocus="this.blur();" href="index.php?action=leiningerhof"></a></div>
      <div id="navlinie"></div>
      <div id="navbestellung"><a onfocus="this.blur();" href="index.php?action=bestellung"></a></div>
      <div id="navlinie"></div>
      <div id="navkontakt"><a onfocus="this.blur();" href="index.php?action=kontakt"></a></div>
      <div id="navlinie"></div>
      <div id="navweinfreunde"><a onfocus="this.blur();" href="index.php?action=weinfreunde"></a></div>
      <div id="navlinie"></div>
      <div id="navimpressum"><a onfocus="this.blur();" href="index.php?action=impressum"></a></div>
    </div>
    <div id="inhalt">
    </div>
    
  </div>
  <div id="fuss">
      <div id="fussinhalt">blabla</div>
    </div>
    <div id="fuss2"><img src="images/footer2.gif"  border="0" usemap="#Map" /></div>
</div>


Der DIV-Content wird includet. Dieser sieht folgendermaßen aus:
Code: 
<div id="inhaltkopf"><img src="images/kopf_weingut.jpg" alt="Weingut Benzinger"></div>

<div id="inhaltnavrahmen">
	<div id="inhaltnav">
	  <div>-</div>
	</div>
	<div id="inhaltnavkat">-</div>
</div>

<div id="inhaltueberschrift"><br> 
&Uuml;berschrift Startseite
</div>
<div id="inhaltbox">Lorem</div>

Die CSS:
Code: 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(../images/hintergrund.gif);
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;

}

/* START - NAVIGATION */

#navstartseite a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
	background-image:url(../images/nav_startseite_off.gif);
}
 
#navstartseite a:hover {
	background-image:url(../images/nav_startseite_on.gif);
}

#navneueste a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_neueste_off.gif);
}
 
#navneueste a:hover {
	background-image:url(../images/nav_neueste_on.gif);
}

#navweingut a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weingut_off.gif);
}
 
#navweingut a:hover {
	background-image:url(../images/nav_weingut_on.gif);
}

#navweine a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weine_off.gif);
}
 
#navweine a:hover {
	background-image:url(../images/nav_weine_on.gif);
}

#navleiningerland a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_leiningerland_off.gif);
}
 
#navleiningerland a:hover {
	background-image:url(../images/nav_leiningerland_on.gif);
	
}
#navbestellung a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_bestellung_off.gif);
}
 
#navbestellung a:hover {
	background-image:url(../images/nav_bestellung_on.gif);
}

#navkontakt a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_kontakt_off.gif);
}
 
#navkontakt a:hover {
	background-image:url(../images/nav_kontakt_on.gif);
}

#navweinfreunde a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weinfreunde_off.gif);

}
 
#navweinfreunde a:hover {
	background-image:url(../images/nav_weinfreunde_on.gif);
}

#navimpressum a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_impressum_off.gif);
}
 
#navimpressum a:hover {
	background-image:url(../images/nav_impressum_on.gif);
}

/* ENDE - NAVIGATION */

#grundrahmen {
	height: 500px;
	width: 780px;
}

#logo {
    min-height: 187px;
    height: auto !important;
    height: 187px;
    width: 192px;
    float: left;
    background-image: url(../images/logo.gif);
}

#inhalt {
	width: 588px;
	float: right;
	text-align: left;
}
#inhaltkopf {
	width: 591px;
}
#inhaltnavrahmen {
	background-image: url(../images/subnav.gif);
	height: 28px;
	width: 591px;
	background-position: 1px 0px;
}
#inhaltnav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	width: 350px;
	right: 0px;
	float: right;
	margin-right: 15px;
}

#fuss {
    height: 77px;
    width: 780px;
    display:block;
    background-image: url(../images/footer1_bg.gif);
}

#fussinhalt {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #666666;
    text-decoration: none;
    float:right;
    height: 77px;
    width: 600px;
    text-align: right;
	

}

#fuss2 {
	height: 10px;
	width: 100%;
	float: none;
}
#navspacer {
	height: 220px;
	width: 192px;
}
#navlinie {
	height: 3px;
	width: 192px;
	background-image: url(../images/nav_trennlinie.gif);
	float: left;
	overflow: visible;
	clear: left;
	display:block;
}
#inhaltnavkat {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	width: 202px;
	right: 0px;
	float: right;
}
#inhaltueberschrift {
	height: 40px;
	width: 550px;
	margin-left: 25px;
	clear: both;
	margin-top: 13px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	color: #853047;
}
#inhaltbox {
	height: 40px;
	width: 550px;
	margin-left: 25px;
	margin-top: 15px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #333333;
	font-weight: normal;
}
 
Hi,

versuch mal Folgendes:

Code: 
#fuss {
    height: 77px;
    width: 780px;
    display:block;
    background-image: url(../images/footer1_bg.gif);
    clear: both;
}

#inhaltbox {
        /*height: 40px;*/  /* auskommentiert = deaktiviert */
        width: 550px;
        margin-left: 25px;
        margin-top: 15px;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12px;
        color: #333333;
        font-weight: normal;
}
bzw. richte für das DIV inhaltbox eine Mindesthöhe ein:

Code: 
min-height: 40px;
height: auto !important;
height: 40px;
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück