<li> Elemente übertretten div grenze

[KingLu]

Folgendes Problem:
Hier ein Bild davon! Also das Problem besteht wenn ich ide Fenstergröße ändere bzw eine andere auflösung vorliegt


hier meine komplette css Datei!

.MLeiste { //der Kompletten kasten
width:10%;
float:left;
line-height:18px;
background-color: #f6f6f6;
box-shadow: 10px 10px 5px #888;
 }


#heading { // Die Überschrift Also z.b Navigation/Werkzeuge
font-size: 18px;
font-weight:bold;
border-bottom:1px dashed #000000;
text-align: left;
}


ul li a{
text-decoration: none;
//font-size: 23px;
font-size: 100%;
padding-left: 13px;
color: black;


}
ul  li{
    list-style-type: none;
    margin-left: -30px;
    padding-bottom: 3px;
}


ul li a:hover{
text-decoration: underline;
color: blue;
}

Finde den Fehler nicht bzw ich finde im Netz keine Hilfe deswegen wende ich mich an euch! Vermutlich ist es irgendeine kleinigkeit...

habs schon mit position:...; versucht;

 

[Tronjer]

Du gibt dem Container width: 10%. Was soll passieren, wenn die 10% eine geringere Breite ausmachen als die im Container liegenden Elemente?

 

[KingLu]

ich geb aber auch meinem content container 87% bei diesem wird der Test aber angepasst und tritt nicht aus

 

[Tronjer]

Das trifft normalerweise auch zu. Wenn das sichtbare Element allerdings nur aus einem Wort besteht, kann das ja schlecht umbrochen werden.

 

[KingLu]

ahh ok :-D
Kann man irgendwie einstellen das der Text dann einfach abgeschnitten wird?
mit overflow: hidden; klappts

danke :-D

 

[Tronjer]

Ein overflow: hidden bei Menüpunkten ist nicht wirklich sinnvoll. Da gibt es zwei bessere Alternativen. Entweder eine min-width in Pixeln als Ergänzung zu width in %, oder du verwendest das hier:

Bootstrap