CSS überlappende Abschnitte

Ich arbeite an einer website und ich habe eine unsortierte Liste von Schaltflächen, die in meine HTML -, nach denen es mehr Inhalt. Aber das problem ist, daß die Abschnitte sind übereinander an die Tasten. #advertising ist 0px in der Höhe, das ist wahrscheinlich, warum es ist gestapelt auf der Oberseite der Tasten.

Ich weiß nicht, wie dieses problem zu lösen, obwohl.

JsFiddle

EDIT:
Gelöschte Zeile 8. Das war die debugging-Zwecke, nicht im Zusammenhang mit der Frage.

Mein HTMLcode

<!DOCTYPE html>
<html>
<head>
    <title>Zien! Woningmarketing</title>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/mobile.css"/>
</head>
<body>
<header>
    <nav>
        <figure>
            <span class="helper"></span><img src="http://placehold.it/180x55" alt="Zien Woningmarketing"/>
        </figure>
        <a href="#"><img src="http://placehold.it/45x20" alt="Menuknop: open het menu"/></a>
    </nav>
</header>
<section id="intro-image">
    <figure>
        <img src="img/foto-bg.png" alt="Professionele woningfotografie"/>
    </figure>
    <h1><span>Professionele Woningfotografie</span></h1>
</section>
<section id="wat-doen-we">
    <h2>Wat doen we?</h2>
    <span>We verzorgen <span class="em">krachtige</span> en <span class="em">mooie</span> woningvisualisaties</span>
</section>
<section id="buttons">
    <ul>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>Fotografie</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
            <hr />
        </li>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>360&deg; foto&#39;s</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
            <hr />
        </li>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>Plattegronden</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
            <hr />
        </li>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>Artist Impressions</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
            <hr />
        </li>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>Video</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
            <hr />
        </li>
        <li>
            <ul>
                <li><img src="http://placehold.it/60x60" alt="icon" /></li>
                <li><span>Inmeten</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" alt="chevron" /></a></li>
            </ul>
        </li>
    </ul>
</section>
<section id="advertising">
    <figure>
        <img src="img/advertising-bg.png" alt="" />
        <figcaption>
            <span>&OpenCurlyDoubleQuote;Creative without strategy is called &#39;art&#39;.</span>
            <span>Creative with strategy is called &#39;advertising&#39;.&CloseCurlyDoubleQuote;</span>
        </figcaption>
        <em>- Jef I. Richards</em>
    </figure>
</section>
<section id="wat-nog-meer">
    <h2>Wat doen we nog meer?</h2>
    <span>We zorgen voor <span class="em">marketing</span> om je woning te <span class="em">promoten</span></span>
</section>
<section id="marketing">
    <ul>
        <li>
            <ul>
                <li><span>Woningmarketing</span></li>
                <li><a href="#"><img src="http://placehold.it/15x60" /></a></li>
            </ul>
        </li>
    </ul>
</section>
</body>
</html>

CSSFile

html, body, * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
}
header nav {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 75px;
}

header nav figure {
    display: inline;
}

header nav figure img {
    margin-left: 7.142857%;
    position: relative;
    top: 50%;
    height: 55px;
    margin-top: -27.5px; /* negative half of the height */
}

header nav a img {
    margin-right: 7.142857%;
    float: right;
    position: relative;
    top: 50%;
    height: 20px;
    margin-top: -10px; /* negative half of the height */
}
#intro-image figure img{
    position: relative;
    top: -40px;
    z-index: -1;
    width: 100%;
    box-shadow: 0 0 64px black;
}
#intro-image h1{
    position: absolute;
    top: 300px;
    text-align: center;
    width: 100%;
}
#intro-image h1 span{
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    color: white;
    font-size: 2em;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px black;
}
#wat-doen-we{
    text-align: center;
}
#wat-doen-we h2{
    font-family: 'Titillium Web', sans-serif;
    font-size: 12pt;
    color: rgb(64, 64, 64);
    text-transform: uppercase;
    font-weight: 400;
}
#wat-doen-we span{
    font-family: 'Titillium Web', sans-serif;
    font-size: 18pt;
    color: rgb(64, 64, 64);
    text-transform: uppercase;
}
#wat-doen-we span.em{
    color: rgb(214, 55, 45);
    font-size: 1em;
}
#buttons{
    margin-top: 40px;
}
#buttons ul{
    list-style-type: none;
    height: 90px;
}
#buttons ul li{
    display: block;
}
#buttons ul li ul{
    background-color: rgb(214, 55, 45);
    clear: both;
}
#buttons ul li ul li{
    display: inline;
}
#buttons ul li ul li img{
    margin-left: 10.4285714%;
    float: left;
    position: relative;
    top: 50%;
    height: 60px;
    margin-top: -30px; /* negative half of the height */
}
#buttons ul li ul li span{
    margin-left: 5%;
    position: relative;
    top: 50%;
    height: 40px;
    margin-bottom: -20px;
    vertical-align: baseline;
    font-family: 'Titillium Web', sans-serif;
    text-transform: uppercase;
    color: rgb(246, 246, 246);
}
#buttons ul li ul li a img{
    float: right;
    margin-right: 7.142857%;
    position: relative;
    top: 50%;
    height: 60px;
    margin-top: -30px; /* negative half of the height */
}
#buttons ul li ul li a img:hover{
    box-shadow: 0 0 12px rgb(246, 246, 246);
}
hr{
    color: rgb(246, 246, 246);
    background-color: rgb(246, 246, 246);
    height: 1px;
}
#advertising{
    clear: both;
}
#advertising figure img{
    width: 100%;
    padding-top: 40px;
}
#advertising figure figcaption{
    position: absolute;
    top: 625px;
    text-align: center;
    width: 100%;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    color: white;
    font-size: 1.25em;
    text-transform: uppercase;
    display: block;
    text-shadow: 2px 2px 2px black;
}
#advertising figure em{
    display: block;
    position: absolute;
    top: 710px;
    right: 20px;
    color: white;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 1em;
}
#wat-nog-meer{
    text-align: center;
    clear: both;
}
#wat-nog-meer h2{
    font-family: 'Titillium Web', sans-serif;
    font-size: 12pt;
    color: rgb(64, 64, 64);
    text-transform: uppercase;
    font-weight: 400;
}
#wat-nog-meer span{
    font-family: 'Titillium Web', sans-serif;
    font-size: 18pt;
    color: rgb(64, 64, 64);
    text-transform: uppercase;
}
#wat-nog-meer span.em{
    color: rgb(214, 55, 45);
    font-size: 1em;
}
#marketing{
    padding-top: 80px;
}
#marketing ul{
    list-style-type: none;
    height: 90px;
    clear: both;
}
#marketing ul li{
    display: inline-block;
}
#marketing ul li ul{
    background-color: rgb(214, 55, 45);
    clear: both;
}
#marketing ul li ul li{
    display: inline;
}
#marketing ul li ul li span{
    margin-left: 5%;
    position: relative;
    top: 50%;
    height: 40px;
    margin-bottom: -20px;
    vertical-align: middle;
    font-family: 'Titillium Web', sans-serif;
    text-transform: uppercase;
    color: rgb(246, 246, 246);
}
#marketing ul li ul li a img{
    float: right;
    margin-right: 7.142857%;
    position: relative;
    top: 50%;
    height: 60px;
    margin-top: -30px; /* negative half of the height */
}
  • wo sind Sie vor problem ? Ich meine, in dem Teil von deinem HTML ?
  • Alles nach dem # - stacks Tasten auf der Oberseite des # - buttons Teil.
  • über welchen browser hast du dieses problem?
  • Jeder browser, ich vermute, es hat zu tun mit den floats und clears auf die Tasten Sektion.
  • Vielleicht vereinfacht das problem auf, wie wenig Zeilen CSS/HTML würde uns helfen, das problem zu lösen?
InformationsquelleAutor user3239713 | 2014-02-06
Schreibe einen Kommentar