Hilfe beim Mehrfarbigen horizontalen Tabmenue

[Ferro]

Hallo Gemeinde,

bin am verzweifeln. Schaffe es einfach nicht, das wie bei fotocommunity | Fotografie - Bilder hochladen - Fotografen & Models so ein MENUE zu bauen.

Die haben das mit Superfish gemacht. Ich möchte, so wie dort zu sehen, unterschiedliche Farben verwenden.

Wie geht das?

Danke für jeden Tipp

 

[Myhar]

AW: Hilfe beim Mehrfarbigen horizontalen Tabmenue

Um es kurz und bündig zu beantworten (Mehr ist es nämlich nicht):
Du kannst jedem <li> eine eigene ID geben, dann kannst du auch jeden Punkt seperat stylen.

L. G.

 

[tr4ze]

AW: Hilfe beim Mehrfarbigen horizontalen Tabmenue

Grundsätzlich richtig, aber nicht mit einem ID. Eine Klasse währe der bessere weg
z.B.

.button {
  ...
}
.red {
  ...
}
.green {
  ...
}
<li class="button red"></li>
<li class="button green"></li>

 

[Myhar]

AW: Hilfe beim Mehrfarbigen horizontalen Tabmenue

Wieso wäre (ohne h) eine Klasse der bessere Weg? Sicher kann man es auch über eine Klasse lösen, jedoch sollte jeder Menüpunkt doch nur einmal auf der Seite vorkommen, deshalb kann man auch eine id verwenden
Sollten zwei Buttons gleich gestyled werden, dann sind Klassen natürlich der richtige Weg, das stimmt.

L. G.

Edit: Den Zustand für aktiv/inaktiv sollte man natürlich schon über eine Klasse steuern. Ja was für einen selber logisch ist, ist für denjenigen der keine Ahnung hat nicht ganz so offensichtlich Also prinzipiell sind Klassen und IDs (oder auch nur Klassen, kommt auf das Menü an) dein Freund in der Sache. (Und Ferro ist jetzt hoffentlich nicht endgültig verwirrt )

 

[tr4ze]

AW: Hilfe beim Mehrfarbigen horizontalen Tabmenue

Nun, wen man die <li> tags als Objekte versteht so haben alle die selbe Eigenschaft, nämlich "button".
Alle haben nun noch eine weitere Eigenschaft z.B. "red" oder "green" oder"active".
Das lässt sich mit Klassen einfach viel flexibler lösen.
Wenn ich ein Objekt im Markup habe, das nur einmal vorkommt und dessen Eigenschaft auch nur einmal vorkommt, dann ist ID besser, weil eindeutiger. Hier wäre(ohne h ) z.B. das Elternelement <ul> dafür prädistiniert id="navigation".

z.B. So:

/* Start Navigation */
#navigation {
  ...
}
.button {
  ...
}
.active {
  ...
}
/*End Navigation */

/* Start Navigation prop*/
.green {
  ...
}
.red {
  ...
}
/*End Navigation prop*/
  <ul id="navigation">
      <li class="button green active"></li>
      <li class="button red"></li>
  </ul>

Natürlich kann man jedes Element im Baum mit einem eigenen ID Ausweisen, nur schreibt man dann auch demensprechend viel.

Weil :

<li id="button" class="green active"></li>

zwar in den meisten Browsern keinen Fehler wirft, aber eben symantisch auch nicht korrekt ist, da <li id="button"> ja mehrfach vorkommt.

Ich hoffe das war verständlich, und ich brabbel hier nicht wirres Zeug.

 

[Myhar]

AW: Hilfe beim Mehrfarbigen horizontalen Tabmenue

Natürlich kann man jedes Element im Baum mit einem eigenen ID Ausweisen, nur schreibt man dann auch demensprechend viel.

Weil :

<li id="button" class="green active"></li>

zwar in den meisten Browsern keinen Fehler wirft, aber eben symantisch auch nicht korrekt ist, da <li id="button"> ja mehrfach vorkommt.

Ich hoffe das war verständlich, und ich brabbel hier nicht wirres Zeug.

Nur so war das von mir auch nicht gemeint
Wenn wirklich jeder Menüpunkt anders gestyled werden soll, dann kann jeder Menüpunkt natürlich eine andere ID bekommen. Doppelte IDs sind ja grundsätzlich zu vermeiden
Aber irgendwie führt diese Diskussion zu nichts, da wir beide Recht haben. Ich habe mir jedoch schon fast gedacht, dass mein Vorschlag IDs zu verwenden so eine Diskussion auslöst ;-)

L. G.

Wieder mal Edit: Ich hab mir die FC Seite mal genauer angesehen, die setzen Ihre Navigation mittels JS um, was aber unnötig ist. Das geht auch ohne JS (siehe tr4ze und meine Posts)