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.
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° foto'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>“Creative without strategy is called 'art'.</span>
<span>Creative with strategy is called 'advertising'.”</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?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem wird durch die Tatsache verursacht, dass Ihre Abschnitte haben eine Feste Höhe, und der Inhalt des # - buttons Abschnitten ist eine überschreitung der Höhe von 500 Pixel.
Versuchen
zu
Update zwei Dinge :
Demo : JSFiddle
Aktualisiert CSS :