stackoom
  简体   繁体   中英

CSS overlapping sections

 原文  2014-02-06 12:43:58  7   2    html/ css

Question

I am working on a website and I have an unordered list of buttons in my HTML, after which there is more content. But the problem is that sections are stacked on top of those buttons. #advertising is 0px in height, that is probably why it is being stacked on top of the buttons.

I do not know how to solve this problem, though.

JsFiddle

EDIT: Deleted line 8. That was debugging purpose, not related to the question.

My 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 */
}

2 answers

solution1
 4 ACCPTED  2014-02-06 12:58:00

The problem is caused by the fact that your sections have a fixed height, and the content of the #buttons sections is exceeding the height of 500 pixels.

Try changing 

section { height:500px; }

to 

section { min-height:500px; }

solution2
 2  2014-02-06 13:09:06

Update two things :

  1. find position:absolute and remove it.
  2. remove the height:500px from section

Demo : JSFiddle

Updated CSS : 

html, body, * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
}

section {
    height: 500px;
}

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 {
    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;
    height: 540px !important;
}

    #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 {
        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;
        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 */
                    }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question CSS div sections overlapping overlapping rows and sections html css bootstrap Sections overlapping Bootstrap 4 Overlapping of Sections/Div Overlapping sections html Sections overlapping with Bootstrap 3 Overlapping sections with each other Sections are Overlapping In HTML How to limit text into sections in html/css- Overlapping image and below text DIV Sections Overlapping One Another
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM