dynamische Höhe eines Elementes innerhalb eines div

[Sergio Klemensberger]

Hallo zusammen

Ich bin gerade daran, eine alte Homepage, die noch mit Tabellen aufgebaut ist, umzubauen. Dabei habe ich ein div für die Navigation. Innerhalb des div gibt es Link-Elemente (Anzahl Links je Seite unterschiedlich, da unterschiedliche Anzahl Untermenüs). Danach soll es einen gleichfarbigen Balken (leeres Element) geben, und unten noch einen Email-Link (gleicher Link wie bereits oben). Die gesamte Navigation soll nun immer die gleiche fixe Höhe haben, unabhängig von der Anzahl Menüs bzw. Untermenüs. Die Höhe des Navigation-divs ist 500px. Ich brauche also irgendeine Möglichkeit, dass das leere (<a>, <b> oder <p> oder noch etwas anderes?) einfach so gross ist, dass es den leeren Platz innerhalb des div Elementes auffüllt.

Hier ein Auszug aus dem bisherigen Code:

<div class="navigation">  
 <a class="menu" href="../startseite.php" target="_parent">Home</a>  
 <a class="menu" href="../aktuell.php">Aktuelles</a>  
 <a class="menu" href="../vereinsgeschichte.php" target="_parent">Vereinsgeschichte</a>  
 <b class="menu">Kontakt</b>  
 <b class="untermenu">Vorstand</b>  
 <a class="untermenu" href="trainer.php">Trainer</a>  
 <a class="untermenu" href="verantwortliche.php">Verantwortliche</a>  
 <a class="menu" href="../sponsoren.php">Sponsoren</a>  
 <a class="leer" href="">&nbsp;</a>  
 <a class="menu" href='mailto:[e-mail]'>Webmaster</a>  
</div>

Das dazugehörige CSS:

div.navigation {  
  position:absolute;  
  top: 60px;  
  left: 10px;  
  width: 170px;  
  height: 500px;  
  text-align: left;  
}  
  
a.menu {  
 display:block;  
 background-color: #001E50;  
 color: #FFFFFF;  
 height: 18px;  
 text-align: left;  
 width: 100%;  
 font-size:11pt;  
 padding-left: 10px;  
}  
  
a.untermenu {  
 display:block;  
 background-color:#46648C;  
 color: #FFFFFF;  
 height:18px;  
 width: 100%;  
 text-align: left;  
 font-size: 10pt;  
 padding-left: 10px;  
}  
  
b.menu {  
 display:block;  
 background-color: #001E50;  
 color: #FFFFFF;  
 height: 18px;  
 text-align: left;  
 width: 100%;  
 font-size:11pt;  
 padding-left: 10px;  
}  
  
b.untermenu {  
 display:block;  
 background-color:#46648C;  
 color: #FFFFFF;  
 height:18px;  
 width: 100%;  
 text-align: left;  
 font-size: 10pt;  
 padding-left: 10px;  
}  
  
a.leer {  
 display:block;  
 background-color: #001E50;  
 /*height: 100%;*/  
 width: 100%;  
}

Besten Dank schon im Voraus für eure Hilfe!
Gruss Sergio

[suit]

Ich bin gerade daran, eine alte Homepage, die noch mit Tabellen aufgebaut ist, umzubauen.

weises vorhaben

Dabei habe ich ein div für die Navigation.

warum kleine unsortierte liste?

Innerhalb des div gibt es Link-Elemente (Anzahl Links je Seite unterschiedlich, da unterschiedliche Anzahl Untermenüs).

ich sehe keine <link />-elemente, nur <a />- und <b />-elemente (wobei ich grade am rätseln bin, <http://de.selfhtml.org/html/referenz/elemente.htm@title=was damit gemeint sein könnte>

Die Höhe des Navigation-divs ist 500px. Ich brauche also irgendeine Möglichkeit, dass das leere (<a>, <b> oder <p> oder noch etwas anderes?) einfach so gross ist, dass es den leeren Platz innerhalb des div Elementes auffüllt.

warum kann es nicht einfach nur so tun, sprich das umschließende element (ich bin immer noch für ein <ul />-element) hat einen hintergrund der von den darinliegenden elementen an geeigneter stelle überdeckt wird

eine fixe höhe in pixeln ist übrigens unklug, was machst du zb bei geänderter schriftgröße?

[Sergio Klemensberger]

Dabei habe ich ein div für die Navigation.
warum kleine unsortierte liste?

Beispiel? Ich kenne diesen Ansatz nicht...

Innerhalb des div gibt es Link-Elemente (Anzahl Links je Seite unterschiedlich, da unterschiedliche Anzahl Untermenüs).
ich sehe keine <link />-elemente, nur <a />- und <b />-elemente (wobei ich grade am rätseln bin, <http://de.selfhtml.org/html/referenz/elemente.htm@title=was damit gemeint sein könnte>

Sorry, habe mich nicht korrekt ausgedrückt. <a> stehen für Verweise auf andere Seiten, mit <b> wird das Element gekennzeichnet, auf welchem man sich gerade befindet (im Beispiel bei Kontakt - Vorstand)

Die Höhe des Navigation-divs ist 500px. Ich brauche also irgendeine Möglichkeit, dass das leere (<a>, <b> oder <p> oder noch etwas anderes?) einfach so gross ist, dass es den leeren Platz innerhalb des div Elementes auffüllt.
warum kann es nicht einfach nur so tun, sprich das umschließende element (ich bin immer noch für ein <ul />-element) hat einen hintergrund der von den darinliegenden elementen an geeigneter stelle überdeckt wird

ja, ist eine super idee! ich werde einmal versuchen, das "leere" Element wegzulassen und den Maillink einfach ganz unten anzuordnen.

danke für die sehr schnelle antwort!

[suit]

Beispiel? Ich kenne diesen Ansatz nicht...

solltest du dir http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=_unbedingt_ ansehen

Sorry, habe mich nicht korrekt ausgedrückt. <a> stehen für Verweise auf andere Seiten, mit <b> wird das Element gekennzeichnet, auf welchem man sich gerade befindet (im Beispiel bei Kontakt - Vorstand)

und das hast du grade erfunden?

ja, ist eine super idee! ich werde einmal versuchen, das "leere" Element wegzulassen und den Maillink einfach ganz unten anzuordnen.

aber mach vorher eine liste draus und gib dem maillink eine id ;)

[Sergio Klemensberger]

Sorry, habe mich nicht korrekt ausgedrückt. <a> stehen für Verweise auf andere Seiten, mit <b> wird das Element gekennzeichnet, auf welchem man sich gerade befindet (im Beispiel bei Kontakt - Vorstand)
und das hast du grade erfunden?

nein, das war schon immer so. denn die seite, auf der man sich befindet, soll nicht als link angezeigt werden.

ja, ist eine super idee! ich werde einmal versuchen, das "leere" Element wegzulassen und den Maillink einfach ganz unten anzuordnen.

aber mach vorher eine liste draus und gib dem maillink eine id ;)

das habe ich jetzt versucht. hier das resultat:

<ul id="Navigation">  
  <li class="menu"><a href="../startseite.php">Home</a></li>  
  <li class="menu"><a href="../aktuell.php">Aktuelles</a></li>  
  <li class="menu"><a href="../vereinsgeschichte.php">Vereinsgeschichte</a></li>  
  <li class="menu"><b>Kontakt</b></li>  
  <li class="submenu"><b>Vorstand</b></li>  
  <li class="submenu"><a href="trainer.php">Trainer</a></li>  
  <li class="submenu"><a href="verantwortliche.php">Verantwortliche</a></li>  
  <li class="menu"><a href="../sponsoren.php">Sponsoren</a></li>  
  <li class="menu"><a href="mailto:[e-mail]">Webmaster</a></li>  
</ul>

ul#Navigation {  
  position:absolute;  
  top: 60px;  
  left: 10px;  
  width: 170px;  
  height: 500px;  
  text-align: left;  
  background-color: #001E50;  
  margin: 0; padding: 0;  
  }  
  
li.menu {  
  list-style: none;  
 background-color: #001E50;  
 color: #FFFFFF;  
 height: 18px;  
 text-align: left;  
 width: 160px;  
 font-size:11pt;  
 padding-left: 10px;  
 margin: 0;  
 border-bottom: 1px solid #FFFFFF;  
 /*padding: 0;*/  
}  
  
li.submenu {  
 list-style: none;  
 background-color:#46648C;  
 color: #FFFFFF;  
 height:18px;  
 width: 160px;  
 text-align: left;  
 font-size: 10pt;  
 padding-left: 10px;  
 margin: 0;  
 border-bottom: 1px solid #FFFFFF;  
}

wie bekomme ich den Mail-Link ganz nach unten im <ul>?

[ChrisB]

Hi,

wie bekomme ich den Mail-Link ganz nach unten im <ul>?

In dem du ihn am UL ausgerichtet positionierst.

MfG ChrisB

[Sergio Klemensberger]

wie bekomme ich den Mail-Link ganz nach unten im <ul>?
In dem du ihn am UL ausgerichtet positionierst.

ich bringe es nicht zustande. kannst du mir helfen? ich soll es ja relativ positionieren, oder? aber wenn ich das so mache, dann sind die angaben, die ich mache, immer relativ zum letzten <li> element...

[suit]

wie bekomme ich den Mail-Link ganz nach unten im <ul>?
In dem du ihn am UL ausgerichtet positionierst.
ich bringe es nicht zustande. kannst du mir helfen? ich soll es ja relativ positionieren, oder? aber wenn ich das so mache, dann sind die angaben, die ich mache, immer relativ zum letzten <li> element...

nein. relativ zu position wo es sonst wäre - aber von position: relative; hat keiner etwas gesagt

[suit]

und das hast du grade erfunden?
nein, das war schon immer so.

was spricht gegen ein anderes, nicht missgebilligtes element? zb strong oder schlichtweg ein span-element mit der klasse/id "current"?

wie bekomme ich den Mail-Link ganz nach unten im <ul>?

sieh dir den link bez dem listenmenü nochmal an, die klassen menu/submenü kannst du dir sparen, wenn du mehrere ineinander verschachtelte listen nutzt

den mail-link bekommst du ganz nach unten, indem du ihn eindeutig identifizierbar machst - gib ihm zb die id "navigation-email" und positioniere ihn dann nach unten

[ChrisB]

Hi,

Ich bin gerade daran, eine alte Homepage, die noch mit Tabellen aufgebaut ist, umzubauen. Dabei habe ich ein div für die Navigation. Innerhalb des div gibt es Link-Elemente

Wenn du das ganze schon ueberarbeitest, koenntest du die Navigation auch gleich "vernuenftig" als *Liste* von Links umsetzen.

(Anzahl Links je Seite unterschiedlich, da unterschiedliche Anzahl Untermenüs). Danach soll es einen gleichfarbigen Balken (leeres Element) geben,

Du meinst diesen Link,

<a class="leer" href="">&nbsp;</a>

der auf nichts verlinkt?
Das ist ziemlicher Unfug - lass ihn bitte ganz weg.

und unten noch einen Email-Link (gleicher Link wie bereits oben). Die gesamte Navigation soll nun immer die gleiche fixe Höhe haben, unabhängig von der Anzahl Menüs bzw. Untermenüs. Die Höhe des Navigation-divs ist 500px. Ich brauche also irgendeine Möglichkeit, dass das leere (<a>, <b> oder <p> oder noch etwas anderes?) einfach so gross ist, dass es den leeren Platz innerhalb des div Elementes auffüllt.

Sowas gibt es nicht.

Mein Vorschlag waere, den letzten Link absolut am bottom der Navigation (die eine entsprechende *Mindest*hoehe verpasst bekommt) auszurichten.
Damit er dort nicht die vorhergehenden Links ueberlagern kann, wenn diese doch mal "hoeher" werden sollten als vorgesehen, bekommt die Navigation noch ein entsprechendes padding-bottom.

MfG ChrisB