Div kollidiert css

Ich habe ein Problem mit meinem HTML/CSS-Code. Ich arbeite an einer Website für meinen Vater, aber da ist etwas nicht in Ordnung, der Code hat zwei divs im Moment, aber sie kollidieren miteinander.Div kollidiert css

HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Wil Lodewijks - Dutch Photography</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <!-- Menu --> 
      <div id="menu"> 
       <a href="/index.html"><img id="logo" src="/style/logo.png"></a> 
       <a class="menuitem selected" href="/videos">Foto's</a> 
       <a class="menuitem" href="/contact">Contact</a> 
      </div> 

     <!-- Main --> 
     <div id="main"> 
      <h2>Welkom bij de foto galerij van Nederlands fotograaf Wil Lodewijks.</h2> 
      </div> 

    </body> 
    </html>

CSS:

/* Menu */ 
    div#menu { 
     background-color: #3e4040; 
     position: absolute; 
     height: 50px; 
     width: 100%; 
    } 

    /* Main */ 
    div#main { 
     background-color: #f03026; 
    } 

    /* Menu opmaak */ 
    /* Tekst */ 
    div#menu a.menuitem { 
     font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
     font-size: 30px; 
     color: #ffffff; 
     text-align: center; 
     display: block; 
     float: left; 
     text-decoration: none; 
    } 

    /* Menu items */ 
    div#menu a.menuitem { 
     padding-top: 7px; 
     padding-left: 25px; 
     padding-right: 25px; 
     padding-bottom: 8px; 
    }

Quelle

2016-03-23 Rilotjuh

haben Sie Ihre #Menüposition: absolut festgelegt, wodurch diese aus Dokumentflussberechnungen entfernt wird. –

@MarcB was soll ich einstellen? – Rilotjuh

Von dem, worauf Marc hinwies, wenn Sie nur das '# menu' benötigen, um alle Kinder zu fangen, die dieses' pos: abs' haben, stellen Sie es stattdessen auf 'position: relative;'. Ohne ein "Top" oder ähnliches zu verwenden, bewirkt "pos: rel" nur, dass es untergeordnete Elemente auffängt. – abluejelly

nehmen Sie die

position: absolute;

weg in Ihrem Menü

div#menu { 
     background-color: #3e4040; 
     position: absolute; <<<<<<<this you have to take away 
     height: 50px; 
     width: 100%;

Quelle

2016-03-23 17:48:54 DanyCode

wegen eines Mangels an 'top' und co. In dem Ausschnitt, der uns gezeigt wurde, würde ich vorschlagen, es durch "relativ" zu ersetzen, statt es zu nixen - etwas könnte erwarten, dass # # Menü es fängt, wenn es sich positioniert. – abluejelly

aber ich denke, es ist ein Problem des Snippets, weil in https://jsfiddle.net/ es funktioniert – DanyCode

Sie falsch verstanden. Ersetzen durch 'position: relative;' anstatt alle Positionen zu entfernen führt dazu, dass Sie nicht verlieren, wenn Sie ein Kind von '# menu' haben, das' position: absolute; 'hat. Das habe ich gesagt. – abluejelly

Die Eigenschaft position: absolute entfernt das #menu div aus dem Dokumentfluss, daher müssen Sie #main einen Rand geben, der der Größe #menu entspricht, um die Überlappung zu vermeiden. Alternativ könnten Sie auch nicht position: absolute auf diesem div verwenden, aber das hängt davon ab, was Sie erreichen möchten.

Weitere Informationen zu den verschiedenen Optionen für diese Eigenschaft finden Sie unter http://www.w3schools.com/cssref/pr_class_position.asp.

Quelle

2016-03-23 17:48:58 Tomthepythonist

Div kollidiert css

Antwort

Verwandte Themen