Vorschlag zu den Schaltflächen in der Navigationsspalte

spinne · Beitrag Verfasst: 02.10.2008, 12:22

Hallo,

die fehler-haft.de-Seite finde ich ganz nett - inhaltlich und optisch. Ich schlage vor, die gesamte Fläche eines Menüpunktes in der Navigationsspalte (Angebote, Referenzen, Preisliste usw.) anklickbar zu machen - also überall dort, wo nach dem Klick grün gefärbt wird, muss der Mauszeiger zur Hand werden

Daniel Schneider · Beitrag Verfasst: 03.10.2008, 01:07

Danke für das Lob! Bezüglich des Tipps: ich weiß, dass das unergonomisch ist und nicht der Konvention entspricht - befinde mich da aber ein wenig in der Bredouille: ich möchte nicht mit mehr als jeweils einem Hintergrund arbeiten (es soll nur grau oder grün geben, keine dritte Farbe oder Aufhellung), gleichzeitig sollen aber auch bereits "aktivierte" Feldbeschriftungen noch einen Hover-Effekt haben können. Also wie z.B. gerade jetzt das Feld Forum - das weiterhin anklickbar ist (und zur Forenübersicht zurückführt), obwohl es bereits ausgewählt ist. Ähnlich ist es beim Bereich Wissenswertes.

Da wäre ich mit meinen CSS-Kenntnissen dann leider am Ende. Bin aber jederzeit dankbar für Tipps, wie man die Feldbeschriftungen weitern hovern lassen kann, ohne dass sich die aktive Graphik verändert.

Graphiken zum "Hovern" möchte ich vermeiden, da zu große CSS-Bildwechsel einen Browser auf langsamen Systemen doch recht leicht ins Stottern bringen können und ich die Seiten so schlicht wie möglich halten will.

spinne · Beitrag Verfasst: 07.10.2008, 11:39

Hallo,

Daniel Schneider hat geschrieben:Bin aber jederzeit dankbar für Tipps, wie man die Feldbeschriftungen weitern hovern lassen kann, ohne dass sich die aktive Graphik verändert

Wenn ich's richtig verstehe, sorgt dieser CSS-Abschnitt

ul#forum li {
...
background-color: rgb(135, 188, 48 ); background-image:url(../forum-o.jpg);

unter anderem dafür, dass der Hintergrund für den Forum-Menüpunkt beim Anklicken grün wird. Habe aber nicht gefunden, wo das Bild für nicht angeklicktes graues Hintergrund eingebunden ist. Deswegen kann momentan keine Komplettlösung anbieten.

Als Anregung/Tipp - hier www.statistik.sachsen.de sind die Menüpunkte 'Suche', 'Sitemap', 'Impressum' usw. hover-fähig und als Schaltfläche - und nicht nur der Text anklickbar auch nach dem Aktivieren. Dafür, dass die ganze Fläche, z.B. bei der 'Suche' und nicht nur der Text anklickbar ist, ist diese Formatierung

#menuetop .footline_b { display:block; }

in der CSS-Datei http://www.statistik.sachsen.de/stylegu ... lamain.css verantwortlich. Vielleicht kannst du diese CSS-Lösung in deiner Navigationsspalte verwenden.

Übrigens, es wäre von Vorteil, wenn du in deinem Quellcode - die doppelt vorhandene Tags

Code: Alles auswählen

DOCTYPE,  <html> und <body>

reduzierst - (kein gültiges HTML

) dann ist es leichter in diesem Code zu recherchieren.

spinne · Beitrag Verfasst: 07.10.2008, 13:14

So, Daniel, hab' mein CSS-know-how mobilisiert und kann so eine Lösung vorschlagen. In deinem Style-Abschnitt weist du der Klasse blockanzeige_css das display:block;-Format zu:

.blockanzeige_css {
display:block;
}

Und im HTMl-Code werden Verweise mit dieser Klasse formatiert:

Code: Alles auswählen

  <ul id="weblog" ><a href="../fehlerhaftes/" class="blockanzeige_css"><li>Weblog</li></a></ul>
  <ul id="forum">
    <a href="index.php" class="blockanzeige_css"><li>Forum</li></a>
  </ul>

. Der Mauszeiger wird beim Überfahren zur Hand, aber hover-Effekt mit Änderung der Hintergrundfarbe funktioniert bei mir im Internet Explorer in dieser Lösung nicht - das heisst ich habe an dieser Stelle aufgehört, nach einer Lösung zu suchen. Vielleicht klappt's bei dir

Edit 09.10.2008
diese geänderte Lösung

<ul id="weblog">
<li><a href="../fehlerhaftes/" class="blockanzeige_css">Weblog</a></li>
</ul>
<ul id="forum">
<li><a href="index.php" class="blockanzeige_css">Forum</a></li>
</ul>

funktioniert mit Internet Explorer und Firefox mit der Einschränkung, dass die ganze Zeile, nicht aber die Räume unten und oben zur anklickbaren Schaltfläche werden.

Daniel Schneider · Beitrag Verfasst: 09.12.2008, 15:18

Ich wollte nur noch mal kurz Danke sagen für die Mühe, die Du Dir gemacht hast: Danke!

Ich hatte es nicht vergessen, nur bin ich zeitlich einfach nicht dazu gekommen, im Hintergrund an den Seiten Veränderungen vorzunehmen. Der Inhalt hatte Vorrang (Die Fehler-Haft-Seiten haben keine zentrale CSS-Datei sondern mehrere Stilquellen, die ihrerseits wieder verzweigen und teils nicht geringe Modifizierungen enthalten. Teilweise gibt es auch browserspezifische Anpassungen. Auch die Quelltexte an sich müssen überall geändert werden, das ist "mal so zwischendurch" nicht zu bewerkstelligen.).

Nun endlich hat es aber geklappt, ich habe mir die Hauptnavigation mal vorgeknöpft und sie ein wenig ergonomischer gestaltet: die Bereiche, die bei Mausberührung wechseln, sind nun bereits vorher optisch erkennbar und die Klickfläche läuft nun tatsächlich über die gesamte Zeilenbreite. Getestet ist die Navigation mit IE 6, IE 7, Firefox, Opera und Safari und sieht überall einigermaßen akzeptabel aus.

Deine Tipps waren dabei Gold wert - nochmals vielen Dank dafür!

Vorschlag zu den Schaltflächen in der Navigationsspalte

Wer ist online?