Im Code darunter habe ich einige seltsame Probleme bekommen.CSS-Probleme mit Körperhöhe und Fußzeile, die am Boden kleben
1) Es gibt einen 11px schwarzen Balken unter dem mainContainer Div, der einfach nicht verschwinden wird. Auch wenn dem Körperelement absolute Position gegeben wird, wobei oben, links, rechts, unten auf 0 gesetzt wird. Dies verursacht eine Bildlaufleiste ohne Grund.
2) Die Fußzeile soll immer auf der Unterseite bleiben, sollte aber nie die mainBody div überlappen. Um das zu erreichen, gab ich ihm eine absolute Position und machte es zum Kind der mainContainer div mit einer relativen Position. Aber es wird immer noch die mainBody Div bis zu einer bestimmten Höhe überlappen.
Ich habe versucht, diese Probleme für eine Weile jetzt selbst zu beheben, aber ich kann es einfach nicht herausfinden. Jetzt hoffe ich, dass ihr mir helfen könnt.
html {
\t height: 100%;
}
body {
\t height: 100%;
\t padding: 0;
\t margin: 0;
}
@font-face {
font-family:"Glass Antiqua";
src: url("GlassAntiqua-Regular.ttf");
}
body {
\t font-family: Glass Antiqua;
\t color: White;
\t font-size: 50px;
\t background-color: black;
}
header #logo h1 {
\t margin-top: 10px;
}
nav ul li:hover > ul {
\t display: block;
}
nav ul {
\t width: calc(100% - 40px);
\t margin-top: 0;
\t background: #234e60;
\t background: linear-gradient(top, #234e60 0%, #245163 100%);
\t background: -moz-linear-gradient(top, #234e60 0%, #245163 100%);
\t background: -webkit-linear-gradient(top, #234e60 0%,#245163 100%);
\t box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
\t padding: 0 20px;
\t list-style: none;
\t position: relative;
\t display: inline-table;
\t font-size: 20px;
}
nav ul:after {
\t content: ""; clear: both; display: block;
}
nav ul li:first-child {
\t margin-left: 8px;
}
nav ul li {
\t float: left;
}
nav ul li:hover {
\t background: #193e4e;
\t background: linear-gradient(top, #193e4e 0%, #1a4050 40%);
\t background: -moz-linear-gradient(top, #193e4e 0%, #1a4050 40%);
\t background: -webkit-linear-gradient(top, #193e4e 0%,#1a4050 40%);
}
nav ul li:hover a {
\t color: #fff;
}
nav ul li a {
\t display: block; padding: 25px 35px;
\t color: #fff; text-decoration: none;
}
footer {
\t bottom: 0;
height: 150px;
position: absolute;
}
#mainContainer {
\t margin: auto;
\t padding-left: 25px;
\t padding-right: 25px;
\t width: 830px;
\t min-height: 100%;
\t background: #377a96;
\t position: relative;
}
#logo {
\t background: url(http://www.icecub.nl/images/banner_bats.png);
\t height: 130px;
\t margin-top: 0px;
\t border: 1px solid black;
\t text-align: center;
}
#hr_lines {
\t width: 100%;
\t height: 3px;
\t background: white;
\t position: relative;
}
#hr_blue {
\t width: 100%;
\t height: 1px;
\t position: absolute;
\t top: 1px;
\t background: #234e60;
}
#mainBody {
\t height: 500px;
\t border: 1px solid red;
}
#img_footer {
\t width: 830px;
\t height: 150px;
}<div id="mainContainer">
\t <header>
\t \t <div id="logo">
\t \t \t <h1>Welcome</h1>
\t \t </div>
\t \t <div id="hr_lines">
\t \t \t <div id="hr_blue"></div>
\t \t </div>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a href="home.html">Home</a><li>
\t \t \t \t <li><a href="introductie.html">Introductie</a></li>
\t \t \t \t <li><a href="opleiding.html">Mijn Opleiding</a></li>
\t \t \t \t <li><a href="werk.html">Eigen Werk</a></li>
\t \t \t \t <li><a href="contact.html">Contact</a></li>
\t \t \t </ul>
\t \t </nav>
\t </header>
\t <div id="mainBody"></div>
\t <footer>
\t \t <img src="http://www.icecub.nl/images/boo.png" id="img_footer" alt="Afsluiting" />
\t </footer>
</div>
ich es durch Entfernen 'Position nur zu beheben verwaltet: relative' von Ihrem '# mainContainer' Div ... – Joum
@Joum Wenn ich das entferne, erlaubt es der Fußzeile, den mainBody vollständig zu überlappen. Versuchen Sie einfach, Ihren Browser auf etwas kleiner zu skalieren, und Sie werden sehen, was ich meine. – icecub
Ja, ich habe es gesehen ... Die Antworten anderer Leute könnten Ihr Problem abdecken, aber wenn es Ihnen nichts ausmacht, würde ich Sie gerne darauf hinweisen in Richtung getbootstrap.com ... es scheint mir, dass viel von dem, was Sie tun wollen, bereits sehr gut von ihnen abgedeckt ist ... – Joum