✔ Footter in der Webseite richtig nach unten setzen

Status
Nicht offen für weitere Antworten.
N

Nordglanz

Grünschnabel
Hallo, ich hab mich hier mal umgeschaut und nach einer lösung gesucht um den Footer immer unten anzeigen zu lassen, auch wenn die Seite einen Scrollbalken beinhaltet, soll der Footer immer unten an der Seite angerichtet werden.

Hier mal mein ganzer HTML Code
Code: 
<html>
    <head>
        <title>LAN-Party</title>
        <link rel="stylesheet" type="text/css" href="page.css" />
        <meta http-equiv="Content-Type"
                        content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
            <div id="container">

         	  <div id="content">
            <div id="banner">
     <center><img src="http://www.tutorials.de/forum/images/absurd_logo2.jpg"  alt="Der Banner" border="0"  /></center>
 
            </div>
            <div id="links">
<!-- die Datei menu.php -->
<center>
<img src="http://www.tutorials.de/forum/images/dd.JPG" border="0" alt="DD" /><br><br>
<a href="index.php">News</a><br><br>
<a href="index.php?section=gb">Gästebuch</a><br><br>

<a href="index.php?section=admin">Admin Login</a><br><br>
<a href="index.php?section=workspace">Workspace</a>
</center>            </div>
            <div id="mitte">
<b><i><h2>News</h2></i></b>
<div class="newseintrag">
    <div class="Titel">
Titel: 
2te Testnews    </div>
    <div class="Datum">

Datum: 
2007-10-21 15:37:32    </div>
    <div class="Inhalt">
Jau, noch eine!    </div>
</div>
<div class="newseintrag">
    <div class="Titel">
Titel: 
Die erste News    </div>
    <div class="Datum">
Datum: 
2007-10-21 15:37:16    </div>
    <div class="Inhalt">

Die erste Testnews    </div>
</div>
            </div>
            <br style="clear:both;" />
       </div>
		 <div id="rechts">
Gäste Online: 1<br />            <div id="trenn_linie">
            </div>
Mitglieder: 2            <div id="trenn_linie">

            </div>
	     </div>
       </div>
       <div id="footer">
TEXT
       </div>
       </div>
    </body>
</html>

und die CSS Codes zum Container, HTML; Body, Content und Footer

Code: 
html, body {
     margin: 0px;
     padding: 0px;
     height: 100%;
	 background-color: black;
}

#container {
    width: 100%;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
	margin: auto;
}

#content {
	position: relative;
	width: 100%;
	padding-bottom: 40px;
}

#footer {
    background-color: green;
    position:absolute;
    width:100%;
    bottom: 0;
	height: 40px;
}

Vielen Dank für eure Antworten
 
Zuletzt bearbeitet:
Hi,

ich hab den HTML-Code mal ein bischen zurechtgerückt und aufgeräumt, denn ein falsch gesetztes </div>-Tag war der Grund, dass der Footer bei zunehmenden Inhalt nicht nach unten rückt:

Code: 
<html>
<head>
<title>LAN-Party</title>
<link rel="stylesheet" type="text/css" href="page.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="container">
     <div id="content">
          <div id="banner">
               <center><img src="http://www.tutorials.de/forum/images/absurd_logo2.jpg"  alt="Der Banner" border="0"  /></center>
          </div>
          <div id="links">
          <!-- die Datei menu.php -->
               <center><img src="http://www.tutorials.de/forum/images/dd.JPG" border="0" alt="DD" /><br><br>
               <a href="index.php">News</a><br><br>
               <a href="index.php?section=gb">Gästebuch</a><br><br>
               <a href="index.php?section=admin">Admin Login</a><br><br>
               <a href="index.php?section=workspace">Workspace</a>
               </center>
          </div>
          <div id="mitte">
               <b><i><h2>News</h2></i></b>
               <div class="newseintrag">
                    <div class="Titel">Titel:2te Testnews</div>
                    <div class="Datum">Datum: 2007-10-21 15:37:32</div>
                    <div class="Inhalt">Jau, noch eine!</div>
               </div>
               <div class="newseintrag">
                    <div class="Titel">Titel:Die erste News</div>
                    <div class="Datum">Datum: 2007-10-21 15:37:16</div>
                    <div class="Inhalt">Die erste Testnews</div>
               </div>
          </div>
          <div id="rechts">
               Gäste Online: 1<br />
               <div id="trenn_linie"></div>
               Mitglieder: 2
               <div id="trenn_linie"></div>
          </div>
     </div>
     <div id="footer">TEXT</div>
</div>
</body>
</html>
Desweiteren muss die Floatumgebung zum Abschluss gecleart werden - siehe http://positioniseverything.net/easyclearing.html:

Code: 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV #content aufgerufen:

Code: 
<div id="content" class="clearfix"> ... </div>
 
Hallo Maik, nach dem ich jetz den index überarbeitet habe.
Und die CSS berarbeitet habe, ist der Footer immer oben unter dem header.

Ich schick dir jetz noch mal meinen HTML Code, vllt hab ich ja was flasch gemacht.

Code: 
<html>
<head>
        <title>LAN-Party</title>
        <link rel="stylesheet" type="text/css" href="page.css" />
        <meta http-equiv="Content-Type"
                        content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="container">
   <div id="content" class="clearfix">
      <div id="banner">

     <center><img src="http://www.tutorials.de/forum/images/absurd_logo2.jpg"  alt="Der Banner" border="0"  /></center>
 
      </div>
      <div id="links">
<!-- die Datei menu.php -->
<center>
<img src="http://www.tutorials.de/forum/images/dd.JPG" border="0" alt="DD" /><br><br>
<a href="index.php">News</a><br><br>
<a href="index.php?section=gb">Gästebuch</a><br><br>
<a href="index.php?section=admin">Admin Login</a><br><br>
<a href="index.php?section=workspace">Workspace</a>

</center>      </div>
      <div id="mitte">
<b><i><h2>News</h2></i></b>
<div class="newseintrag">
    <div class="Titel">
Titel: 
2te Testnews    </div>
    <div class="Datum">
Datum: 
2007-10-21 15:37:32    </div>
    <div class="Inhalt">

Jau, noch eine!    </div>
</div>
<div class="newseintrag">
    <div class="Titel">
Titel: 
Die erste News    </div>
    <div class="Datum">
Datum: 
2007-10-21 15:37:16    </div>
    <div class="Inhalt">
Die erste Testnews    </div>
</div>

      </div>
		<div id="rechts">
Gäste Online: 1<br />            <div id="trenn_linie">
            </div>
Mitglieder: 2            <div id="trenn_linie">
            </div>
	    </div>
      <div id="footer">

TEXT
      </div>
</div>
</body>
</html>

und nochmal die bearbeitete CSS

Code: 
html, body {
     margin: 0px;
     padding: 0px;
     height: 100%;
	 background-color: black;
}

#container {
    width: 100%;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
	margin: auto;
}

#content {
	position: relative;
	width: 100%;
	padding-bottom: 40px;
}

#footer {
    background-color: green;
    position:absolute;
    width:100%;
    bottom: 0;
	height: 40px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* End hide from IE-mac */

Falls du dir die komplette CSS ansehen möchtest kannst du sie auch unter http://web2640.terra-hosting.de/php/lan-party/page.css finden
 
Außer dem Footer dürfen die übrigen Seitenbereiche (Spalten) nicht absolut positioniert werden:

Code: 
#mitte {
    float:left;
    color:red;
    font-family:verdana,arial,helbetica;
    font-size:70%;
    margin: 20px;
    width: auto;
    margin: 0px 120px;
}

#links {
    width: 120px;
    float: right;
    height: 300px;

}
#rechts {
        width: 100px;
        color: white;
        border: 2px solid red;
}
Diese Änderungen im Stylesheet gepaart mit meinem HTML-Code von heute Morgen, sitzt der Footer zunächst am unteren Fensterrand, und rückt nach unten, wenn der Seiteninhalt zunimmt.
 
Hmm entsetzt muss ich leider feststellen,. das wenn ich mich in den Adminberiech einlogge, ist der Footer wieder nicht ganz unten und die Statistik is unter dem Admin bereich

Also, das Admin Meü funktioniert noch.

Aber wenn ich auf Benutzer bearbeiten klicke, geht es mit dem Footer nicht.

http://www.bilder-hochladen.net/files/4h8h-1-jpg.html

Also Maik ich hab dir mal einen Account erstellt, damit du dir das mal ansehen könntest, ich schick dir die Daten per PN zu.

Die seite wo du dich einloggen kannst ist: http://web2640.terra-hosting.de/php/lan-party/index.php?section=admin
 
Zuletzt bearbeitet:
Und diesmal fehlt das schliessende </div> für #mitte.

Also geh beim nächsten Mal bitte selbständig den HTML-Code durch, oder lass ihn vom Validator überprüfen, damit er dir die Fehler ausgibt, denn der CSS-Code funktioniert ja auf den übrigen Seiten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück