Footer immer unter Inhalt

Webdesign & Technik HTML & CSS
1

Hallo
Ich habe ein Problem und zwar wenn der Inhalt der Linken oder Rechten Box
Größer als der Inhalt ist überblendet die Linke oder Rechte Box die Fusszeile einfach weil sich der Footer nach dem Inhalt richtet

So ich habe gegoogelt und Rumprobiert ohne ende aber wie kriege ich es hin das der Footer immer am Ende ist ohne das ich den Inhalt für jede Seite so Anpassen muss das er der Längste ist ?

Hier der Quelltext

Index:

[code]

Seven Transporte,Die Virtuelle Spedition. Newspage 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="content-language" content="de" />
<meta name="author"           content="Sebastian Schaffrath " />
<meta name="publisher"        content="Sebastian Schaffrath " />
<meta name="copyright"        content="Alle Seiten Unterliegen dem Copyright von Sebastian Schaffrath " />

<meta name="keywords"         content="virtuelle spedition,virtuelle spedition ets,gts,ets,euro truck simulator,euro truck simulator download,euro truck simulator spiel,international spedition,internationale spedition,lkw transport,lkw transporte,public teamspeak server,spedition,speditionen,transport,transporte,umzug spedition,umzug transport" />
<meta name="description"      content="Virtuelle Spedition ETS GTS " />
<meta name="page-topic"       content=" " />
<meta name="page-type"        content=" " />
<meta name="language"         content="Deutsch" />
<meta name="revisit"          content="After 2 days" />
<meta name="robots"           content="INDEX,FOLLOW" />
<meta name="google-site-verification" content="zR7C8U4SglSs-H1fOE-XathXfSgdEAFIM9g1SuhE040" />

<link rel="stylesheet" href="design.css" type="text/css"/>

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<ul><!-- öffnet Startseite -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/index.php">Startseite</a></li>

</ul><!--schließt Startseite-->



<ul><!-- öffnet den Block Firmeninfos -->

<li><!-- öffnet den Block Firmeninfos -->

<a>Projektinfos</a>

<ul><!-- öffnet die Klappnavi von Firmeninfos -->

<li><a href="http://www.sschaffrath.bplaced.de/firmeninfos/tagebuch.php">Entwicklertagebuch</a></li>

<li><a href="http://www.sschaffrath.bplaced.de/firmeninfos/firmeninfos.php">Firmeninfos</a></li>


<li><a href="http://www.sschaffrath.bplaced.de/firmeninfos/voraussetzungen.php">Voraussetzungen <img src="http://www.sschaffrath.bplaced.de/pfeil.png" alt="Bild" width="10" height="10"/> </a>
    
        <ul>
            <li><a href="http://www.sschaffrath.bplaced.de/firmeninfos/voraussetzungen/ets.php">Euro Truck Simulator</a></li>
            
            <li><a href="http://www.sschaffrath.bplaced.de/firmeninfos/voraussetzungen/gts.php">German Truck Simulator</a></li>
        </ul>
        
</li>

</ul><!-- schließt die Klappnavi von Firmeninfos -->

</li><!-- schließt die Listeneinträge von Firmeninfos -->

</ul><!--schließt den ersten Themenblock-->




<ul><!-- öffnet den Block Videos -->

<li><!-- öffnet den Block Videos -->

<a>Videos</a>

<ul><!-- öffnet die Klappnavi von Videos -->

<li><a href="http://www.sschaffrath.bplaced.de/videos/gtsvideo.php">German Truck Simulator</a></li>

<li><a href="http://www.sschaffrath.bplaced.de/videos/etsvideo.php">Euro Truck Simulator</a></li>

<li><a href="http://www.sschaffrath.bplaced.de/videos/stvideo.php">Seven Transporte</a></li>

<li><a href="http://www.sschaffrath.bplaced.de/videos/ets-lsvideo.php">ETS-LS Forum</a></li>


</ul><!-- schließt die Klappnavi von Videos -->

</li><!-- schließt die Listeneinträge von Videos -->

</ul><!--schließt den zweiten Themenblock-->

 

<ul><!-- öffnet Team -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/team/team.php">Team</a></li>

</ul><!--schließt Team-->



<ul><!-- öffnet Kontakt -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/kontakt/kontakt.php">Kontakt</a></li>

</ul><!--schließt Kontakt-->




<ul><!-- öffnet Partnerseiten -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/partnerseiten.php">Partnerseiten</a></li>

</ul><!--schließt Partnerseiten-->      





<ul><!-- öffnet TS-Viewer -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/ts-viewer.php">TS-Viewer</a></li>

</ul><!--schließt TS-Viewer-->




<ul><!-- öffnet Impressum -->

<li><a class="direkt" href="http://www.sschaffrath.bplaced.de/impressum.php">Impressum</a></li>

</ul><!--schließt Impressum-->

Newsbox:


27.11.2009

Update des Tagebuchs

Musik-Player


Dies ist die Newspage von:

Seven Transporte,Die Virtuelle Spedition für ETS und GTS.


Um weitere Informationen zu erhalten klicken sie Bitte auf Entwicklertagebuch


Wenn ihr über Seven Transporte Diskutieren oder eure Meinungen austauschen wollt folgt Bitte diesem Link:

Forum



MFG. Seven Transporte Team


Eröffnung der Spedition:


01.01.2010

Newsletter eintragen:

Ihre E-Mailadresse:
 

  ETS-LS Forum                                                              © Sebastian Schaffrath 2009


[/code]

Design.css

[code]html,body {
height:100%;
margin:0;
padding:0;
text-align:center;
}

html {

}

body {
background-image: url(design/hintergrund_global.jpg)
}

  • {
    margin:0;
    padding:0;
    }
    #body {
    background-color:#A1A1A1;
    height:auto;
    width:890px;
    margin: 0 auto 0 auto;
    text-align:left;
    }

#kopfbereich {
background: url(design/seven.jpg);
height:150px;
width:100%;
padding:0px;
margin:0px;
}

#kopfbereich p {
color:#26272B;
text-align:right;
font-size:2em;
padding:0.4em 0.4em 0 0;
}

#schatten {
background:url(design/schattenwurf-grau-v.png) repeat-x;
height:5px;

}

#steuerung {
width: 888px ;
clear: right;
border:1px solid #aaa;
margin-bottom: 1px;
padding: 0px 0px 0px 0px;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
float: left;
}

#steuerung ul {
float: left;
list-style-type: none;
}

/–definiert die Blocküberschriften–/
#steuerung p {
text-decoration: none;
padding: 5px 10px;
display: block;
text-align: center;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
color: black;

}

/–definiert die “Drop-Down-Schrift” im Hoverzustand–/
#steuerung p:hover {
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

/–definiert die “Drop-Down-Links” im Normalzustand–/
#steuerung a {
text-decoration: none;
padding: 5px 10px;
display: block;
text-align: center;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
color: black;
}

#steuerung img {
border: none;
}

/–definiert die “Drop-Down-Links” im Hoverzustand–/
#steuerung a:hover {
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern–
*/

#steuerung li {
position: relative;
}

/–versteckt die “Drop-Down-Links”, solange nicht gehovert wird–/
#steuerung ul ul {
position: absolute;
z-index: 2;
width: 200px;
display: none;
}

#steuerung ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

/–lässt die Dropdown-Links beim Hovern erscheinen–/
#steuerung ul li:hover ul {
display: block;
}

div#steuerung ul ul,
div#steuerung ul li:hover ul ul,
div#steuerung ul ul li:hover ul ul
{display: none;}

div#steuerung ul li:hover ul,
div#steuerung ul ul li:hover ul,
div#steuerung ul ul ul li:hover ul
{display: block;}

/–nur für IE-Versionen kleiner gleich 6 erkennbar–/

  • html #steuerung ul li{
    float: left;
    width: 888px;

}

/–nur für IE 7 erkennbar–/
*+ html #steuerung ul li {
float: left;
width: 888px;

}

/–bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente–/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #steuerung ul li a {
height: 1%;
}

/–definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich–/

#steuerung a.direkt:link {
text-align: center;
color: black;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
}

/–definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich–/

#steuerung a.direkt:hover {
color: black;
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

#navigation {
height:auto;
position:absolute;
clear: left;
width:100%;
background-color:#B7B7B7;
top:121px;
width:180px;
margin:0px;
padding:0px;
margin-top:65px;
}

#inhalt {
text-align: center;
height:auto;
background-color:#A1A1A1;
margin-top:0px;
margin-left:180px;
margin-right:180px;
}

#inhalt h1, h2, h3, p{
padding-bottom:0.7em;
}

#inhalt ul {
padding-bottom:0.7em;
}

#inhalt ul {
padding-left:2em;
}

#forum {
text-align: center;
height:auto;
background-color:#A1A1A1;

}

#tagebuch {
height:450px;
overflow:scroll;
text-align: center;
background-color:#A1A1A1;
margin-top:0px;
overflow-x:hidden;
}

#navigation2 {
height:auto;
position:absolute;
width:100%;
background-color:#B7B7B7;
top: 121px;
width:180px;
margin:0px;
padding:0px;
margin-left: 710px;
margin-right: 0px;
margin-top: 65px;
}

#fussbereich {
clear:both;
height: auto;
width:100%;
margin-top:0px;
padding: 1px 0;
background: url(“design/navi_bg0.png”) ;

}

a {
color: #1b65c8;
}

a:hover {
color: #98bd07;
}

a:visited {
color: #0000FF;
}
[/code]

2

Nun, das clear:both wird zwar die floats aufheben, natürlich aber
nicht die absolut positionierten Sachen, die sind aus dem
Textfluß genommen und haben mit der Anordnung vom Rest
nichts mehr zu tun.

Da kannst du nicht erwarten, daß sich solch verschiedenen
Konzepte miteinander vereinbaren lassen.

Du kannst natürlich die zentralen Teile alle absolut positionieren
oder eben ganz auf absolute Positionierung verzichten, notfalls
auch auf float. Ganz gewiß ist dann das, was als letztes im
Quelltext steht, auch immer ganz unten in der Darstellung ;o)

3

Was bedeutet das jetzt ?

Also das float:left; in der Steuerung macht keine Probleme es sind halt die zwei kästen die die id navigation und navigation2 haben machen halt probleme weil sich der footer halt ausschließlich nach dem was in id inhalt ist richtet

4

So
Hab jetzt was gefunden was mir eklärt wieso es nicht funzt
so also wenn man die elemente fest positioniert dann richtet sichs nach dem inhalt so
also funktioniert es nur mit float und clear aber wie bau ich das jetzt um auf float und clear?

5

So nun hab ich auch das gelöst man man

Aber wie krieg ich jetzt ein bissen abstand zum footer?

Hier die Neue CSS

[code]html,body {
height:100%;
margin:0;
padding:0;
text-align:center;
}

html {

}

body {
background-image: url(design/hintergrund_global.jpg)
}

  • {
    margin:0;
    padding:0;
    }
    #body {
    background-color:#A1A1A1;
    height:auto;
    width:890px;
    margin: 0 auto 0 auto;
    text-align:left;
    }

#kopfbereich {
background: url(design/seven.jpg);
height:150px;
width:100%;
padding:0px;
margin:0px;
}

#kopfbereich p {
color:#26272B;
text-align:right;
font-size:2em;
padding:0.4em 0.4em 0 0;
}

#schatten {
background:url(design/schattenwurf-grau-v.png) repeat-x;
height:5px;

}

#steuerung {
width: 888px ;
clear: right;
border:1px solid #aaa;
margin-bottom: 1px;
padding: 0px 0px 0px 0px;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
float: left;
}

#steuerung ul {
float: left;
list-style-type: none;
}

/–definiert die Blocküberschriften–/
#steuerung p {
text-decoration: none;
padding: 5px 10px;
display: block;
text-align: center;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
color: black;

}

/–definiert die “Drop-Down-Schrift” im Hoverzustand–/
#steuerung p:hover {
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

/–definiert die “Drop-Down-Links” im Normalzustand–/
#steuerung a {
text-decoration: none;
padding: 5px 10px;
display: block;
text-align: center;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
color: black;
}

#steuerung img {
border: none;
}

/–definiert die “Drop-Down-Links” im Hoverzustand–/
#steuerung a:hover {
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern–
*/

#steuerung li {
position: relative;
}

/–versteckt die “Drop-Down-Links”, solange nicht gehovert wird–/
#steuerung ul ul {
position: absolute;
z-index: 2;
width: 200px;
display: none;
}

#steuerung ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

/–lässt die Dropdown-Links beim Hovern erscheinen–/
#steuerung ul li:hover ul {
display: block;
}

div#steuerung ul ul,
div#steuerung ul li:hover ul ul,
div#steuerung ul ul li:hover ul ul
{display: none;}

div#steuerung ul li:hover ul,
div#steuerung ul ul li:hover ul,
div#steuerung ul ul ul li:hover ul
{display: block;}

/–nur für IE-Versionen kleiner gleich 6 erkennbar–/

  • html #steuerung ul li{
    float: left;
    width: 888px;

}

/–nur für IE 7 erkennbar–/
*+ html #steuerung ul li {
float: left;
width: 888px;

}

/–bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente–/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #steuerung ul li a {
height: 1%;
}

/–definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich–/

#steuerung a.direkt:link {
text-align: center;
color: black;
background: url(“design/navi_bg0.png”) bottom left repeat-x ;
}

/–definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich–/

#steuerung a.direkt:hover {
color: black;
background: url(“design/navi_bg1.png”) bottom left repeat-x ;
}

#navigation {
height:auto;
background-color:#B7B7B7;
top:121px;
margin:0px;
padding:0px;
width: 21%;
float: left;
overflow: auto;
}

#inhalt {
width: 58%;
float: left;
overflow: auto;
text-align: center;
height:auto;
background-color:#A1A1A1;
}

#inhalt h1, h2, h3, p{
padding-bottom:0.7em;
}

#inhalt ul {
padding-bottom:0.7em;
}

#inhalt ul {
padding-left:2em;
}

#forum {
text-align: center;
height:auto;
background-color:#A1A1A1;

}

#tagebuch {
height:450px;
overflow:scroll;
text-align: center;
background-color:#A1A1A1;
margin-top:0px;
overflow-x:hidden;
}

#navigation2 {
width: 21%;
float: left;
overflow: auto;
height:auto;
background-color:#B7B7B7;
top: 121px;
margin:0px;
padding:0px;
}

#fussbereich {
clear:both;
height: auto;
width:100%;
margin-top:0px;
padding: 1px 0;
background: url(“design/navi_bg0.png”) ;

}

a {
color: #1b65c8;
}

a:hover {
color: #98bd07;
}

a:visited {
color: #0000FF;
}
[/code]

6

So
Habe das nun auch mit margin-bottom lösen können

PS:Beim ersten Versuch mit margin-bottom hatt der browser das noch nicht aktualisiert ^^