CSS重疊部分

我在一個網站上工作，我有一個無序的HTML列表中的按鈕，之後有更多的內容。但問題是部分堆疊在這些按鈕之上。 #advertising高度爲0px，這可能是爲什麼它被堆疊在按鈕上。不過，我不知道如何解決這個問題。CSS重疊部分

編輯： 刪除線8，這是爲了調試的，不相關的問題。

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

來源

2014-02-06 user3239713

你在哪裏面臨的問題？我的意思是你的HTML的哪一部分？ – SpiderCode

#buttons堆疊在#buttons部分的頂部。 – user3239713

你在哪個瀏覽器中有這個問題？ – franchez

的問題是事實，你的部分有一個固定的高度，#buttons部分的內容超出引起500像素的高度。

嘗試改變

section { height:500px; }

到

section { min-height:500px; }

來源

2014-02-06 12:58:00 Leon

這確實解決了在該部分之外流動的內容！非常感謝，你能告訴我如何爲按鈕設置一個90px的高度嗎？ – user3239713

編輯我的答案。您可以在按鈕上保留高度，並在各部分上將高度更改爲最小高度。 – Leon

該部分的高度用於調試，檢查它會產生什麼結果。問題是，該網站將是移動的，所以我不想指定靜態高度。 – user3239713

更新兩件事情：

找到位置：絕對並將其刪除。
刪除高度：500像素從部分

演示：JSFiddle

更新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 */ 
        }

來源

2014-02-06 13:09:06 SpiderCode

回答

相關問題