Text kommt aus dem Menü, wenn ich meinen Bildschirm verkleinern

Ich mache eine Website für mich. Ich fange mit dem Menü an, aber ich habe ein kleines Problem, wenn ich meinen Bildschirm kleiner mache, kommt der Text aus dem Menü heraus.Text kommt aus dem Menü, wenn ich meinen Bildschirm verkleinern

Und hier habe ich den Code i in HTML geschrieben haben:

<div id="header"> 


      <div id="menu"> 
       <ul> 
        <li>Home</li> 
        <li>Over mij</li> 
        <li>Ervaringen</li> 
        <li>Contact</li> 
       </ul> 
      </div> 


     </div>

und CSS:

body 
{ 
    margin: 0px; 
    padding: 0px; 
} 

#menu 
{ 
    width: 100%; 
    height: 100px; 
    background-color: rgba(53, 43, 35, 0.70); 
} 

ul 
{ 
    margin: 0px; 
    margin-left: 75%; 
} 

li 
{ 
    display: inline; 
    padding-left: 2%; 
    font-size: 19px; 
    line-height: 100px; 
    overflow: auto; 
}

Quelle

2016-05-16 Kip Verslaafde

Try [hier] (http://www.w3schools.com/bootstrap/bootstrap_navbar.asp) oder [hier] (http lesen .com/howto/howto_js_topnav.asp) –

Add Überlauf: versteckt, um die Menü - ID. – Steveo

Sie benötigen einen anderen Ansatz - Google "responsive Design". Header ist nur zu starten .... – sinisake

-2

Wort hinzufügen Pause und Leerraum Eigenschaft li-Tag.

li { word-break: break-word; 
     white-space: normal; 
    }

Quelle

2016-05-16 13:03:51

Bitte versuchen Sie zuerst Ihre Lösung dann post als Antwort, da es überhaupt nicht funktioniert. Vielen Dank –

Es funktioniert hier nicht in diesem Fall, versuchen Sie einfach Ihre Lösung –

sollten Sie entfernen margin-left von ul style

ul{ 
margin: 0px; 
}

und wenn Sie die Menüpunkte auf der linken Seite sein wollen, brauchen Sie nur, um Text hinzuzufügen-aling UL

ul{ 
margin:0; 
text-align:right; 
}

Ihre Demo hier nach Änderungen: https://jsfiddle.net/IA7medd/k6bu3bt8/1/

Und dieser Demo können Sie auch verwendet für Responsive Design, das auf allen Geräten funktioniert: https://jsfiddle.net/IA7medd/o89pn61t/

Quelle

2016-05-16 13:07:29

und wenn Sie kleinen Bildschirm Text machen werden aus der Box gehen .. richtig? –

Ja, es wird in einem kleinen Bildschirm aus der Box gehen, aber Sie können dieses Beispiel sehen, das Problem in kleinen Bildschirm beheben wird: https://jsfiddle.net/IA7medd/o89pn61t/ –

nice one ..Entschuldigung für meine Zeilen, aber Sie sollten dies auch in Ihrer Antwort erwähnen. –

Nun, wenn Sie vollständige Menü auf noch kleineren Bildschirm zeigen möchten, was Sie tun können, ist Medienabfragen verwenden.

Wie in dieser Geige: https://jsfiddle.net/odn0Lzfc Ich habe folgenden Medien Abfragen hinzugefügt Rest Ihren Code ist gleich.

@media screen and (max-width:768px){ 
    ul{ 
    margin-left: 0; 
    } 
} 
@media screen and (max-width:480px){ 
    li{ 
    font-size: 16px; 
    } 
}

Was es tun wird, ist Ihren Inhalt für die jeweiligen Bildschirmgrößen anzupassen.

Erfahren Sie mehr über Medienanfragen hier: //www.w3schools: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

Quelle

2016-05-16 13:13:51

Text kommt aus dem Menü, wenn ich meinen Bildschirm verkleinern

Antwort

Verwandte Themen