Hallo,
um zu verdeutlichen auf welcher Seite sich der Besucher gerade befindet, soll (zusätzl. zum Hühnerpfad) die jeweilige „hover“-Farbe erhalten bleiben.
Diesen Effekt versuche ich bisher vergeblich über CSS zu steuern.
Hier eine Testseite:
http://waveswebdesign.de/webmaster/kunden/fischer/se…
Googeln brachte bisher keine Lösung.
Vielen Dank für Tipps
Wave
Hallo Wave,
versuch mal bitte zu erläutern in wieweit Deine Testseite Deinen Wunsch erläutern soll 
Ich versteh leider nur Bahnhof.
Gruß, der Rosslauer.de
Moin,
um zu verdeutlichen auf welcher Seite sich der Besucher gerade
befindet, soll (zusätzl. zum Hühnerpfad) die jeweilige
„hover“-Farbe erhalten bleiben.
Diesen Effekt versuche ich bisher vergeblich über CSS zu
steuern.
Das lässt sich nicht über CSS steuern.
hover ist ein Status, der eintritt, wenn die Maus sich über dem Element befindet.
Den Status „aktuelle Seite“ kennt CSS nicht. Das musst Du selber machen, idealerweise mit einer serverseitigen Programmiersprache. Beim Aufbau der Seite musst Du dann den Menüpunkt, der auf die aktuelle Seite verlinkt, mit einer eigenen Klasse versehen. CSS kann dann das Aussehen für diese Klasse festlegen.
Liebe Grüße,
-Efchen
P.S.: Auch die CSS-Pseudoklasse „:active“ beschreibt nur den Status des Anklickens des Links. :active beschreibt definitiv nicht die „aktive“ Seite.
Zuerst mal vielen Dank für die Anregungen.
Bin etwas weiter gekommen und habe den gewünschten Effekt über CSS erreicht:
http://waveswebdesign.de/webmaster/kunden/fischer/se…
Beim Firefox getestet ist der Effekt in Ordnung. Beim IE springen leider die aktivierten ersten 3 Buttons. Kann diese Lösung also noch nicht in die Originalseite übernehmen.
Nochmals vielen Dank bei der Lösungssuche
Wave
Moin,
genau genommen sieht es im Moment im IE besser aus als im Firefox, das liegt aber an Deinen Fehlern.
Du hast einen Doctype, der den IE in den Quirks Mode versetzt, weswegen er ein falsches Box Model benutzt, weswegen es im IE besser aussieht, weil Du das Box Model falsch angewendet hast.
Deswegen steht Dein Link im Firefox auch rechts über, weil Du den auf eine Breite von 200px gesetzt hast, obwohl das Listenelement nur 192px breit ist. Daher hast Du ja auch mit dem negativen margin rumgebastelt.
Setz doch einfach die Breite auf 100%. Dann ist es so breit wie das Listenelement, margin/padding natürlich auf 0.
Und statt float zu verwenden, wo Du ja nichts floaten willst bzw. keine zwei Block-Elemente nebeneinander setzen willst, solltest Du den Link lieber mit „display:block“ zum Block-Element machen, denn das ist es ja eigetlich, was Du mit dem float unbeabsichtigt erreichen willst.
Aber wie gesagt, am wichtigsten ist es, den IE auch in den Standards Mode zu versetzen, denn sonst hast Du an allen Ecken und Enden Darstellungsunterschiede.
Liebe Grüße,
-Efchen
Firefox, das liegt aber an Deinen Fehlern.
habe versucht zu verbessern 
)
Du hast einen Doctype, der den IE in den Quirks Mode versetzt,
auch hier - ob richtig weiss ich nicht
… weil Du
den auf eine Breite von 200px gesetzt hast, obwohl das
Listenelement nur 192px breit ist.
korrigiert
Setz doch einfach die Breite auf 100%. Dann ist es so breit
wie das Listenelement, margin/padding natürlich auf 0.
korrigiert
Und statt float zu verwenden, …
korrigiert
Aber wie gesagt, am wichtigsten ist es, den IE auch in den
Standards Mode zu versetzen, denn sonst hast Du an allen Ecken
und Enden Darstellungsunterschiede.
hoffe das es so stimmt?
Gruß Wave
habe versucht zu verbessern
hoffe das es so stimmt?
Ehrlich gesagt, sehe ich nichts von den Änderungen, die ich vorgeschlagen habe, außer dass jetzt ein Kommentar neben dem Doctype sagt „IE7 Quirks Mode please“ - das ist ja das genaue Gegenteil von dem, was ich geschrieben habe.
Gruß,
-Efchen
… sehe ich nichts von den Änderungen, die ich
vorgeschlagen habe, außer dass jetzt ein Kommentar neben dem
Doctype sagt „IE7 Quirks Mode please“ - das ist ja das genaue
Gegenteil von dem, was ich geschrieben habe.
Die vorgeschlagenen Änderungen habe ich in der Test CSS-Datei - so wie ich es verstanden habe - übernommen:
#menu-1 {
display:block
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0px;
background-color:#F6F1D2;
}
#menu-2 {
display:block
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0px;
background-color:#FFFF00;
}
Zur Doc-Type:
wie müsste ich diese Ändern?
„“
Vielen Dank für ergänzende Tipps.
Bin beim Googeln zu diesem Hinweis leider nicht weiter gekommen.
Gruß Wave
Die vorgeschlagenen Änderungen habe ich in der Test CSS-Datei
- so wie ich es verstanden habe - übernommen:
Und dann die Änderung vergessen, hochzuladen?
#menu-1 {
display:block
width: 100%;
Nichts davon zu sehen.
Das Listenelement selber hat auch noch ein padding. So kann der Link sich natürlich nicht über das komplette Listenelement erstrecken.
Zur Doc-Type:
wie müsste ich diese Ändern?
Bin beim Googeln zu diesem Hinweis leider nicht weiter
gekommen.
Das glaube ich Dir nicht.
Nichts davon zu sehen.
den Link öffnen:
http://waveswebdesign.de/webmaster/kunden/fischer/se…
Quelltext anzeigen
im Quelltext den Link im „Stylesheet“ css-layout-navi-Test.css anwählen.
Unterhalb von /* Navigator */
habe ich #menu-1 - 2 und 3 zum testen angepasst.
Das Listenelement selber hat auch noch ein padding. So kann
der Link sich natürlich nicht über das komplette Listenelement
erstrecken.
ich teste ja nur die drei Buttons von oben gesehen. Hängt möglicherwweise damit zusammen? Oder ich verstehe nicht was mit dem Listenelement gemeint ist?
Gruß Wave
Lustig,
mein Firebug zeigt das nicht an und mein Firefox liest diese Styles auch nicht aus.
Da wird irgendwo ein Fehler drin sein in Deinem Stylesheet, weswegen Firefox das nicht liest.
na war ein Versuch wert )
Vielen Dank bei der Lösungssuche
Wave
http://jigsaw.w3.org/css-validator/validator?uri=htt…
Korrigieren, dann funktionierts wahrscheinlich auch…