Dynamische Höhe einer Liste?

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich habe eine Liste und würde gerne bei den Menüunterpunkten eine dynamische Höhe festlegen, die sich also an den Inhalt anpasst.

Bisherige Styletags:

[CODE]
#Navigation {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
padding-left: 5%;
}

  • html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
    }
    :first-child+html ul#Navigation li { / Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
    }
    ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    }
  • html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
    }
    ul#Navigation li ul li {
    float: none;
    display: block;
    border:1px solid #BEBFC5;
    border-top-width: 0px;
    }
    ul#Navigation a, ul#Navigation span {
    display: block;
    text-decoration: none;
    color: #000000; background-color: #DDDDDD;
    height: 21px;
    padding-top: 5px;
    filter:alpha(opacity=96);
    -moz-opacity:0.96;
    opacity:0.96;
    }
  • html ul#Navigation a, * html ul#Navigation span { /* nur fuer IE erforderlich /
    width: 100%;
    w\idth: 6.4em;
    }
    ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    font-weight: bold;
    background-color: #DDDDDD;
    }
    ul#Navigation li.menu a:hover{
    height: 20px;
    font-weight: bold;
    background-color: #DDDDDD;
    }
    ul#Navigation li.menuitem{
    padding: 0;
    position: relative;
    }
    ul#Navigation li.menuitem a:hover{
    font-weight: bold;
    background-color: #E92229;
    color: #FFFFFF;
    vertical-align: middle;
    }
    /     Erweiterung zur dynamischen Ein-/Ausblendung /
    ul#Navigation li>ul {
    display: none;
    }
    ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
    padding-top: 1px;
    }
    /     Workaround fuer den IE 7 */
    *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
    }
    [/CODE]

Die Menüunterpunkte gehören zur Klasse menuitem. Ich hoffe, ihr wisst, wie man so ein Problem lösen könnte.

2

Also du möchtest, das die Liste automatisch länger wird wenn ein weiterer Listenpunkt erscheint?

3

Ich möchte, dass der Listenpunkt sich an den Inhalt anpasst. Langer Inhalt= höherer Listenpunkt.

4

Mal versucht, dem Element eine feste Breite, aber keine feste Höhe zu setzen?

5

Danke. Noch eine Frage: Wie bekomme ich es hin, dass es genauso aussieht, wie im Firefox? So wie jetzt funktioniert es leider überhaupt nicht.

6

Funktioniert leider nicht. Habe es so probiert. Siehe vision-sportal.de/oopcms/ unter Produkte.

Wie kann man es sonst probieren zu lösen?

7

Na ja, die Seite, von der du das alles kopiert hast, kriegt es hin. Mag sein, dass ich dir Unrecht tue und du das kopieren darfst, aber ich wäre generell sehr vorsichtig, was Copyright-Verletzungen angeht. Zum Rumbasteln mag das okay sein, wobei das Hochladen auf deine eigene Domain im Prinzip schon wieder eine Veröffentlichung darstellt. Das ist alles meine subjektive Meinung, ohne Gewähr.

Du musst uns aber nachsehen, dass es für uns einfach nicht sonderlich spannend ist, zu versuchen, Scripts zu reparieren, die du unerlaubt (?) unvollständig kopiert hast.

Das a-Element im entsprechenden li-Element hat noch eine feste Höhe gesetzt. Wenn du die entfernst oder erhöhst, sollte es gehen.

8

Gelöst mittels height: auto !important. Danke