Problem mit CSS-Dropdown-Menü

[JensB]

Hallo, ich bin's nochmal.

Ich habe eine horizontale Tabelle als Navigationsmenü angelegt. Diese hat die Breite 100%, und besitzt acht <td>'s mit jeweils 12.5% Breite. In jeder dieser <td>'s steht ein Link. Wenn ich auf einen Link klicke (oder mit meiner Maus darüber bin) soll ein Untermenü erscheinen.

Dazu habe ich mit gedacht: Eine zweite Tabelle unter der ersten Tabelle, die standardmäßig style="display: none;" hat. Sie hat genau n * 12.5% als margin-left, wenn es das n. Untermenü sein soll.

Problem: Diese Tabelle sollte über dem eigentlichen Text der Seite liegen, was natürlich so nicht der Fall ist. Das heißt, wenn diese Tabelle sichtbar wird, verdrängt sie den anderen Text. Meine Lösungsidee war, wenn die Höhe dieser Untertabelle bekannt ist (sagen wir die sei h) dann setze ich das margin-bottom dieser Tabelle auf -h. Aber das ist natürlich nicht so sauber, denke ich. Kann man da irgendwas tricksen mit position oder display? Ich kenn mich da leider nicht so aus.

Habt ihr sonst Tips und Anregungen?

Danke für eure Mühe,
Jens

PS: Ich weiß, dass Navigationsmenüs besser aus Listen erstellt werden als aus Tabellen. Aber für Listen wäre meine Fragestellung exakt die selbe :-).

 

[Imbericle]

PS: Ich weiß, dass Navigationsmenüs besser aus Listen erstellt werden als aus Tabellen. Aber für Listen wäre meine Fragestellung exakt die selbe :-).

Warum machst du es dann nicht?

bitte kompletten Quelltext/Link, sonst ist das Helfen schwer.

MfG

 

[_Thor_]

Die Grundzüge solltest du damit schon haben, Feintuning musst du selber probieren. Habs nicht getestet.

<ul>
  <li>Test1</li>
  <li>Test1
    <ul>
      <li>Sub1</li>
    </ul>
  </li>
  <li>Test1</li>
</ul>

ul:after {clear: both; display: block; visibility: hidden; content: '';}
ul li {float: left; width: 12.5%;}
ul li ul {display: none;}
ul li:hover ul {display: block;}

 

[Efchen]

Problem: Diese Tabelle sollte über dem eigentlichen Text der Seite liegen

Nimm sie aus dem Textfluss. Relative bzw. absolute Positionierung bieten sich hier an.

Und schmeiß um Himmels Willen die Tabellen raus. Die haben das nicht verdient, dass man sie so missbraucht.

 

[JensB]

Hallo,

ja ich weiß, mit Tabellen ist das ganz böse. Aber ich tu mich schwer damit, die Listen entsprechend zu formatieren... Aber ich werd mich jetzt mal dransetzen, hab ja schließlich Semesterferien

Also ich hab mich mak drangesetzt und es geschafft die Liste halbwegs zu formatieren.
Problem: Die Liste geht über die gesamte Breite des Fensters, das sind bekannterweise 100%. Also: 8 <li>'s, das bedeutet 12.5% Breite jeweils. Ich sage jedem <li> per CSS Folgendes:

ul#Nav {
    margin: 0;
    height: 50px;
}
ul#Nav li {
    list-style: none;
    width: 12.5%;
    display: inline;
    border: 1px solid yellow;
}

Aber die <li>s sind danach weder gleich breit, noch füllen sie das gesamte Fenster aus... Warum?

Danke für eure Hilfe,
Jens

 

[Efchen]

Problem: Die Liste geht über die gesamte Breite des Fensters, das sind bekannterweise 100%.

Nein, sie geht nur über 100% der Breite des Elternelements, maximal der des Viewports. Normales Verhalten eines Block-Elements.

Aber die <li>s sind danach weder gleich breit

Das kann ich nciht glauben, denn immerhin gelten Deine Angaben für ALLE li innerhalb ul#Nav gleichermaßen. Das kannst Du ja mit Firebug wunderbar nachprüfen, wie breit die sind.

noch füllen sie das gesamte Fenster aus.

Maximal das ganze Elternelement ul#Nav. Wenn das kleiner wird, dann werden auch die 12.5% weniger Pixel.

Abgesehen davon sind 12.5% * 8 ja schon 100%, dann kommen da noch in der Breite 16px für 16 Rahmen dazu, also 100% + 16px.
Mit gemischten Einheiten kann man jedenfalls nicht rechnen.

Wenns noch Probleme gibt, wünsche ich mir einen Link zur Seite, weil ich nur da Firebug einsetzen kann.

 

[_Thor_]

Du hast den Listenelementen display: inline gegeben, damit kann man ihnen keine Breite mehr zuweisen. Wenn du ihnen, wie in meinem Beispiel float: left gibst, werden sie auch in der Breite angepasst.

 

[JensB]

Hallo, vielen Dank für die Erleuchtung, habe es mit float: left; probiert und es klappt einwandfrei. Aber jetzt kommt leider das nächste Problem:

In den <li>s sind Texte, die teilweise zweizeilig werden. Jetzt möchte ich den Text innerhalb der <li>s vertikal zentieren. Aber ein vertival-align: middle; geht ja nur in Tabellen und die darf ich ja nicht benutzen ;-) Was kann ich tun?

Gruß
Jens

 

[_Thor_]

Mit

li {
  display: table-cell;
  vertical-align: middle;
}

Der IE unterstützt das aber erst ab der Version 8, in den früheren Versionen wird es ignoriert.

 

[JensB]

Hmm.. deshalb wär ich froh, wenn es da ne andere Variante gäbe, aber da sieht's mau aus, oder?

 

[_Thor_]

Ja, da sieht es mau aus. Ich würde es trotzdem nutzen, dann sieht es wenigstens in den Browsern die es unterstützen besser aus.

 

[JensB]

Habe gerade noch was Anderes entdeckt: line-height

Wenn ich die line-height auf die doppelte Schriftgröße setze ist es dadurch zentriert. Aber ist das sauber?

 

[_Thor_]

Das funktioniert auch bei umgebrochenem Text in einem Listenelement?

Einzeiliger Text kann damit sehr gut vertikal zentriert werden, aber zweizeiliger auch? In einem kurzen Test hat das bei mir nicht geklappt. War aber nicht wirklich intensiv der Test.

 

[Efchen]

Hallo, vielen Dank für die Erleuchtung, habe es mit float: left; probiert und es klappt einwandfrei.

Das Problem mit den 100% + 16px sollte aber bestehen bleiben, es sei denn, Du arbeitest ungünstigerweise mit dem Quirks Mode und dem IE6.

 

[JensB]

Ja, das stimmt. Habe die Breiten jetzt in Pixeln angegeben, ist eigtl auch sinnvoll da ich sowieso die Seite mit einer festen Breite von 820px erstellen möchte.

Aber zweizeilig klappt es nicht so gut.. Vor allem wenn ich die Schriftgröße variabel halten will, dann ändert sich jeweils die Ausrichtung.

Leider muss ich hier zwischenzeitlich konstatieren dass das Layout mit Tabellen wesentlich einfacher von der Hand geht, auch wenn das semantisch keinen Sinn macht (toller Satz^^).

 

[Efchen]

Ja, das stimmt. Habe die Breiten jetzt in Pixeln angegeben, ist eigtl auch sinnvoll da ich sowieso die Seite mit einer festen Breite von 820px erstellen möchte.

Möchetn das Deine Besucher auch? 820px ist schon ne ganze Menge!

Leider muss ich hier zwischenzeitlich konstatieren dass das Layout mit Tabellen wesentlich einfacher von der Hand geht, auch wenn das semantisch keinen Sinn macht.

Wenn man jahrelang etwas falsch gemacht hat, dann erscheint das falsche natürlich leichter. Aber hätte man nie mit Tabellenlayout gearbeitet, hätte man vielleicht auch nicht das Bedürfnis, etwas vertikal zu zentrieren. Und wenn man das von der Seite betrachtet, dann ist es vermutlich tatsächlich auch gar nicht so wichtig...für das Abrufen von Informationen ist es jedenfalls unwichtig. Auf Tabellenlayout zu verzichten, ist aber unumgänglich.

 

[JensB]

Also ich denke dass 820px durchaus in Ordnung sind. Ich weiß, dass das natürlich spekulativ ist, aber 820px kann man denke ich im 21. Jahrhundert voraussetzen. Aber ich bin nicht der profi-Webdesigner, und ich habe eine Titelgrafik die halt diese Abmessung hat, und daher wüsste ich auch sonst nicht was ich damit machen soll..

Aber mal wieder btt: Ich habe mich bei meiner Navigationsleiste mit der <ul> ganz nach selfHTML gerichtet, siehe diesen Link hier: Horizontale Navigationsleiste mit gleichen Breiten

Aber dort werden auch keine zwei- oder mehrzeiligen <li>'s unterstützt. Daher bin ich gerade etwas ratlos.

 

[Efchen]

Also ich denke dass 820px durchaus in Ordnung sind.

Da wird Dir jemand mit einem Viewport von 772px Breite widersprechen.

Ich weiß, dass das natürlich spekulativ ist, aber 820px kann man denke ich im 21. Jahrhundert voraussetzen.

Das ganz sicher nicht. Die einen Displays werden immer kleiner (Handy, PDA, Netbook) und bei denen, die immer größer werden, wird die Wahrscheinlichkeit, dass jemand sein Fenster noch maximiert, auch immer kleiner und daraus folgernd sind 820px eher viel.

Aber ich bin nicht der profi-Webdesigner, und ich habe eine Titelgrafik die halt diese Abmessung hat, und daher wüsste ich auch sonst nicht was ich damit machen soll..

Verkürzen, bzw. als Hntergrundbild einsetzen, denn dadurch würde sich das Element nicht verbreitern, bzw. so verkleinert sich das Bild automatisch bei kleinerem Viewport.

Aber dort werden auch keine zwei- oder mehrzeiligen <li>'s unterstützt. Daher bin ich gerade etwas ratlos.

Ich sagte ja, man darf im WWW nicht alles so verbissen sehen. Wenns zweizeilig wird, na und? Schlimmer ists, wenn für Menüpunkte nur eine pixelgenau Größe festgelegt wird, aber die Schrift vergrößert wird, so dass diese dann über den viel zu kleinen Button hinaus ragt.

 

[_Thor_]

aber 820px kann man denke ich im 21. Jahrhundert voraussetzen.

Gerade in der Zeit der Smartphones und Netbooks kann man dies eben nicht. Ein Smartphone hat deutlich weniger als 820px und bei einem Netbook muss der Browser auch nicht maximiert sein.

Aber mal wieder btt: Ich habe mich bei meiner Navigationsleiste mit der <ul> ganz nach selfHTML gerichtet, siehe diesen Link hier: Horizontale Navigationsleiste mit gleichen Breiten

Aber dort werden auch keine zwei- oder mehrzeiligen <li>'s unterstützt. Daher bin ich gerade etwas ratlos.

Tabellenzellen oder display: table-cell sind nunmal die einzigen Möglichkeiten, Text vertikal zu zentrieren. Wenn Text umgebrochen wird, soll er ja in einer neuen Zeile anfangen und nicht den darüberliegenden Text verschieben.

 

[Efchen]

Man kann ja einfach trotzdem display:table-cell verwenden, dann ist das halt bei Browsern der älteren Generation, die das nicht verstehen, der Text nicht zentriert. Nutzer von Browsern, die gängige Standards nicht unterstützen, können nicht erwarten, dass ständig auf sie Rücksicht genommen wird. Und das Nicht-zentriert-sein hat ja keine Auswirkung auf die Nutzbarkeit, die ist ja nach wi vor 100% gewährleistet.