CSS перекрывающиеся разделы

Я работаю над веб-сайтом, и у меня есть неупорядоченный список кнопок в моем HTML, после чего есть больше контента. Но проблема в том, что разделы расположены поверх этих кнопок. #advertising - 0px в высоту, вероятно, поэтому он укладывается поверх кнопок.CSS перекрывающиеся разделы

Я не знаю, как решить эту проблему.

JsFiddle

EDIT: Удаляется строка 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. – user3239713

, на каком браузере у вас есть эта проблема? – franchez

Проблема вызвана тем, что ваши разделы имеют фиксированную высоту, а содержание разделов #buttons превышает высота 500 пикселей.

Попробуйте изменить

section { height:500px; }

section { min-height:500px; }

источник

2014-02-06 12:58:00 Leon

Это действительно решило содержание, выходящее за пределы раздела! Большое вам спасибо, можете ли вы посоветовать мне, как установить высоту 90 пикселей для кнопок, так или иначе? – user3239713

Отредактировал мой ответ. Вы можете оставить высоту на кнопках и изменить высоту на минимальную высоту на участках. – Leon

Эта высота для раздела была использована для отладки, проверяя, в чем она приведет. Проблема в том, что сайт будет мобильным, поэтому мне не нравится указывать статическую высоту. – user3239713

Update две вещи:

найти позицию: абсолютная и удалить его.
удалить высота: 500px из раздела

Demo: 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

CSS перекрывающиеся разделы

ответ

Смежные вопросы