nicht angemeldet
Problem: Höhe in <li> definieren
Hallo,
wenn ich für <li>-Elemente eine Höhe mit "height" definiere und in einer <ul> eine weitere <ul> eingeschachtelt habe, werden die unter der eingeschachtelten <ul> folgenden <li>s übereinander angezeigt.
Was passiert (implizit?) durch die Höhenangabe auf <li>? Was muß ich anderes machen?
Hier ein einfaches Beispiel, dass das Problem aufzeigt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ul-Test</title>
<style type="text/css">
li {
height: 20px;
}
</style>
</head>
<body>
<h1>ul-Test</h1>
<ul>
<li>drei
<ul>
<li>drei-eins</li>
<li>drei-zwei</li>
<li>drei-drei</li>
</ul>
</li>
<li>eins</li>
<li>zwei</li>
</ul>
</body>
</html>
Vielen Dank und viele Grüße
Daniel
-
wenn ich für <li>-Elemente eine Höhe mit "height" definiere und in einer <ul> eine weitere <ul> eingeschachtelt habe, werden die unter der eingeschachtelten <ul> folgenden <li>s übereinander angezeigt.
Was passiert (implizit?) durch die Höhenangabe auf <li>? Was muß ich anderes machen?
Du würdest es besser sehen, wenn du ein border definierst.
Es wird die Eigenschaft overflow:visible aktiv. Das heisst, die innere Tabelle verlasst den Raum der vorgegebenen 20px Höhe.
setze mal:
li {overflow:hidden;}mfg Beat
-
Hi,
Du würdest es besser sehen, wenn du ein border definierst.
Es wird die Eigenschaft overflow:visible aktiv. Das heisst, die innere Tabelle verlasst den Raum der vorgegebenen 20px Höhe.Ich habe mal einen border vergeben, verstehe aber leider noch nicht, was passiert. Warum kommt das <li> "drei" nicht unterhalb des eingeschachtelten <ul>? Und eine Tabelle habe ich doch nirgendwo definiert, und die Höhe bezieht sich doch auf die Aufzählungspunkte?!
setze mal:
li {overflow:hidden;}Dann ist die eingeschachtelte <ul> gar nicht mehr zu sehen. Leider verstehe ich noch nicht warum. Ich möchte diese ja sehen, nur sollen die folgenden <li> unterhalb kommen - nicht daneben oder gar nicht!
Viele Grüße
Daniel-
Du würdest es besser sehen, wenn du ein border definierst.
Es wird die Eigenschaft overflow:visible aktiv. Das heisst, die innere Tabelle verlasst den Raum der vorgegebenen 20px Höhe.
Ich habe mal einen border vergeben, verstehe aber leider noch nicht, was passiert. Warum kommt das <li> "drei" nicht unterhalb des eingeschachtelten <ul>?Weil <li> inklusive innerer Liste nicht mehr als 20px hoch sein darf.
Du erzeugst also eine 20px hohe Boc und das folgende äussere <li> Element fügst sich der Regel entsprechend an diese Box an.Und eine Tabelle habe ich doch nirgendwo definiert, und die Höhe bezieht sich doch auf die Aufzählungspunkte?!
setze mal:
li {overflow:hidden;}
Dann ist die eingeschachtelte <ul> gar nicht mehr zu sehen. Leider verstehe ich noch nicht warum. Ich möchte diese ja sehen, nur sollen die folgenden <li> unterhalb kommen - nicht daneben oder gar nicht!Dann darfst du aber nicht sagen. dass ein <li> Element mit dem ganzen Inhalt nur 20 px hoch sein darf.
Was genau willst du erreichen?
mfg Beat
-
Hi,
Du würdest es besser sehen, wenn du ein border definierst.
Dann darfst du aber nicht sagen. dass ein <li> Element mit dem ganzen Inhalt nur 20 px hoch sein darf.Ah, jetzt hab ich es, hat ganz schön lange gedauert ;-) Klar, ich hab ja selbst gesagt, dass ein <li> nur 20px hoch sein darf. Das <li> mit dem eingeschachteltem <ul> müsste also wieder height:auto bekommen.
Was genau willst du erreichen?
Ich habe ein "Navigations-Menü", dessen Punkte eine bestimmte Größe bekommen sollen.
Viele Dank
Daniel-
Hi,
Das <li> mit dem eingeschachteltem <ul> müsste also wieder height:auto bekommen.
nicht nur das - wenn Du Überlagerungen bei Schriftvergrößerung vermeiden willst. Nutze em und vielleicht auch besser line-height.
freundliche Grüße
Ingo
-
-
-
-