Footer folgt nicht dem Content

Precifix · 08.03.2008, 11:33

Hallo,

unter http://www.dummtuech.de/23/ könnt Ihr mein Problem sehen.
Der Footer ist anfangs schön am unteren Seitenende positioniert. Aber sobald der Content größer als das Browserfenster ist bleibt der Footer an seiner ürsprünglichen Position und der Content läuft darunter weiter :/
Es wäre großartig wenn der Footer IMMER unten klebt.

Vielleicht könnt Ihr mir helfen. Danke

der CSS Code des Footer divs:

HTML-Code:

#apDiv12 {
	position:absolute;
	clear:both;
	display:block;
	margin: 0pt;
	padding: 0pt;
	left:0px;
	width:100%;
	height:19px;
	z-index:100;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	word-spacing: normal;
	text-align: center;
	letter-spacing: 2px;
	line-height: 18px;
	font-size: 0.6em;
	font-style: normal;
	overflow: hidden;
	bottom: 0px;
	background-image: url(images/unten-endlos.jpg);
	vertical-align: text-bottom;
}

Adromir · 08.03.2008, 11:36

Nimm mal das position:absolute raus. Damit wird der Footer nämlich aus dem Textfluss genommen und versuche ihn über eine saubere Anordnung der Elemente nach unten zu bekommen.

Precifix · 08.03.2008, 11:58

Danke

Aber das löst mein Problem nur halb. Der Footer ist dadurch dann erstmal weg und ich hab keine Ahnung wo der aufeinmal ist. Aber erst stört schonmal nicht

Adromir · 08.03.2008, 12:05

Pack den Footer mal ganz unten ins Dokument. Am besten vor </body>
Ausserdem ist bei der Seite irgendein Fehler im PHP. Behebe den mal.

Precifix · 09.03.2008, 08:26

den PHP Fehler habe ich behoben, es fehlte nur eine Datei die per include nicht geladen wurde.

Ich seh den footer immernoch nicht. Habe das div jetzt als letztes direkt or Body gesetzt, hab dem irrerweise auch noch einen z-index von 1000 verpasst. aber ich seh immernoch nix.... HILFE

Bei der restlichen Divs arbeite ich mit position:absolute, ist das ein Problem?

hier nochmal das CSS des Footers:

HTML-Code:

#apDiv12 {
	clear:both;
	display:block;
	margin: 0pt;
	padding: 0pt;
	left:0px;
	width:100%;
	height:19px;
	z-index:1000;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	word-spacing: normal;
	text-align: center;
	letter-spacing: 2px;
	line-height: 18px;
	font-size: 0.6em;
	font-style: normal;
	overflow: hidden;
	bottom: 0px;
	background-image: url(images/unten-endlos.jpg);
	vertical-align: text-bottom;
}

Adromir · 09.03.2008, 10:01

Ja, dann kann es sein, daß die anderen den Verdecken.
Wie gesagt, lieber mit einer sauberen Strukturierung der Seite arbeiten. Also ungefähr auch die Reihenfolge im Quelltext einhalten, wie sie auch auf der Seite auftauchen sollen und so viel wie möglich mit relativen Positionierungen arbeiten.
Das erspart schon das meiste der Probleme.

Precifix · 09.03.2008, 14:14

Ok, hab Deinen Rat befolgt und alles nochmal sauberer Neu gebaut:

HTML-Code:

<body>
<div id="page">


<div id="header">

<div id="navigation">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="150" height="33" align="center" valign="middle" background="/images/nav-norm.gif" class="navnorm">&nbsp;</td>
        <td width="70" height="33" align="center" valign="middle" class="active" >
       		   <div><a class="navlinkfarbe" href="index.php">Home</a></div></td>
        <td width="70" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="aktuelles.php">Aktuelles</a></div></td>
        <td width="55" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="team.php">Team</a></div></td>
        <td width="57" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="kurse.php">Kurse</a></div></td>
        <td width="79" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="therapien.php">Therapien</a></div></td>
        <td width="133" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="bewegdich.php">&quot;beweg Dich e.V&quot;</a></div></td>
        <td width="110" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="firmenkunden.php">Firmenkunden</a></div></td>
        <td width="64" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="kontakt.php">Kontakt</a></div></td>
        <td width="381" height="33" align="center" valign="middle" background="/images/nav-norm.gif" class="navnorm">&nbsp;</td>
      </tr>
    </table>
  </div>

</div>


<div id="content">

  <table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="200" align="center" valign="top">
      
      <div id="submenue">
      
      <strong>Submenülinks</strong><br />
      <br />
      <a href="#" class="subnavlink">Link1</a><br />
      <a href="#" class="subnavlink">Link2</a><br />
      <a href="#" class="subnavlink">Link3</a><br />
      <a href="#" class="subnavlink">Link4</a><br />
      <a href="#" class="subnavlink">Link5</a><br />
      <br />
      
      <div id="partnerrahmen"><strong>Koorparationen<br />
      </strong><br />
        <a href="#" class="subnavlink">sasas</a><br />
        <a href="#" class="subnavlink">aas</a><br />
        <a href="#" class="subnavlink">asas</a><br />
        <a href="#" class="subnavlink">dfd        </a></div>
      </div>
      
      </td>
      <td width="690" align="left" valign="top"><p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p></td>
      <td style="background-repeat:repeat-x;" background="images/background-endless.jpg">&nbsp;</td>
    </tr>
  </table>
</div>

<div id="footer">muuuuuuuuuuuuh</div>

</div>
</body>

HTML-Code:

html,body {
height: 100%;
}

#page {
	height: 100%; /* das hier fÃ¼r den ie */
}

/* folgende anweisung wird nicht vom ie interpretiert */

#page[id] {
    height:auto;
    min-height:100%;
}
	
html
{
	height:100%;
	margin:0;
	padding:0;
}
	
body
{
	height:100%;
	margin:0;
	padding:0;
}

#page
{
	width: 100%;
	margin: 0 auto;
	min-height:100%;
	position: relative;
}

/* Content Div */
#content
{
	position: relative;
	top: 0px;
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	height: 400px;
}
#inhaltsdiv
{
	position: relative;
	top: 70px;
	height:300px;
}

/* Header Div */
#header
{
	padding:0;
	text-align:left;
	position: relative;
	background-image:url(images/head-bg.jpg);
	height:68px;
}

/* Footer Div */
#footer
{
	position:absolute;
	background-image:url(images/footer-bg.jpg);
	background-color:#ccc;
	margin: 0 auto;
	width: 100%;
	clear: both; 
	bottom: 0px;
	height: 18px;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	word-spacing: normal;
	text-align: center;
	letter-spacing: 2px;
	line-height: 18px;
	font-size: 0.6em;
	font-style: normal;
}

/* Navigation Div */
#navigation {
	position:relative;
	left:0px;
	top:35px;
	width:100%;
	height:33px;
	max-height:33px;
	overflow:hidden;
}
 
/* Submenü Div */
#submenue {
	position:relative;
	left:0px;
	top:120px;
	width: 180px;
	height:300px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #666666;
	font-style:italic;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	letter-spacing: 1px;
	line-height: 1em;
	font-size: 0.7em;
	overflow: visible;
	
}

#partnerrahmen {
	position:relative;
	left: 10px;
	width:115px;
	border: 10px solid #f4f4f4;
	padding: 10px;
	font-family: Arial;
	color: #666666;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	overflow: visible;
}
#contentrahmen {
	position:relative;
	left: 10px;
	width:115px;
	border: 10px solid #f4f4f4;
	padding: 10px;
	font-family: Arial;
	color: #666666;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	overflow: visible;
}

Doch es funktioniert immernoch nicht

Habe auch alles, bis auf den Footer relative positioniert. Da es zuweilen damit schonmal besser aussah. Bin anscheinend einfach zu blöd

Boris · 09.03.2008, 14:22

Du musst komplett ohne absolute und relative positionierungen auskommen und mit float + clear arbeiten.

Precifix · 09.03.2008, 14:27

ich hatte im Contentbereich auch schonmal 3 divs die da rumfloateten, doch sobald das Browserfenster im der Breite kleiner wurde, ordneten sich die Divs untereinander an :/

Adromir · 09.03.2008, 14:45

Vieleicht auch noch mal überlegen, welche Divs essentiel nötig sind, und wie man die Struktur noch weiter vereinfachen kann.

Precifix · 09.03.2008, 14:58

mit folgendem Codezusatz klappts, und ich weiß nicht wieso, aber geht

HTML-Code:

#content
{
        position: relative;
        top: 0px;
        background-image: url(images/background.jpg);
        background-repeat: no-repeat;
        height: 400px;
}

#content[id] {
        height:auto;
        min-height:400px;
}

Adromir · 09.03.2008, 16:09

Manchmal ist das so. Ich hatte es auch mal bei einer Seite, daß was nicht passte. Ich hatte schon angefangen ne Browserweiche einzubauen und hatte eine leere CSS-Datei eingebaut. Plötzlich lief es..