Warum sind meine div überlappend

-2

Ich bin ein Anfänger Programmierer und ich bin mir nicht sicher, warum meine <header> und <section> divs einander überlappen. Ich dachte, da sie Blockelemente waren, würde <section> unter <header> beginnen. Irgendwelche Gedanken? Muss ich etwas in meinem CSS hinzufügen?Warum sind meine div überlappend

<!DOCTYPE html> 
<html> 
<head> 
<title>Greg's List</title> 
<meta charset="utf-8" name="description" content="This is the challenge  page for the CSS Layout Lesson in Thinkful. Here I'll be creating a search page for Greg's List"> 

<!-- reset --> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min. css"> 

<!--styles--> 
<link rel="stylesheet" type="text/css" href="main.css"> 

</head> 
<body> 
    <header> 
    <nav class="container"> 
     <h1 class="title">Greg's List</h1> 
     <ul class="links"> 
      <li class="posts"><a href="#">Post</a></li> 
      <li class="account"><a href="#">Account</a></li> 
     </ul> 
    </nav><!--end of nav--> 
    </header><!--end of header--> 

    <section class="search"> 
    <form> 
     <input class="search-bar"> 
     <img src="images/magnifying-glass.png" class="search-pic"> 
    </form> 
    </section><!--end of section--> 
</body> 
</html>

CSS

header { 
width: 100%; 
height: 60px; 
background-color: Gainsboro; 
position: fixed; 
} 


h1 { 
    font-family: Arial; 
} 

.title { 
    display: inline-block; 
    margin-top: 12px; 
    margin-left: 20px; 
} 

ul { 
    display: inline-block; 
    float: right; 
} 

li { 
    display: inline-block; 
    margin-right: 20px; 
    font-size: 25px; 
}

Quelle

2016-10-05 user2197602

Es gibt keine 'div's in Ihrem HTML ... wird schwer sein, Ihnen zu helfen, ohne zu sehen, was das Problem ist. – chazsolo

Ich steckte Ihre CSS und HTML-Code in diesem JSFiddle aber da ich keine unmittelbaren Probleme.

Das gesagt, ich habe festgestellt, dass Sie eine float: right; auf Ihrem <ul> haben, aber Sie nicht überall löschen, und dies könnte dazu führen, dass Elemente überlappen. Angenommen, Sie an anderer Stelle verwendet Schwimmer haben, müssen Sie sicher, dass auf jeder Ebene zu clear:both; sein, Sie Elemente schweben, etwa so:

CSS

.clear { 
    clear: both; 
}

HTML

<nav class="container"> 
    <h1 class="title">Greg's List</h1> 
    <ul class="links"> <!-- FLOATED ELEMENT --> 
     <li class="posts"><a href="#">Post</a></li> 
     <li class="account"><a href="#">Account</a></li> 
    </ul> 
    <div class="clear"></div> <!-- CLEAR FLOATS --> 
</nav><!--end of nav-->

I glaube nicht, dass du wirklich genug Informationen enthalten hast (du hast überlappende div Elemente erwähnt, aber dann HTML gepostet, das kein einzigesenthielt), also fotografiere ich hier im Dunkeln.

EDIT: Check out Nirjhar Vermani 's Antwort auf Ihre Frage. Sie haben eine position: fixed; auf Ihrer Kopfzeile, die ursprünglich angenommen wurde, war beabsichtigt, aber dies würde dazu führen, dass Ihre Kopfzeile in einer statischen Position im Fenster bleiben und die Elemente um sie herum ignorieren.

Quelle

2016-10-05 19:31:23 Santi

Position entfernen: behoben ab Kopf css.

Denken Sie daran, wenn Sie fragen: - Stellen Sie sicher, dass Sie den vollständigen Code hinzufügen, da es keine div in Ihrem Code ist

Quelle

2016-10-05 19:33:18

Entschuldigung, ich hätte sagen sollen, dass sich meine Header- und Section-Elemente überschneiden. Ich mache ein Projekt für einen Online-Kurs und eine der Voraussetzungen ist, dass der Header oben auf der Seite fixiert ist. – user2197602

Kein Problem. Froh, dass es geklappt hat –

Warum sind meine div überlappend

Antwort

Verwandte Themen