# UL-Höhe an umschließenden Container anpassen



## owned139 (30. Januar 2011)

Hallo liebe Community,
ich Arbeite zur Zeit an einer Navigation und habe das Problem, dass die UL-Container der Subnavi alle eine Unterschiedliche Höhe haben (je nach Anzahl der li-Elementen).

Wie stell ich es an, dass die UL-Elemente sich von der Höhe her dem umschließenden Element anpassen (z.b. li).

Navi sieht wie folgt aus:
Menüpunkt1          Menüpunkt2      Menüpunkt3
Element1              Element1            Element 1
                             Element 2


----------



## dreifragezeichen (30. Januar 2011)

Die Höhe des Eltern- und/oder Nachfolgeelements ergibt sich gemäß dem W3C durch dessen Inhalt, in deinem Fall, die <li>-Menüpunkte des jeweiligen <ul>-Untermenüs.

Ansonsten, wenn dir die Höhe des umschließenden <li>-Elements bekannt ist, sollte es ein leichtes Rechenexempel sein, das offene Restmaß zu ermitteln. JS + DOM sind dir behilflich, falls die Höhe der Mutterbox im CSS als deklarierte Regel nicht vorliegt.


----------



## dreifragezeichen (30. Januar 2011)

Nachtrag zum Grundverständnis: Das <ul>-Element der oberen Menüebene passt seine Höhe dem größten (höchsten) Untermenüeintrag an, und nicht umgekehrt, die unterschiedlich hohen (oder kürzeren) Untermenüebenen dem Elternelement.


----------



## owned139 (30. Januar 2011)

Mir ist die Höhe des li-Elementes ja leider nicht bekannt :/

Hier ist nen Code-Stück:

```
<ul>
  <li><a href="">Kategorie 1</a>
    <ul>
      <li><a href="">submenu 1</a></li>
      <li><a href="">submenu 2</a></li>
      <li><a href="">submenu 3</a></li>
    </ul>
  </li>
  <li><a href="">Kategorie 2</a>
    <ul>
      <li><a href="">submenu 1</a></li>
      <li><a href="">submenu 2</a></li>
    </ul>
  </li>
  <li><a href="">Kategorie 3</a>
    <ul>
      <li><a href="">submenu 1</a></li>
    </ul>
  </li>
<ul>
```
Jetzt hab ich allerdings das Problem, dass wenn ich den submenüs ein Border-left gebe das diese nicht alle gleich hoch sind, was sie aber sein sollen...ich verzweifel gerade echt :/

*Edit:
Ich will das ganze in css lösen...nen JS ansatz hab ich selbst auch aber css erscheint mir da sauberer und Ressourchenschonender.


----------



## dreifragezeichen (30. Januar 2011)

Was sollen wir hier im Fachforum für CSS zu deinem 0-8-15-HTML-Snippet eines Listenmenüs sagen, wenn das zugehörige und entscheidende Stylesheet nicht vorliegt? 

Von einer reinen CSS-Lösung kannst du dich gleich mal verabschieden, wenn dir zuvor die Höhe des <li>-Elements nicht bekannt ist.


----------



## owned139 (30. Januar 2011)

Hmm...hast recht, sorry.

```
#navi-wrap{
	width:960px;
	margin:110px auto auto auto;
}
#navi-wrap ul{
	padding:0;
	margin:0;
	list-style-type:none;
	clear:both;
}
#navi-wrap ul li ul{
	padding:0;
	margin:0;
	list-style-type:none;
}
#navi-wrap ul li{
	float:left;
}
#navi-wrap ul li ul li{
	float:none;
}
#navi-wrap ul li a{
	height:40px;
	display:block;
	font-size:16px;
	min-width:80px;
	text-decoration:none;
	color:#999;
	padding:10px 25px 0 15px;
	letter-spacing: 0.75px;
	border-left:1px solid #222;
}
#navi-wrap ul li a:hover{
	color:#fff;
}
#navi-wrap ul li ul li a{
	display:block;
	font-size:11px;
	text-decoration:none;
	color:#666;
	height:18px;
	padding:0 0 0 15px;
	border:none;
	text-transform:uppercase;
}
#navi-wrap ul li ul li a:hover{
	color:#fff;
}
#navi-wrap ul li.first-navi-link a{
	border:none;
}
#navi-wrap ul li a .desc{
	color:#666;
	font-size:12px;
	font-style:italic;
}
#navi-wrap ul li ul{
	display:none;
	border-left:1px solid #222;
	height:auto;
	overflow:hidden;
}
#navi-wrap ul li.first-navi-link ul{
	border:none;
}
#navi-wrap ul:hover ul{
	display:block;
}
```
Wenn ich das ganze aufsliden lassen will, würde das dann auch funktionieren?
Das UL würde dann ja anfangs eine Höhe von 0px haben...also kann ich es ja nicht berechnen oder sehe ich das falsch?

Seid ihr hier immer so unfreundlich?


----------



## dreifragezeichen (30. Januar 2011)

Nochmal zum Mitschreiben: Kinderelemente gleichen nicht automatisch ihre Höhe die ihres Elterelements an.

Also mußt du deine JS-Lösung aus der Schublade hervorkramen, die sicherlich die unbekannten Resthöhen gegenüber dem <li>-Element ermittelt, und dem jeweilgen <ul>-Element zuweist ;-)


----------



## owned139 (30. Januar 2011)

dreifragezeichen hat gesagt.:


> Nochmal zum Mitschreiben: Kinderelemente gleichen nicht automatisch ihre Höhe die ihres Elterelements an.


 
Ist mir bekannt, steht aber auch so gut wie in jedem Post von mir (indirekt) und so gut wie in jedem Post von mir frage ich auch wie ich das "Problem" beheben kann.


----------



## dreifragezeichen (30. Januar 2011)

Meine Beiträge hast du gelesen, "1 und 1" kannst du auch zusammenzählen?

Fein  Das "Problem" behebt hier in diesem Fall der unbekannten Elementhöhe dein propagierter JS-Code.

Fertitsch ;-)


----------



## dreifragezeichen (30. Januar 2011)

owned139 hat gesagt.:


> Ist mir bekannt, steht aber auch so gut wie in jedem Post von mir (indirekt) und so gut wie in jedem Post von mir frage ich auch wie ich das "Problem" beheben kann.


Auch wenn du deine Frage hier noch mehrfach wiederholst, läßt sich keine CSS-Lösung herbeizaubern, weil es sie aus besagtem Grunde  schlichtweg nicht gibt.


----------



## franz007 (31. Januar 2011)

Das einzige Element das sich so verhält wie du es willst ist eine Tabelle.


----------

