0
Ich habe ein paar der verschiedenen Beiträge zu diesem Thema angeschaut und habe keine Lösungen für mein Problem gefunden. Das Problem, das ich habe, ist, dass die Elemente in meinem Bereich "Portfolio" sich im Bereich "Über mich" überschneiden. Ich habe versucht, die overflow: hidden und overflow: auto-Eigenschaften auf meinen Code anzuwenden und nichts schien zu funktionieren! Hier ist mein Code auf JSFiddle, wenn jemand von euch irgendwelche Vorschläge hat, würde ich mich freuen, sie zu hören! Vielen Dank!Warum überlappen sich meine div-Elemente?
/* Mobile Navigation */
#mobile-nav {
display: none;
height: 75px;
background-color: #262626;
}
#mobile-nav .mobile-nav-tgl-btn {
height: 50px;
width: 50px;
background-color: transparent;
border: none;
margin-left: 15px;
margin-top: 12.5px;
cursor: pointer;
}
#mobile-nav .mobile-nav-tgl-btn .bar {
height: 7.5px;
width: 45px;
background-color: white;
margin-top: 6.25px;
margin-bottom: 6.25px;
margin-left: -5px;
}
#mobile-nav .nav-links {
text-align: center;
}
#mobile-nav .nav-links ul {
padding-left: 0;
margin-top: 4;
}
#mobile-nav .nav-links ul li {
list-style-type: none;
border: 2px solid black;
}
#mobile-nav .nav-links ul li a {
text-decoration: none;
color: black;
font-size: 1.6em;
}
/* Nomral Navigation */
#norm-navbar {
height: 75px;
background-color: #262626;
}
#norm-navbar .norm-nav-links {
padding-top: 16.5px;
float: left;
}
#norm-navbar .norm-social-links {
padding-top: 16.5px;
float: right;
}
#norm-navbar a {
font-size: 1.85em;
/* 29.6px font-size */
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: white;
}
/* Site header */
#header-section {
height: auto;
background-color: orange;
padding: 0;
margin: 0;
width: 100%;
}
#header-section .header-elements {
width: 75%;
margin: 0 auto;
text-align: center;
padding-top: 100px;
padding-bottom: 120px;
}
#header-section .header-elements img {
height: 150px;
width: 150px;
padding-bottom: 30px;
}
#header-section .header-elements h1 {
font-size: 3em;
}
#header-section .page-down-btn {
width: 20%;
margin: 0 auto;
text-align: center;
padding-bottom: 10px;
}
#header-section .page-down-btn p {
margin-top: 0;
margin-bottom: 5px;
}
#header-section .page-down-btn i {
font-size: 1.5em;
}
#header-section .page-down-btn a {
text-decoration: none;
color: black;
}
/* About me section */
#about-me {
width: 100%;
position: absolute;
height: auto;
}
#about-me .left-panel {
width: 60%;
text-align: center;
float: left;
height: 450px;
}
#about-me .left-panel h2 {
font-size: 2.5em;
margin-top: 10px;
margin-bottom: 15px;
}
#about-me .left-panel .about-me-para {
width: 75%;
margin: 0 auto;
}
#about-me .left-panel .about-me-para p {
margin: 0 auto;
text-align: left;
font-size: 1.5em;
}
#about-me .right-panel {
width: 40%;
float: right;
background-image: url("http://cdn.zmescience.com/wp-content/uploads/2014/07/over_the_edge.jpg");
height: 497px;
}
/* Portfolio/work section */
#work-section {
height: 500px;
width: 100%;
background-color: orange;
display: block;
}<div id="mobile-nav">
<button class="mobile-nav-tgl-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<div class="nav-links">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="norm-navbar">
<div class="norm-nav-links">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</div>
<div class="norm-social-links">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-codepen" aria-hidden="true"></i></a>
</div>
</div>
<div id="header-section">
<div class="header-elements">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png" alt="Logo">
<h1>Hi, I'm a website developer that loves to make <strong>stunning</strong> and <strong>functional</strong> websites.</h1>
</div>
<div class="page-down-btn">
<p>Click to learn more</p>
<a href="#"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
</div>
</div>
<div id="about-me">
<div class="left-panel">
<div class="left-panel-cont">
<h2>Lorem ipsum</h2>
<div class="sm-sep"></div>
<div class="about-me-para">
<p class="para-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<p class="para-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="right-panel">
</div>
</div>
<div id="work-section">
<div class="box">
<h1>Hello!</h1>
</div>
<div class="box">
<h1>Hello!</h1>
</div>
<div class="box">
<h1>Hello!</h1>
</div>
</div>JSFiddle: https://jsfiddle.net/pv5s6s0w/
Vielen Dank allen!
Bitte fügen Sie float: left zu # work Schnitt Klasse –
dieses https://jsfiddle.net/pv5s6s0w/1/ versuchen – Amal