Menü-Liste im "Tabellenlayout"

[kevin_miesn]

Guten Morgen.

Ich möchte gerne in HTML/CSS ein Menü machen, welches wie folgt aussehen soll:

--------------------------------------
Bild1 | Bild2  |   Bild3   |  Bild4  |
--------------------------------------
home  |  about | portfolio | contact |
--------------------------------------

Bild1 usw.. sollen jeweils kleine Icons für die jeweiligen Menüpunkte("Home", "About" usw...) sein.
Das riecht ja eigentlich nach einer Tabelle, aber um Elemente im Design anzuordnen, sind Tabellen ja eigentlich seeeehr unschön. Deshalb suche ich nach einer Lösung, die mit Listen arbeitet. Kann mir jemand helfen?

Danke

[Gunnar Bittersmann]

@@kevin_miesn:

nuqneH

Das riecht ja eigentlich nach einer Tabelle

Von dem Geruch solltest du dich fernhalten.

Deshalb suche ich nach einer Lösung, die mit Listen arbeitet. Kann mir jemand helfen?

<nav>  
  <ul>  
    <li><a>home</a></li>  
    <li><a href="about">about</a></li>  
    <li><a href="portfolio">portfolio</a></li>  
    <li><a href="contact">contact</a></li>  
  </ul>  
</nav>

Das wäre das Menü auf der Startseite. Beachte, dass das 'a'-Element für die akuelle Seite kein @href-Attribut hat; der Meüpunkt der aktuellen Seite also nicht verlinkt ist. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Den Menüpunkten gibst du oben genügend Padding und das jeweilige Bild als Hintergrundbild. Dazu könne es sich anbieten, ihnen IDs zu geben.

Qapla'

[T-Rex]

Das wäre das Menü auf der Startseite. Beachte, dass das 'a'-Element für die akuelle Seite kein @href-Attribut hat; der Meüpunkt der aktuellen Seite also nicht verlinkt ist. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Aus der Quelle Zitiert:

Aktive Links zur aktuellen Seite verursachen drei Probleme:

• Wenn Besucher sie anklicken, verlieren sie unnötig Zeit.
• Schlimmer noch: Solche Links lassen die Besucher zweifeln, ob sie wirklich an der Stelle sind, wo sie glauben, dass sie sind.

Am schlimmsten ist, wenn Benutzer dann doch solchen sinnlosen Links folgen.

• Sie werden über die neue Stelle verwirrt sein, vor allem wenn die Seite zurück nach oben springt.

Spiegelstriche von mir

Dazu hätte ich mal eine Frage.
Wäre der User nicht noch mehr verwirrt über einen Menülink der nicht verlinkt ist? Ich würde die Seite sogar als Defekt halten. Vielleicht ärgert es den User so sehr, dass er die Seite sogar verlässt.

Gruß
verlinkter
T-Rex

[Beat]

Wäre der User nicht noch mehr verwirrt über einen Menülink der nicht verlinkt ist? Ich würde die Seite sogar als Defekt halten. Vielleicht ärgert es den User so sehr, dass er die Seite sogar verlässt.

Ein nicht verlinkter Link <a href=""> wäre tatsächlich verwirrend.
Aber in der Annahme, dass du etwas verwirrt bist, und einfach ein Label meinst:
Kommt darauf an, ob für dich die Erkenntnis "Here I am within the larger Context" verwirrend ist.

Jedem Tierchen sein Verwirrchen.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Ein nicht verlinkter Link <a href=""> wäre tatsächlich verwirrend.

<a href=""> != <a>

Man könnte das 'a'-Element beim aktuellen Menüpunkt auch weglassen. Das macht aber einerseits mehr Arbeit beim Scripting (weil man das End-Tag dann auch weglassen muss) und muss andererseits das Layout mit einem Element weniger hinbekommen.

HTML5 sieht ein 'a'-Element ohne @href für diesen Fall explizit vor.

Qapla'

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Wäre der User nicht noch mehr verwirrt über einen Menülink der nicht verlinkt ist?

Warum sollte er? Natürlich sollten sich die verlinkten Menüpunkte von dem nicht verlinkten visuell unterscheiden. Das möchte man ohnehin, um die aktuelle Seite im Menü zu kennzeichnen.

Qapla'

[T-Rex]

@@T-Rex:

nuqneH

Wäre der User nicht noch mehr verwirrt über einen Menülink der nicht verlinkt ist?

Warum sollte er? Natürlich sollten sich die verlinkten Menüpunkte von dem nicht verlinkten visuell unterscheiden. Das möchte man ohnehin, um die aktuelle Seite im Menü zu kennzeichnen.

Qapla'

Ich glaube ich bekomme Gunnar nie dazu mehr als 1 Zeile zu schreiben. Und recht hat er natürlich auch wie immer...

Gruß
besser Wissender Besserwisser
T-Rex

[Tabellenkalk]

Ich glaube ich bekomme Gunnar nie dazu mehr als 1 Zeile zu schreiben. Und recht hat er natürlich auch wie immer...

das kommt ja eigentlich nur auf die Fensterbreite drauf an...

[Gunnar Bittersmann]

@@Tabellenkalk:

nuqneH

Ich glaube ich bekomme Gunnar nie dazu mehr als 1 Zeile zu schreiben. Und recht hat er natürlich auch wie immer...

das kommt ja eigentlich nur auf die Fensterbreite drauf an...

Dass ich recht habe, ist von keiner Fensterbreite abhängig!! ;-b

Qapla'

[Beat]

Dass ich recht habe, ist von keiner Fensterbreite abhängig!! ;-b

Ja es gibt welche, die passen durch kein Fenster ;)

mfg Beat

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Wäre der User nicht noch mehr verwirrt über einen Menülink der nicht verlinkt ist? Ich würde die Seite sogar als Defekt halten.

Kennt der User nicht ausgegraute Menüpunkte aus vielen Anwendungsprogrammen. In Prä-Ribbon-Zeiten (ich will sie wieder haben) traten diese noch deutlicher zutage.

Matthias