✔ Ich bin zu blöd!

Paulischroeder · 13. April 2007

Hallo Ihr,

Ich habe erst vor einen paar Tagen mit CSS angefangen und bin auch schon gut zurecht gekommen nur JETZT kommt es ich arbeite mit Include in meinen Seiten und habe eine Footer Ebene wenn sich jetzt sie Content Ebene (durch den Inhalt) verlängert rutscht die Footer Ebene nicht mit runter sondern bleibt auf ihrer Stelle stehen! Wie bekomme ich das hin das die Footer Ebene sich mit runter bewegt.

Hier der Link
http://paul-schroeder.com/VVP/neu.php?page=Fuhrpark

Bitte Helft mir

Grüße
Paul

Maik · 13. April 2007

Hi,

orientiere dich mal an dem gezeigten Lösungsweg in dem Thread Wie den Footer immer unten anzeigen lassen in Webseite?.

Paulischroeder · 13. April 2007

Hm.. Irgendwie komme ich damit nich klar *solangsam wird das peinlich*

Dieser BE****** Footer soolll endlich runter rutschen *g* *ich wünschte ich hätte Zauberkräfte* LoL

Maik · 13. April 2007

Okay, hier nochmal das Grundkonzept:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Für moderne Browser */
height: auto !important; /* Für moderne Browser */
height: 100%; /* Für IE */
background: #e9e9e9;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

div#footer {
position: absolute;
bottom: 0;
left: 0;
width:100%;
background: #cacaca;
}
-->
</style>

</head>
<body>

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

</body>
</html>

Paulischroeder · 13. April 2007

Oh mann wie Peinlich geht irgendwie nicht!

guck dir am besten meinen Quelltext an bau es irgendwie so ein das es funt *rot werdn* *verzweifel* http://www.Paul-Schroeder.com/VVP/neu.php

Sorry das das mit mir ein bissel länger dauert

Grüße Paul

Maik · 13. April 2007

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 {
margin: 0;
padding: 0;
height: 100%;
}

div#wrapper {
position: relative;
margin: 0 auto;
width: 796px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
}

#Copyright {
        position:absolute;
        width:795px;
        height:23px;
        z-index:8;
        left: 0px;
        bottom: 0px;
}

#Header {
        position:absolute;
        width:796px;
        height:110px;
        z-index:1;
        left: 12px;
        top: 2px;
}
#Bus2 {
        position:absolute;
        width:208px;
        height:56px;
        z-index:3;
        left: 599px;
        top: 107px;
}
#Bus1 {
        position:absolute;
        width:56px;
        height:36px;
        z-index:3;
        left: 544px;
        top: 107px;
}
#Layer4 {
        position:absolute;
        width:242px;
        height:82px;
        z-index:2;
        top: 255px;
        left: 74px;
}
#Start {
        position:absolute;
        width:176px;
        height:39px;
        z-index:4;
        top: 108px;
        visibility: visible;
        overflow: visible;
        left: 13px;
}
#Navi {
        position:absolute;
        width:209px;
        height:115px;
        z-index:3;
        background-image: url(Bilder/navi.jpg);
        left: 599px;
        top: 162px;
}
#GB {
        position:absolute;
        width:184px;
        height:39px;
        z-index:4;
        left: 182px;
        top: 108px;
}
#Forum {
        position:absolute;
        width:174px;
        height:39px;
        z-index:5;
        left: 367px;
        top: 108px;
}
#Rundung {
        position:absolute;
        width:209px;
        height:19px;
        z-index:6;
        left: 599px;
        top: 277px;
}

#Content {
        position:absolute;
        width:577px;
        height:288px;
        z-index:7;
        left: 19px;
        top: 150px;
        background-color: #FFFFFF;
}
#Layer1 {
        position:absolute;
        width:796px;
        height:332px;
        z-index:2;
        top: 107px;
        background-color: #FFFFFF;
        left: 12px;
}
body {
        background-image: url(Bilder/bg.jpg);
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="Header"><img src="Bilder/header.jpg" width="797" height="109" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Bus2"><img src="Bilder/bus1.jpg" width="209" height="55" /></div>
<div id="Forum"><img src="Bilder/Forum.jpg" width="170" height="36" /></div>
<div id="Copyright"><img src="http://www.paul-schroeder.com/VVP/Bilder/footer.jpg" width="797" height="21" /></div>
<div id="Content">
  <p>

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="50%" background="Bilder/bg.jpg" class="Stil1 Stil17">Neuigkeiten</td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="3" background="Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil11 Stil19 Stil21"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /> EILMELDUNG </strong></span></td>
  </tr>
  <tr>
    <td width="50%" colspan="3" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil19 Stil16">Es gibt wieder grünes Licht! Es geht wie gewohnt weiter! Euer S+W Team <br />
    </p></td>
  </tr>
  <tr></tr>
</table><br />
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="3" background="Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil7 Stil11 Stil19"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /> Unser Forum ist online! </strong></span></td>
  </tr>
  <tr>
    <td width="50%" colspan="3" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil19 Stil16">Unser neues <a href="http://www.Paul-Schroeder.com/VVP/Forum" class="Stil16">Forum</a> ist soeben Online gegangen ihr erreicht es wenn ihr entweder oben auf den Button &quot;Forum&quot; klickt oder Rrechts in unserer Navigation! </p></td>
  </tr>
  <tr></tr>
</table>
<BR />
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr></tr>
  <tr>
    <td background="Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil7 Stil11 Stil19"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /> Herzlich Willkommen beim Schröder &amp; Wottringer Verkehrsbetrieb </strong></span></td>
  </tr>
  <tr>
    <td width="50%" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil16 Stil19">Herzlich Willkommen beim Schröder &amp; Wottringer Verkehrsbetrieb. Bei unserem Betrieb handelt es sich um einen Virtuellen Verkehrsbetrieb, wir wollen versuchen das Busleben im PC genauso dazustellen wie es auch die Realität zeigt. Das Kostenlose PC Spiel vBus macht es uns möglich dieses zutun! Haben sie Interesse an vBus gewonnen? Laden sie es sich Kostenlos unter <a href="http://www.vbusdepot.de" target="_blank" class="Stil16"><u>vBusDepot.de</u></a> herunter! Weitere Infos finden sie in unserem Forum. Ihr S+W Team </p>      </td>
  </tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr></tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr></tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellpadding="1" cellspacing="0" class="infolink" id="body_templ">
  <tr></tr>
  <tr class="Stil2"></tr>
</table>
<p align="center">&nbsp;</p>
</p>
</div>
<p>&nbsp;</p>
<div id="Bus1"><img src="Bilder/bus2.jpg" width="56" height="36" /></div>
<div id="Rundung"><img src="Bilder/rundung.jpg" width="209" height="19" /></div>
<p>&nbsp;</p>
<div id="Start"><img src="Bilder/Startseite.jpg" width="178" height="36" /></div>
<div id="Navi">
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<div id="GB"><img src="Bilder/GB.jpg" width="184" height="36" /></div>
</div> <!-- END DIV WRAPPER -->
<div id="Layer1"></div>
</body>
</html>

Maik · 13. April 2007

Nachtrag: Du solltest auf die fixe Höhenangabe für das DIV Content verzichten, damit die Box bei zunehmenden Inhalt auch "mitwachsen" kann.

Paulischroeder · 13. April 2007

wenn ich das so einbaue fällt das ganze design zusammen

grüße paul

Maik · 13. April 2007

Dann wird wohl mit dem übrigen Teil etwas nicht stimmen, wie beispielsweise dem includierten Bereich, den du mit einem kompletten HTML-Dokument in das DIV Content lädst. Stattdessen wird hier nur das includiert, was innerhalb des Dokumentkörpers <body> ... </body> notiert ist.

Maik · 13. April 2007

Versuch es mal hiermit:

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">
<!--
#Header {
        position:absolute;
        width:796px;
        height:110px;
        z-index:1;
        left: 0;
        top: 2px;
}
#Bus2 {
        position:absolute;
        width:208px;
        height:56px;
        z-index:8;
        left: 599px;
        top: 107px;
}
#Bus1 {
        position:absolute;
        width:56px;
        height:36px;
        z-index:8;
        left: 544px;
        top: 107px;
}
#Layer4 {
        position:absolute;
        width:242px;
        height:82px;
        z-index:2;
        top: 255px;
        left: 74px;
}
#Start {
        position:absolute;
        width:176px;
        height:39px;
        z-index:4;
        top: 108px;
        visibility: visible;
        overflow: visible;
        left: 13px;
}
#Navi {
        position:absolute;
        width:209px;
        height:115px;
        z-index:3;
        background-image: url(Bilder/navi.jpg);
        left: 599px;
        top: 162px;
}
#GB {
        position:absolute;
        width:184px;
        height:39px;
        z-index:4;
        left: 182px;
        top: 108px;
}
#Forum {
        position:absolute;
        width:174px;
        height:39px;
        z-index:5;
        left: 367px;
        top: 108px;
}
#Rundung {
        position:absolute;
        width:209px;
        height:19px;
        z-index:8;
        left: 599px;
        top: 277px;
}
#Copyright {
        width:795px;
        height:23px;
}
#Content {
        position:absolute;
        width:577px;
        min-height:288px; /* Mindesthöhe für moderne Browser */
        height:auto !important; /* Für moderne Browser */
        height:288px; /* Mindesthöhe für IE */
        z-index:7;
        left: 19px;
        top: 150px;
        background-color: #FFFFFF;
}
#Layer1 {
        position:absolute;
        width:796px;
        height:332px;
        z-index:2;
        top: 107px;
        background-color: #FFFFFF;
        left: 12px;
}
body {
        background-image: url(Bilder/bg.jpg);
}
-->
</style>
</head>

<body>

<div id="Header"><img src="http://www.paul-schroeder.com/VVP/Bilder/header.jpg" width="797" height="109" /></div>
<div id="Bus2"><img src="http://www.paul-schroeder.com/VVP/Bilder/bus1.jpg" width="209" height="55" /></div>
<div id="Forum"><img src="http://www.paul-schroeder.com/VVP/Bilder/Forum.jpg" width="170" height="36" /></div>

<div id="Content">
  <div id="include">
   
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="50%" background="http://www.paul-schroeder.com/VVP/Bilder/bg.jpg" class="Stil1 Stil17">Neuigkeiten</td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="3" background="http://www.paul-schroeder.com/VVP/Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil11 Stil19 Stil21"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /> EILMELDUNG </strong></span></td>
  </tr>
  <tr>
    <td width="50%" colspan="3" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil19 Stil16">Es gibt wieder grünes Licht! Es geht wie gewohnt weiter! Euer S+W Team <br />
    </p></td>
  </tr>
  <tr></tr>
</table><br />
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="3" background="http://www.paul-schroeder.com/VVP/Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil7 Stil11 Stil19"><strong><img src="http://www.paul-schroeder.com/VVP/Bilder/punkt.jpg" width="5" height="5" /> Unser Forum ist online! </strong></span></td>
  </tr>
  <tr>
    <td width="50%" colspan="3" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil19 Stil16">Unser neues <a href="http://www.Paul-Schroeder.com/VVP/Forum" class="Stil16">Forum</a> ist soeben Online gegangen ihr erreicht es wenn ihr entweder oben auf den Button &quot;Forum&quot; klickt oder Rrechts in unserer Navigation! </p></td>
  </tr>
  <tr></tr>
</table>
<BR />
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr></tr>
  <tr>
    <td background="http://www.paul-schroeder.com/VVP/Bilder/bg.jpg" class="Stil1"><span class="Stil1 Stil7 Stil11 Stil19"><strong><img src="/Bilder/punkt.jpg" width="5" height="5" /> Herzlich Willkommen beim Schröder &amp; Wottringer Verkehrsbetrieb </strong></span></td>
  </tr>
  <tr>
    <td width="50%" rowspan="2" valign="top" bgcolor="E0E0E0" class="Stil56 Stil65"><p align="justify" class="Stil2 Stil11 Stil16 Stil19">Herzlich Willkommen beim Schröder &amp; Wottringer Verkehrsbetrieb. Bei unserem Betrieb handelt es sich um einen Virtuellen Verkehrsbetrieb, wir wollen versuchen das Busleben im PC genauso dazustellen wie es auch die Realität zeigt. Das Kostenlose PC Spiel vBus macht es uns möglich dieses zutun! Haben sie Interesse an vBus gewonnen? Laden sie es sich Kostenlos unter <a href="http://www.vbusdepot.de" target="_blank" class="Stil16"><u>vBusDepot.de</u></a> herunter! Weitere Infos finden sie in unserem Forum. Ihr S+W Team </p>  </td>
  </tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr></tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr></tr>
  <tr></tr>
</table>
<table width="100%" border="0" cellpadding="1" cellspacing="0" class="infolink" id="body_templ">
  <tr></tr>
  <tr class="Stil2"></tr>
</table>

  </div><!-- END DIV include -->
  <div id="Copyright"><img src="http://www.paul-schroeder.com/VVP/Bilder/footer.jpg" width="797" height="21" /></div>
</div><!-- END DIV Content -->

<div id="Bus1"><img src="http://www.paul-schroeder.com/VVP/Bilder/bus2.jpg" width="56" height="36" /></div>
<div id="Rundung"><img src="http://www.paul-schroeder.com/VVP/Bilder/rundung.jpg" width="209" height="19" /></div>
<div id="Start"><img src="http://www.paul-schroeder.com/VVP/Bilder/Startseite.jpg" width="178" height="36" /></div>
<div id="Navi">
  <p>&nbsp;</p>
</div>
<div id="GB"><img src="http://www.paul-schroeder.com/VVP/Bilder/GB.jpg" width="184" height="36" /></div>
<div id="Layer1"></div>

</body>
</html>

✔ Ich bin zu blöd!

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Paulischroeder

Mitglied

Maik

Maik

Paulischroeder

Mitglied

Maik

Maik

Neue Beiträge