Extremefall
Mitglied
Hallo,
ich habe momentan ein Problem bei einem längeren Content. Leider ist der Footer mitten auf der Seite und nicht am Ende der Seite gefestigt. Es wäre nett, wenn ihr einmal über den Code gucken könntet und vielleicht den Fehler findet.
Die Formatierung hängt damit zusammen, dass manche Inhalte included wurden oder auf einer DB Anfrage basieren.
Hier noch der Inhalt der CSS Datei:
Ps.: Sorry für die Formatierung. Der Editor macht es leider so komisch.
ich habe momentan ein Problem bei einem längeren Content. Leider ist der Footer mitten auf der Seite und nicht am Ende der Seite gefestigt. Es wäre nett, wenn ihr einmal über den Code gucken könntet und vielleicht den Fehler findet.
HTML:
<!DOCTYPE html> <html><head> <script type="text/JavaScript"> function sidebar(){ document.getElementById('sidebar').style.height=document.getElementById('content').offsetHeight+'px'; } </script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'de'} </script> <link rel="stylesheet" type="text/css" href="../css/style.css"> <title>Seitentitel</title> </head> <body onload="sidebar()"> <div id="wrapper"> <div id="header"> <img style="z-index: 1;" alt="Logo" src="http://www.html.de/Images/logo.png"> <p style="position: absolute; left: 5%; top: 100px;">Seitentitel</p> <div style="position: absolute; z-index: 4;right: 200px; padding:0; clear: right;margin: 0;top: 85px;"> <div style="width:52px;overflow:hidden;"> <iframe style="float: right;" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/help/?faq=17580&layout=box_count&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="z-index: 1;border:none; height:30px;" allowTransparency="true"></iframe> </div> </div> <img style="position: absolute; right: 0px; top: 90px; float: right; z-index: 4;" alt="Facebook" src="http://www.html.de/Images/registercard.png"> <img style="position: absolute; right: 100px; top: 90px; float: right; z-index: 3;" alt="Twitter" src="http://www.html.de/Images/registercard.png"> <img style="position: absolute; right: 200px; top: 90px; float: right; z-index: 2;" alt="Google+" src="http://www.html.de/Images/registercard.png"> <div style="position: absolute; float: right;z-index: 4;right: 20px; padding:0; margin: 0;top: 120px;"><g:plusone href="http://www.domain.de"></g:plusone></div> </div> <div id="navi"> <ul> <li class="leftborder rightborder"> <a href="index.php"> Start </a> </li> <li class="rightborder"> <a href="plaene.php"> Pläne </a> </li> <li class="rightborder"> <a href="notizen.php"> Notizen </a> </li> <li class="rightborder"> <a href="gruppen.php"> Gruppen </a> </li> <li class="rightborder"> <a href="einstellungen.php"> Einstellungen </a> </li> </ul> </div> <div id="main"> <div id="content"> <p style="text-decoration: underline;">Stundenplan</p> <p>Hier sehen Sie Ihren aktuellen Stundenplan:</p> <div class="stundenplanbox">Stunde:</div><div class="stundenplanbox">Montag:</div><div class="stundenplanbox">Dienstag:</div><div class="stundenplanbox">Mittwoch:</div><div class="stundenplanbox">Donnerstag:</div><div class="stundenplanbox">Freitag:</div><div class="stundenplanbox">1</div><div class="stundenplanbox">ddd | dd | (0)</div><div class="stundenplanbox">Kunst | Mali | (293)</div><div class="stundenplanbox">wiw | dia | (392)</div><div class="stundenplanbox">Rhetorik | Kleffmann | (393)</div><div class="stundenplanbox">Musik | Beiner | (393)</div><div class="stundenplanbox">2<br><br></div><div class="stundenplanbox">M | Werkel | (404)</div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">ohol | alk | (209)</div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">3<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">ni | de | (192)</div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">4<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">5<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">6<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">7<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">8<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">9<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">10<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox">11<br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div><div class="stundenplanbox"><br><br></div> </div> <div id="sidebar"> <p style="text-decoration: underline;">Ihr Account</p> Benutzer-Administrator<p>Sie haben 1 ungelesene Nachricht.</p> </div> </div> <div id="footer"> <p>Copyright © 2010-2011 me | <a href="http://www.html.de/impressum.php">Impressum</p> </div> </div> </body></html>Hier noch der Inhalt der CSS Datei:
Code:
body{ background-color: #500000; padding: 0; margin: 0; min-height: 400px; color: #fff; font-family: Tahoma; font-size: 16px; } table.cellpadding td{ padding: 3px; } td.right{ text-align: right; } table.cellspacing{ border-collapse: separate; } table{ border: 0px; } body { height: auto; min-height: 100%; width: 100%; } div{ float: left; } #navi ul li a{ padding-top: 5%; padding-left: 2%; color: #dab367; display: block; height: 100%; } #navi{ margin-left: 5%; margin-right: 5%; width: 89.9%; height: 40px; } #navi ul{ padding: 0px; height: 100%; margin: 0px; } #navi li{ text-align: center; width: 13%; height: 100%; float: left; font-family: Verdana; font-size: 16px; color: #dab367; list-style-type: none; margin: 0; } #navi li:hover{ background-color: #800000; text-decoration: underline; } #navi li.rightborder{ border-right: 1px dotted #dab367; } #navi li.leftborder{ border-left: 1px dotted #dab367; } #header{ font-family: Tahoma; color: #ffffff; padding-left: 5%; padding-right: 5%; height: 150px; width: 90%; background-color: #350000; border-bottom: 1px inset #da9000; } #main { padding-top: 50px; border-top: 1px outset #da9000; height: 400px; width: 100%; padding-bottom: 40px; margin-bottom: 1%; } #content{ height: 100%; min-height: 400px; height: auto !important; margin-left: 5%; width: 59%; padding-left: 2%; padding-right: 2%; float: left; background-color: #800000; border: 2px ridge #da9000; -webkit-box-shadow: -1px 1px 7px #dab367; -moz-box-shadow: -1px 1px 7px #dab367; box-shadow: -1px 1px 7px #dab367; } #sidebar{ text-align: center; border: 2px ridge #da9000; height: 100%; padding-left: 2%; padding-right: 2%; margin-left: 2%; margin-right: 5%; width: 16%; float: right; background-color: #800000; -webkit-box-shadow: -1px 1px 7px #dab367; -moz-box-shadow: -1px 1px 7px #dab367; box-shadow: -1px 1px 7px #dab367; } #footer{ text-align: center; font-size: 14px; position: relative;
bottom: 0; height: 20px; width: 100%; clear:both; } #wrapper { min-height: 100%; position: relative; width: 100%; } * html #wrapper { height: 100%; } .stundenplanbox{ width: 15%; height: 60px; float: left; border: 1px solid #ffffff; } a { text-decoration: none; color: #ffffff; } .box{ width: 15%; float: left; padding-left: 5%; padding-top: 1%; height: 5%; }Ps.: Sorry für die Formatierung. Der Editor macht es leider so komisch.
Zuletzt bearbeitet:
