Hauptnavigation mit unterschiedlichen Style

[Carnygel]

@wosch

Ich bin schon wirklich begriffstutzig. ;-(

Habe bei allen drei navfirst...html die Ergänzung:
<span class="{ID_CAT}"> ... </span>
vorgenommen.

in der style.css-Datei ergänzte ich die Class mit:

.34 {
color:#000000;
font-size:30px;
}

Zum einen kann ich jetzt mit dem vorletzen Hinweis:
"wenn du das gemacht hast ... Code ...."
nichts anzufangen.

Zum anderen wo muss ich die ID_CAT, also konkret die
Kategorie 34, 52, 90 etc. eingeben?

Sorry, du wirst sicherlich schon graue Haare bekommen haben.

[wosch]

du wirst sicherlich schon graue Haare bekommen haben

Ja, stimmt.

Der Wert 34 sind ein Beispiel !!!
Du mußt den Wert DEINER idcat, der Kategorie die anders dargestellt werden soll, nehmen.
Das kann 34, 2 234 oder auch 19 sein.
Das kannst nur du wissen (wenn du ihn dir anzeigen läßt oder in den Quelltext schaust)

Und für diesen - DEINEN Wert - setzt du die Klasse in der CSS.

Du solltest vielleicht den Link von @GaMbIt_ zu selfhtml anklicken,
dort wird u.a. erläutert was die Tags div und span auszeichnet und wie man sie wo anwendet.
div erzeugt einen Umbruch, span nicht, deswegen wird span genommen um innerhalb eines Absatzes/Block Wörter/Sätze separat zu formatieren ohne den Rest im Textfluß zu stören.
Und diese Eígenschaft wird hier genutzt.
Wenn dich diese Erklärung irritiert, vergesse sie, ist nur der theoretische Hintergrund zu dem was gemacht wird.

Vielleicht kann jemand anders es mal erklären was zu tun ist,
meine didaktischen Fähigkeiten scheinen bei Carnygel auf keinen fruchtbaren Boden zu fallen

[Carnygel]

Hallo wosch,

ich weiß ich nerve. Denke aber, dass wir momentan etwas aneinander
vorbeischreiben.

Diese Einträge habe ich 1:1 eingegeben:

<span class="{ID_CAT}"> ... </span>
vorgenommen.

in der style.css-Datei ergänzte ich die Class mit:

.34 {
color:#000000;
font-size:30px;
}

Was div und span bedeuten, weiß ich eigentlich schon.
Aber bei php habe ich so meine Probleme.

Habe ich mir irgenwo (oben) verschrieben? Muss ich etwas
ersetzten (z. B. statt {ID_CAT} die 34)? Wenn ja, werden mehrere
Kategorien mit Komma (34,52,90) angegeben?

Ein Test mit dem Eintrag <span class="34"> hat keine Änderung
in der Darstellung ergeben. Eigentlich hätte der Text in 30px
erscheinen müssen.

[wosch]

Der Wert 34 sind ein Beispiel !!!
Du mußt den Wert DEINER idcat, der Kategorie die anders dargestellt werden soll, nehmen.
Das kann 34, 2 234 oder auch 19 sein.
Das kannst nur du wissen (wenn du ihn dir anzeigen läßt oder in den Quelltext schaust)

Und für diesen - DEINEN Wert - setzt du die Klasse in der CSS.

Angezeigt wird der Wert DEINER idcat wenn du anklickst:
Content -> Artikel
und dann mir der Mouse über der Kategorie gehst -> idcat: xxx
xxx ist der angezeigte Wert.

Und diesen angezeigten Wert mußt du in der CSS als Klasse einsetzen.

[Carnygel]

Der Wert ist mir ja bekannt. Es handelt sich tatsächlich um die Kategorien 52,90 etc.
Aber stimmt meine vorhin genannte Schreibweise - oder muss ich die Werte abändern?
Den Eintrag in der CSS (ich verstehe darunter style.css) habe ich wie oben genannt geschrieben. Aber so funktioniert es nicht.

[Dodger77]

Das sollte auch nicht funktionieren, denn IDs und Klassen dürfen nicht mit einer Ziffer beginnen, siehe:

http://www.w3.org/TR/CSS21/syndata.html#characters

In dem Fall einfach in den Modultemplates ändern zu

Code: Alles auswählen

<span class="cat{ID_CAT}"> ... </span> 

und im CSS zu (z.B.):

Code: Alles auswählen

.cat1234 {
  /* der Menupunkt wird ganz toll aussehen */
}

[wosch]

Den Tipp von @Dodger solltest du beherzigen.

Ansonsten muß die CSS so aussehen
ACHTUNG, nur Beispiel bassierend auf den Mustermandanten,

Code: Alles auswählen

.xx a.navileft_open  {
	font-size:24px;
}

xx = Wert deiner Kategorie
Dann wird die Kategorie mit der idcat: xx (wenn sie geöffnet ist) in 24 fett dargestellt.

Alles andere sollest du aber nun selber hinbekommen.

@dodger,
doch funktioniert auch nur mit Zahl, gerade getestet, aber du hast recht, einfach cat_ davor und es stimmt wieder.

[Carnygel]

@Dodger77
vielen Dank dass du dich in die Fußstapfen von @wosch begeben hast und deine Nerven an mir aufreibst.

Ich habe deine Anweisungen wie folgt ausgeführt:


navfirst_off.html:
<!-- BEGIN:BLOCK -->
<div class="navi"><span class="cat{ID_CAT}"><a href="{HREF}" class="navileft_passive" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

navfirst_on.html:
<!-- BEGIN:BLOCK -->
<div class="navi"><span class="cat{ID_CAT}"><a href="{HREF}" class="navileft_passive" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

navfirst_open.html:
<!-- BEGIN:BLOCK -->
<div class="navi"><span class="cat{ID_CAT}"><a href="{HREF}" class="navileft_passive" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

...
das selbe auch jeweils für die drei html's von navsecond und navthird


In der style.css schrieb ich

.cat52 {
color:#000000;
font-size:30px;
}

.cat90 {
color:#EEEEEE;
font-size:30px;
}

(es gibt tatsächlich die Kategorien 52 und 90)

und trotzdem funktioniert es nicht.

Habe ich immer noch einen Fehler?

[tono]

Ist das irgendwo online??

Gib mal nen URL.

[wosch]

Ist das irgendwo online??

Er soll es nach meinem Muster machen, das funktioniert - getestet.

Und er soll den Tipp von @dodger mit dem Vorsatz cat berücksichtigen,
dann funktioniert es auch im FF

(Dem IE ist die Zahl egal, dem FF nicht, da müssen zwingend Buchstaben davor.
Ich hatte beim ersten Mal nur mit IE gestetet, später noch mit dem FF)

[Carnygel]

Hallo an alle,
HURRA! Ich (wir) habe(n) es geschafft. Nach einigen Experimenten
steht es jetzt. Ich hatte den span-Tag an der falschen Stelle gesetzt:


navfirst_on.html:
FALSCH
<!-- BEGIN:BLOCK -->
<div class="navi"><span class="cat{ID_CAT}"><a href="{HREF}" class="navileft_passive" style="padding-left:10px;" title="{NAME}">{NAME}</a></span></div>
<!-- END:BLOCK -->

RICHTIG
<!-- BEGIN:BLOCK -->
<div class="navi"><a href="{HREF}" class="navileft_passive" style="padding-left:10px;" title="{NAME}"><span class="cat{ID_CAT}">{NAME}</span></a></div>
<!-- END:BLOCK -->

Nun klappt es. Vielleicht hätte ich auch noch die Hintergrundfarbe der entspechenden Tabellenzelle ändern können Aber damit möchte ich euch nicht mehr belästigen.

Noch an alle, die mitgewirkt haben: HERZLICHEN DANK!

[saschar]

Hallo.
War genau auf der selben Suche.
Und es klappt auch soweit, allerdings nur beim HOVER, ändert es die Farbe.

Hätte aber gerne, dass die Farbe auf dem aktiven Link bleibt zudem hätte ich noch einen DIV-Balken, denn ich gerne in der jeweiligen Farbe der NAV-Kategorie-Farbe hätte... aber der ist zweitrangig.

in der Stylesheet-Datei habe ich für die NAV-OFF:

a.cat7:link, a.cat7:visited { color: silver}
a.cat7:hover { color: #DB9E25}

Und für die NAV-ON:

cat7a:link, cat7a:visited, cat7a:hover, cat7a:active, { color: fuchsia}

Die Modul-Template sehen so aus:

<!-- BEGIN:BLOCK -->
<li><a href="{HREF}" title="{NAME}"><span class="cat{ID_CAT}">{NAME}</span></a></li>
<!-- END:BLOCK -->

und

<!-- BEGIN:BLOCK -->
<li><a href="{HREF}" title="{NAME}"><span class="cat{ID_CAT}a">{NAME}</span></a></li>
<!-- END:BLOCK -->

Aber irgendwie will es nicht.

Noch mal zusammengefasst:
Die Navigation-Links sind jetzt schwarz, fahre ich mit der Maus drüber, dann wechselt die Farbe entsprechend den obigen NAV-OFF. Klicke ich dann drauf, ist der Link SCHWARZ und bleibt auch so, obwohl der HTML-Code

<li><a href="{HREF}" title="{NAME}"><span class="cat{ID_CAT}a">{NAME}</span></a></li>

ausgibt.

Hat da jemand eine Idee.

Gruß
Sascha