✔ DIV Footer wie setzen?

Status
Nicht offen für weitere Antworten.
H

Hansi321

Mitglied
Hallo, ich hab foldens problem ich probiere schon den ganze tag ein footer zu setzen jedoch ohne erfolg, hab schon einiges probiert und leider wurde er nie angezeigt.

Meine index datei sieht so aus:
PHP: 
<?php
    error_reporting(E_ALL);

    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
    echo "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    echo "<html>\n";
    echo "    <head>\n";
    echo "        <title>Meine Seite</title>\n";
    echo "        <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
    echo "        <meta http-equiv=\"Content-Type\"
                        content=\"text/html; charset=ISO-8859-1\" />\n";
	echo "	  <link REL=\"SHORTCUT ICON\" HREF=\"favicon.ico\">";					
    echo "    </head>\n";
    echo "    <body>\n";

    echo "        <div id=\"root\">\n"; // ganz oberer Div-Holder
    echo "            <div id=\"banner\">\n"; // banner
    include "inc/banner.php";
    echo "            </div>\n";
    echo "            <div id=\"links\">\n"; // linkes Menu
    include "inc/menu.php";
    echo "            </div>\n";
    echo "            <div id=\"mitte\">\n"; // In der Mitte der Inhalt
    include "inc/inhalt.php";
    echo "            </div>\n";
    echo "            <br style=\"clear:both;\" />\n"; // css-float beenden
    echo "       </div>\n";

    echo "    </body>\n";
    echo "</html>\n";
?>

meine css so:
Code: 
#banner {
    height: 180px;
}
#links {
    width: 30%;
    float: left;
}
#mitte {
    width: 69%;
    float:left;
}

Wäre nett wenn mir einer erklären könnte wie es hin bekomme und wo ich den footer setzen muss
 
Warum gibst du denn alles mit echo über php aus?
So geht es doch auch:
Code: 
<?php
error_reporting(E_ALL);
?>
<!DOCTYPE html PUB.....
 
Hi,

ersetze mal das <br>-Tag durch den Footer.

Code: 
#footer {
clear: left;
}

Code: 
<div id="root">
     <div id="banner">banner</div>
     <div id="links">links</div>
     <div id="mitte">mitte</div>
     <div id="footer">footer</div>
</div>
 
@tobee hatte mir nen buch gekauft da stand das so als beispiel drin mit echo, weiss aber auch das es ohne.

aber zurück zum thema, ich hab es nun mit dem footer hin bekommen jedoch will ich den footer fest haben, so das er immer am unter browserrand ist, ist egal auf welchen button man klickt (auch wenn der inhalt in der mitte länger ist da soll man dann runter scrollen können jedoch soll der footer am rand unten bleiben)

Mein code sieht nun so aus:

PHP: 
<?php
    error_reporting(E_ALL);

    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
    echo "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    echo "<html>\n";
    echo "    <head>\n";
    echo "        <title>Meine Seite</title>\n";
    echo "        <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
    echo "        <meta http-equiv=\"Content-Type\"
                        content=\"text/html; charset=ISO-8859-1\" />\n";
	echo "	  <link REL=\"SHORTCUT ICON\" HREF=\"favicon.ico\">";					
    echo "    </head>\n";
    echo "    <body>\n";

    echo "        <div id=\"root\">\n"; // ganz oberer Div-Holder
    echo "            <div id=\"banner\">\n"; // banner
    include "inc/banner.php";
    echo "            </div>\n";
    echo "            <div id=\"links\">\n"; // linkes Menu
    include "inc/menu.php";
    echo "            </div>\n";
    echo "            <div id=\"mitte\">\n"; // In der Mitte der Inhalt
    include "inc/inhalt.php";
    echo "            </div>\n";
	echo"			<div id=\"bottom\">\n";
	include "inc/unten.php";
	echo  "			</div>\n";
    echo "            <br style=\"clear:both;\" />\n"; // css-float beenden
    echo "       </div>\n";

    echo "    </body>\n";
    echo "</html>\n";
?>

CSS Datei:
Code: 
#banner {
    height: 183px;
}
#links {
    width: 30%;
    float: left;
}
#mitte {
    width: 69%;
    float:left;
}
#bottom {
clear: both;
padding: 6px
position:fixed;
bottom:0px;
}
#header {
    padding-bottom:3em;
}
 
Du hast da das Semikolon nach der padding-Eigenschaft vergessen, weshalb der Rest des Stylesheets vom Browser übergangen wird:

Code: 
#bottom {
clear: both;
padding: 6px;
position:fixed;
bottom:0px;
}

Zudem muss im HTML-Code der Footer ausserhalb des DIVs root notiert werden - also:

Code: 
<div id="root">
     <div id="banner">banner</div>
     <div id="links">links</div>
     <div id="mitte">mitte</div>
</div>
<div id="bottom">bottom</div>
Wenn du auf der Suche nach einer Lösung für den IE6 bist, der position:fixed nicht unterstützt, könnte dir der Thread Wie mache ich solch eine Leiste? weiterhelfen.

Und bitte beachte in deinen Beiträgen die Netiquette bzgl. der Groß- und Kleinschreibung.
 
Hab nun es so gemacht wie in deinem Beispiel jedoch ist nun bottom unter links, und wollte den Bottem gerne so haben das er unter links und rechts ist, da mein Text im bottom in der Mitte sein soll.
 
Zuletzt bearbeitet:
Dann erweiter mal die Regel folgendermaßen:

Code: 
#bottom {
clear: both;
padding: 6px;
position: fixed;
bottom: 0px;
width: 100%;
text-align: center;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück