vertikale Navigation ohne table-Element

[Stefan E.]

Hallo ForumsleserInnen,

meine Navigation ist horizontal, wobei neben jedem Punkt links eine
dunkelgraue Linie ist (43 Pixel hoch). Der rechte Navigationspunkt
soll rechtsbündig sein, insgesamt verteilen sich die verschiedenen
Unterpunkte auf einer Breite von 553 Pixel.

(Die hellgraue Linie dient nur zur Sichtbarmachung des Bereiches)

Derzeit habe ich es mit einer Tabelle gelöst, der HTML-Teil lautet:
<table>
 <tr>
  <td>Lage</td>
  <td>Stadthäuser Typ B</td>
  <td>Stadthäuser Typ A</td>
  <td>Wohnungen</td>
  <td>Kontakt</td>
  <td id="i">Impressum</td>
 </tr>
</table>

... und dazu folgende CSS-Definitionen:
table {
 border-collapse: collapse;
 bottom: 0;
 height: 43px;
 margin: 0;
 position: absolute;
 right: 0;
 width: 553px;
}

td {
 border-left: 1px solid #424242;
 font-family: Tahoma, Arial, sans-serif;
 font-size: 11px;
 padding-bottom: 3px;
 padding-left: 7px;
 text-transform: uppercase;
 vertical-align: bottom;
}

td#i { width: 40px; }

*********************************************************************

Wie kann ich es sauber, d.h. ohne den Einsatz des table-Elementes
lösen? Die Lösung muß auch im Internet Explorer funktionieren.

Viele Grüße,
Stefan E.

[Manuel B.]

Ich grüsse den Cosmos,

Wie kann ich es sauber, d.h. ohne den Einsatz des table-Elementes
lösen? Die Lösung muß auch im Internet Explorer funktionieren.

Wieso nimmst du keine Liste, die ist für sowas gedacht.
Und ja, das kann sogar der IE.

Möge das "Self" mit euch sein

[Stefan E.]

Hallo Manuel,

Wie kann ich es sauber, d.h. ohne den Einsatz des table-Elementes
lösen? Die Lösung muß auch im Internet Explorer funktionieren.

Wieso nimmst du keine Liste, die ist für sowas gedacht.
Und ja, das kann sogar der IE.

ok, dann ist der HTML-Teil so:
<ul>
 <li>Lage</li>
 <li>Stadthäuser Typ B</li>
 <li>Stadthäuser Typ A</li>
 <li>Wohnungen</li>
 <li>Kontakt</li>
 <li>Impressum</li>
</ul>

Nur jetzt kommt das eigentliche Problem, wie genau muß die dazuge-
hörige CSS-Definition aussehen, dass es optisch das von mir ge-
wünschte Ergebnis gibt. Hier weiß ich mir keinen Rat und möchte
Dich um Deine Hilfe bitten.

Viele Grüße,
Stefan E.

[kungschu]

Hallo.

Menüs aller Art, Fleisch wie Fischgerichte.

MfG, Kungschu.

[Stefan E.]

Hallo,

Menüs aller Art, Fleisch wie Fischgerichte.

ist nett gemeint, hilft mir nur leider nicht weiter. Oder gibt es dort
eine Liste, die so in etwa funktioniert, wie ich es brauche?

Kurzfassung:
-> alle Navigationspunkte haben in Summe (inkl. der Abstände, Linien
   usw.) eine feste Breite von 553 Pixeln
-> die einzelnen Punkte haben links einheitlich etwas Abstand und als
   Begrenzung eine senkrechte Linie (kein Problem)
-> die Verteilung der Punkte erfolgt in Abhängigkeit von der Länge
   der Inhalte, ähnlich wie bei einer Tabelle

Ohne hier jemand auf die Füße treten zu wollen, aber das Thema ist
bei Weitem nicht so trivial, wie es vielleicht scheint. Die Aussage
"Nimm eine Liste" oder Dein Link eben helfen da nicht wirklich. Am
Ende haben wir eine Menge Beiträge, aber keine Lösung :-(

Viele Grüße,
Stefan E.

PS: Falls es jemand _sicher_ weiß, dass sowas nicht möglich ist,
    wäre auch die Aussage hilfreich.

[kungschu]

Hallo.

Kurzfassung:
-> alle Navigationspunkte haben in Summe (inkl. der Abstände, Linien
   usw.) eine feste Breite von 553 Pixeln

Möglich.

-> die einzelnen Punkte haben links einheitlich etwas Abstand und als
   Begrenzung eine senkrechte Linie (kein Problem)

Genau.

-> die Verteilung der Punkte erfolgt in Abhängigkeit von der Länge
   der Inhalte, ähnlich wie bei einer Tabelle

Auch möglich. (wenn vielleicht auch etwas stressig, den IE auch mitmachen zu lassen)

Ohne hier jemand auf die Füße treten zu wollen, aber das Thema ist
bei Weitem nicht so trivial, wie es vielleicht scheint. Die Aussage
"Nimm eine Liste" oder Dein Link eben helfen da nicht wirklich. Am
Ende haben wir eine Menge Beiträge, aber keine Lösung :-(

Ohne dir auf die Füße treten zu wollen: Die Lösung sollst ja eigentlich auch du (self) entwickeln. Ich dachte, Listamatic liefert dir vielleicht Ansätze, die du verfolgen kannst.? Wie du Punkt drei browserübergreifend löst, würde mich am Ende auch interessieren.

MfG, Kungschu.

[Stefan E.]

Hallo,

Kurzfassung:
-> alle Navigationspunkte haben in Summe (inkl. der Abstände, Linien
   usw.) eine feste Breite von 553 Pixeln
Möglich.

Wie genau soll sowas möglich sein? Natürlich könnte ich für jedes
LI-Element die Breite festlegen, aber etwas "russisch" ist die
Variante schon. Wenn ein Punkt dazukommt/wegfällt/sich ändert,
müssen die wieder neu berechnet werden. Und was ist, wenn jemand
als Standard eine diktengleiche Schriftart benutzt o.ä.

Bitte schreibe mal ein kurzes Beispiel, wie Du die feste Breite er-
reichen willst. OK, wenn alle Punkte die gleiche Länge haben, ist
es trivial (kann dann serverseitig die 553 auf Anzahl der Punkte
aufteilen), aber darum geht es ja hier nicht.

-> die Verteilung der Punkte erfolgt in Abhängigkeit von der Länge
   der Inhalte, ähnlich wie bei einer Tabelle
Auch möglich. (wenn vielleicht auch etwas stressig, den IE auch mitmachen zu lassen)

Auch hier wäre es schön, wenn Du die Aussage etwas mit Fakten aus-
füllst.

***

Nur den ersten Teil oder nur den letzten kann man in der Tat sehr
einfach realisieren (bei ersten bekommen alle LI's die gleiche
Breite, so dass es genau 553 ergibt; beim zweiten legt man nur
den Abstand links und die Linie fest, aber dann sind es nicht die
553 Pixel). Also wie sieht die Lösung aus, die ja lt. Deiner Aus-
sage möglich ist?

Ohne dir auf die Füße treten zu wollen: Die Lösung sollst ja eigentlich auch du (self) entwickeln. Ich dachte, Listamatic liefert dir vielleicht Ansätze, die du verfolgen kannst.?

Um diese Diskussion hier mal zu beenden, ich habe viele Jahre hier
bei SELFHTML mitgearbeitet und war auch Mitglied im Developer-Team,
vorwiegend im Bereich CSS. Will damit sagen, dass ich schon etwas
Ahnung von CSS habe und meine Frage ...

Wie du Punkt drei browserübergreifend löst, würde mich am Ende auch interessieren.

ist eben genau die. Wie kann ich
li { display: inline; list-style-type: none; }
in einem UL-Element mit fester Breite gleichmäßig verteilen?

Viele Grüße,
Stefan E.

[kungschu]

Hallo.

Wie genau soll sowas möglich sein? Natürlich könnte ich für jedes
LI-Element die Breite festlegen, aber etwas "russisch" ist die
Variante schon. Wenn ein Punkt dazukommt/wegfällt/sich ändert,
müssen die wieder neu berechnet werden. Und was ist, wenn jemand
als Standard eine diktengleiche Schriftart benutzt o.ä.

Bitte schreibe mal ein kurzes Beispiel, wie Du die feste Breite er-
reichen willst. OK, wenn alle Punkte die gleiche Länge haben, ist
es trivial (kann dann serverseitig die 553 auf Anzahl der Punkte
aufteilen), aber darum geht es ja hier nicht.

Achso. Das Menü soll sich also dynamisch an den Inhalt anpassen. Ich hatte jetzt an ein (ja, triviales) festes Menü gedacht.

Ich wollte keinenfalls aussagen, dass ich eine Lösung parat habe. Ich nahm an, es ist ein gewisses Gefummel notwendig, um die Sache zu realisieren. Ob das mit wechselnden Inhalten noch geht, ist die Frage.

Wenn ich dich nun richtig verstanden habe:
Das Menü soll gleiche Breite + gleiches Padding/Border bei unterschiedlichen Inhalten beibehalten, auch wenn Menüpunkte, etwa mittels php, wechseln und somit die Länge einzelner li variiert.

MfG, Kungschu.

[Stefan E.]

Wenn ich dich nun richtig verstanden habe:
Das Menü soll gleiche Breite + gleiches Padding/Border bei unterschiedlichen Inhalten beibehalten, auch wenn Menüpunkte, etwa mittels php, wechseln und somit die Länge einzelner li variiert.

Das Gesamtmenü ist immer maximal 553 Pixel breit. Bei den einzelnen
Punkt ist die Breite, siehe Bild, verschieden. Nur der linke Abstand
und die Rahmenlinie links haben alle Punkt. Der ganz rechte Menü-
punkt (Impressum) bildet den rechten Abschluß des Menüs.

Die Änderung der Inhalte ist eigentlich unwahrscheinlich, es geht
nur darum, dass nicht alle Punkte gleichbreit sein sollen (sieht
besch... aus und geht auch vom Platz her nicht) und auch nicht die
rechten Abstände bei allen Punkten gleichgroß sein sollen. Bei den
langen Menüpunkten soll der Platz auch deutlich größer sein als bei
den kurzen. Eben so, wie es auf dem Bild jetzt ist.

Die Hinterlegung einer Breite für jeden der sechs Punkte will ich
eigentlich vermeiden, dann lasse ich es lieber als Tabelle. Ich
weiß sehr genau, dass es böse [TM] ist, aber die Variante klappt
einwandfrei und 99,9 % aller Besucher werden es nie merken oder
sich gar daran stören. Der Rest der Website ist sauber, ohne
EPO und Tabellen ;-)

Viele Grüße,
Stefan E.

[Mel]

Hallo Stefan,

ich habe vor einiger Zeit genau an dem gleichen "Problem" oder sagen wir lieber an der gleichen Herausforderung gesessen. Mein Fazit war, es ist nicht möglich dies mit reinem CSS UND einer Liste zu lösen. Ich habe mit Prozentwerden der li´s herumexperimentiert etc. und kann Dir im Detail nicht  merh sagen was ich alles genau gemacht habe aber am Ende habe auch ich eine Tabelle verwendet was einwandfrei funktioniert.

wenn man gewährleistet das die logische ABfolge von Inhalten auch in einer Layouttabelle gewährleistet ist und es aus o.g. Gründen einfach das sinnvollste ist spricht meiner Meinung nichts dagegen sie zu nutzen.

vg melanie

[Gernot Back]

Hallo Mel,

ich habe vor einiger Zeit genau an dem gleichen "Problem" oder sagen wir lieber an der gleichen Herausforderung gesessen. Mein Fazit war, es ist nicht möglich dies mit reinem CSS UND einer Liste zu lösen. Ich habe mit Prozentwerden der li´s herumexperimentiert etc. und kann Dir im Detail nicht  merh sagen was ich alles genau gemacht habe aber am Ende habe auch ich eine Tabelle verwendet was einwandfrei funktioniert.

naja, mir würde zu dem Thema auch wieder der erzwungene Blocksatz einfallen, den man auf LI-Elemente mit display:inline anwenden könnte, wenn man als letztes in die Liste ein mit so vielen  s gefülltes LI-Element einfügt, dass es in die zweite Zeile umbricht, die das umgebende UL-Element mit text-align:justify; aufgrund einer Height-Angabe in Verbindung mit overflow:hidden; nicht anzeigt.

Ob so eine Methode mit einem strukturell unsinnigen inhaltsleeren LI-Element aber sinnvoller ist als eine Tabelle, wage ich zu bezweifeln.

Gruß Gernot

[Mel]

Hi Gernot ,

naja, mir würde zu dem Thema auch wieder der erzwungene Blocksatz einfallen, den man auf LI-Elemente mit display:inline anwenden könnte, wenn man als letztes in die Liste ein mit so vielen  s gefülltes LI-Element einfügt, dass es in die zweite Zeile umbricht, die das umgebende UL-Element mit text-align:justify; aufgrund einer Height-Angabe in Verbindung mit overflow:hidden; nicht anzeigt.

auch nach 3maligen lesen nicht kapiert ;) ich ahne zwar vage was du meinst aber ob das browserübergreifend funktioniert glaube ich spontan nicht.

Ob so eine Methode mit einem strukturell unsinnigen inhaltsleeren LI-Element aber sinnvoller ist als eine Tabelle, wage ich zu bezweifeln.

ja ich auch. vor die wahl gestellt dann auf jeden fall eine kleine simple layouttabelle als mit verunstaltete listen inkl. aufgeblähtem css ..

vg melanie

[Stefan E.]

Hallo Melanie,

naja, mir würde zu dem Thema auch wieder der erzwungene Blocksatz einfallen, den man auf LI-Elemente mit display:inline anwenden könnte, wenn man als letztes in die Liste ein mit so vielen  s gefülltes LI-Element einfügt, dass es in die zweite Zeile umbricht, die das umgebende UL-Element mit text-align:justify; aufgrund einer Height-Angabe in Verbindung mit overflow:hidden; nicht anzeigt.

auch nach 3maligen lesen nicht kapiert ;) ich ahne zwar vage was du meinst aber ob das browserübergreifend funktioniert glaube ich spontan nicht.

für Browser, die text-align: justiy; können, ist es kein so großes
Problem. Auf einen normalen Text bezogen, erzeugt man ein letztes
Wort, welches so lang ist, dass der Browser eine neue Zeile dafür
anfangen muß. Aufgrund des Blocksatzes wird der überschüssige Platz
in der ersten Zeile auf die Leerzeichen zwischen den Wörtern ver-
teilt (leider aber genau gleichmäßig).

Ob so eine Methode mit einem strukturell unsinnigen inhaltsleeren LI-Element aber sinnvoller ist als eine Tabelle, wage ich zu bezweifeln.

ja ich auch. vor die wahl gestellt dann auf jeden fall eine kleine simple layouttabelle als mit verunstaltete listen inkl. aufgeblähtem css ..

Hier habe ich ja den auf das Wesentliche vereinfachten Quelltext ge-
postet, wer es mit der Liste auch hinbekommt, nur zu, ich bin ge-
spannt. Aus meiner Sicht ist es nicht möglich. Zumal ich dem Nutzer
auch die Chance geben will, dass er die Schrift im Browser vergrößert
und die Sache soll dann noch lesbar sein.

Viele Grüße,
Stefan

[Stefan E.]

Hallo Gernot,

naja, mir würde zu dem Thema auch wieder der erzwungene Blocksatz einfallen, den man auf LI-Elemente mit display:inline anwenden könnte,

die Idee klingt gut, ist es aber leider nicht. Bei Blocksatz teilt der
Browser den überschüssigen Leerraum durch die Anzahl der Leerzeichen
in der Textzeile auf, d.h. die Abstände rechts sind dann immer gleich
groß, was so nicht gewollt ist.

Wieauchimmer, ich für meinen Teil komme zu der Meinung, dass es nicht
möglich ist, das von mir gewünschte Menü ohne Einsatz von Tabellen zu
realisieren. Wer es hinbekommt, der kann gern hier die Lösung ver-
öffentlichen. Unten noch der vereinfachte Quelltext zu meinem
Problem, aufgrund :last-child nur im Firefox einwandfrei.

Also, wer kann diese Optik auch mit einer Listennavigation erzeugen?

Viele Grüße,
Stefan

***

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="language" content="de">

<title>Beispiel</title>

<style type="text/css">
  a {
   background: inherit;
   color: inherit;
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
  }

body {
   background: #FFF;
   color: #424242;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 11px;
  }

table {
   background: #EEE;
   border-collapse: collapse;
   height: 43px;
   width: 553px;
  }

td {
   border-left: 1px solid #424242;
   padding-bottom: 3px;
   padding-left: 7px;
   vertical-align: bottom;
  }

td:last-child { width: 10px; }

</style>

</head>
<body>

<table>
 <tr>
  <td><a href="#">Lage</a></td>
  <td><a href="#">Stadthäuser Typ B</a></td>
  <td><a href="#">Stadthäuser Typ A</a></td>
  <td><a href="#">Wohnungen</a></td>
  <td><a href="#">Kontakt</a></td>
  <td><a href="#">Impressum</a></td>
 </tr>
</table>

<ul>
  <li><a href="#">Lage</a></li>
  <li><a href="#">Stadthäuser Typ B</a></li>
  <li><a href="#">Stadthäuser Typ A</a></li>
  <li><a href="#">Wohnungen</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Impressum</a></li>
</ul>

</body>
</html>

[kungschu]

Hallo.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
    <meta http-equiv="content-style-type" content="text/css">  
    <meta http-equiv="language" content="de">  
  
 <title>Beispiel</title>  
  
 <style type="text/css">  

~~~~~~css
  
  a {  
   background: inherit;  
   color: inherit;  
   text-decoration: none;  
   text-transform: uppercase;  
   white-space: nowrap;  
  }  
  
  body {  
   background: #FFF;  
   color: #424242;  
   font-family: Tahoma, Arial, sans-serif;  
   font-size: 11px;  
  }  
  
  table {  
   background: #EEE;  
   border-collapse: collapse;  
   height: 43px;  
   width: 553px;  
  }  
  
  td {  
   border-left: 1px solid #424242;  
   padding-bottom: 3px;  
   padding-left: 7px;  
   vertical-align: bottom;  
  }  
  
  td:last-child { width: 10px; }  
  
  /* ################################################### */  
  
  ul {  
   padding:0px;  
   margin:0px;  
  }  
  
  li {  
   list-style:none;  
   display:inline;  
   border:0px;  
   margin:0px;  
   padding:0px;  
   background:#eeeeee;  
   float:left;  
  }  
  
  li a {  
   text-decoration:none;  
   color:inherit;  
   margin:0px;  
   border-left:1px solid #000000;  
   padding:30px 6px 1px 6px;  
   background:#eeeeee;  
   font-size:11px;  
   display:block;  
  }  
  
  ul li a#a {  
   width:30px;  
  }  
  
  ul li a#b {  
   width:125px;  
  }  
  
  ul li a#c {  
   width:125px;  
  }  
  
  ul li a#d {  
   width:81px;  
  }  
  
  ul li a#e {  
   width:53px;  
  }  
  
  ul li a#f {  
   width:61px;  
  }  
  
  /* ################################################### */  

~~~~~~html
  
 </style>  
  
</head>  
<body>  
  
<table>  
 <tr>  
  <td><a href="#">Lage</a></td>  
  <td><a href="#">Stadthäuser Typ B</a></td>  
  <td><a href="#">Stadthäuser Typ A</a></td>  
  <td><a href="#">Wohnungen</a></td>  
  <td><a href="#">Kontakt</a></td>  
  <td><a href="#">Impressum</a></td>  
 </tr>  
</table>  
  
<br><br><br><br>  
  
<ul>  
  <li><a id="a" href="#">Lage</a></li>  
  <li><a id="b" href="#">Stadthäuser Typ B</a></li>  
  <li><a id="c" href="#">Stadthäuser Typ A</a></li>  
  <li><a id="d" href="#">Wohnungen</a></li>  
  <li><a id="e" href="#">Kontakt</a></li>  
  <li><a id="f" href="#">Impressum</a></li>  
</ul>  
  
</body>  
</html>  

Ich habe es mal versucht und im Firefox 2.0.0.3 auf Mac OS ein nahezu indentisches Ergebnis erreicht. Allerdings habe ich disply:block verwendet und jedem Link eine ID zugewiesen. Du kannst es dir ja mal ansehen..

MfG, Kungschu.

[kungschu]

Hallo.

Es heißt natürlich identisches und diplay:block;

MfG, Kungschu.

[kungschu]

Hallo.

Mir viel gerade bei web.de auf, dass die im header (div id="navportal") ein solches Menü mit unterschiedlichen Breiten der einzelnen li haben. Die haben jedem li tatsächlich eine id zugewiesen und recht üppige CSS Angaben mitgeben müssen. Kannst du dir ja mal ansehen, wenn du doch noch eine Liste verwenden willst. Vielleicht ist die Tabelle aber doch letztendlich bequemer.

MfG, Kungschu.

[D.R.]

Hallo,

Wie du Punkt drei browserübergreifend löst, würde mich am Ende auch interessieren.

ist eben genau die. Wie kann ich
li { display: inline; list-style-type: none; }
in einem UL-Element mit fester Breite gleichmäßig verteilen?

In deinem Fall wäre die float-Variante wohl praktischer. Also eher so:

ul {overflow:auto; list-style: none; …}
li {float:left; width: ...em;}

Siehe auch: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal@title=CSS-basierte Layouts > horizontale Navigationsleisten> (das 2. Beispiel verwendet float)

mfg. Daniel

[Stefan E.]

Habe nur im Betreff leider horizontal mit vertikel verwechselt, sorry.