Navigationsleiste (Button-Style)

[Lovemate]

Guten Morgen!
Ich habe mich nun für ein fixes Layout entschieden, da die ganzen flexiblen Lösungen dermaßen viele Nachteile boten....Werde an dem flexiblen Thema dranbleiben aber diese Seite erhält definitv feste pixel-Werte :cry:

Zur Navigationsleiste:
Ich möchte keine (wie ich finde häßliche) Tab-Reiter und auch keine durch slants getrennte Navi haben! Ich möchte klare, moderne an den Ecken abgerundete Buttons haben.
Wie die "sliding doors"-Technik funktioniert weiß ich grob.
Jetzt bitte ich um folgende Tipps:

- wie gestalte ich die Navigation flexibel (veränderbare Schriftgrößeneinstellungen durch User)?
- wie kann ich drei Zustände (normal, mouseover, press,) perfekt umsetzen? (mit a:hover aber wie genau?)
- wie kann die Flexibilität auch vertikal gewährleistet werden, horizontal ja durch sliding doors mit 2 image-dateien ?
- Ich habe die fertigen Buttons bereit, Hilfe beim Einsetzen, Anwenden wäre gigantisch!

Grüße

L'mate

 

[T!P-TOP]

Hier ist ne gute Beschreibung vorhanden: A List Apart: Articles: Sliding Doors of CSS

wie gestalte ich die Navigation flexibel (veränderbare Schriftgrößeneinstellungen durch User)?

Du meinst "A- A A+" ? Jedes A verlinken und bei mouseclick-Event setzt Du mittels javaScript die Schrifgröße hoch, runter bzw. auf den Standard Wert. Kannst es aber auch mir PHP machen und die ausgewählte Schriftgröße bspw. in dem Session Array speichern, nachdem du eine neue Sitzung gestartet hast, somit bleibt die Schriftgröße auch bei Neuladen der Seite so, wie Sie der Besucher eingestellt hat.
Wenn du dich für die JavaScript Variante entscheidest, kannst Du Cookies setzen und die ausgewählte Schriftgröße in diesen speichern.

wie kann ich drei Zustände (normal, mouseover, press,) perfekt umsetzen? (mit a:hover aber wie genau?)

Was definierst du als perfekt?

wie kann die Flexibilität auch vertikal gewährleistet werden, horizontal ja durch sliding doors mit 2 image-dateien ?

Ganz gleich wie horizontal, nur dass Du die Listelemente nicht floatest.

Kannst ja mal die Image Datein hochladen und deren URI posten, dann bastel ich dir da was.

Edit:

Ich habe mich nun für ein fixes Layout entschieden, da die ganzen flexiblen Lösungen dermaßen viele Nachteile boten

Nein, das ist genau umgekehrt. Ein Fixes Layout kann meiner Meinung nach mit einem Flexiblen nicht mal annähernd mithalten. Ein Flexibles Layout ist, sofern es gut umgesetzt wurde, in jeder Auflösung tadellos, was die Proportionen angeht. Feste Pixel Werte verwende ich in Flexiblen Layouts lediglich für die min- und max-Größen sowie für Innenabstände - das wars dann aber auch schon.

 

[Lovemate]

Guten Morgen, Danke erstmal für die prompte Hilfestellung!
Gehe grad mal kurz auf deinen Input ein...

Hier ist ne gute Beschreibung vorhanden: A List Apart: Articles: Sliding Doors of CSS

Hab, ich weiß nicht wieviele gelesen - aber letztlich tippe ich nur unterschiedliches CSS ab und das Verständnis selbst kreativ eine Navi zu gestalten klappt irgendwie nicht!
Das wird dann das a oder auch die li's oder die ul und dann auch noch die span gefloatet und gepaddingt und gemargined... aber so wirklich verstehen und die Stellschrauben selbst benutzen - da fehlt's (noch)! Ich verstehe durchaus, was das tutorial da macht und von mir will aber warum und wie ich selbst damit rumexperimentieren könnte, das fehlt (noch).
An manchen Werten zu drehen verändert was, an anderen passiert dann wieder gar nichts...confusing!!! Dabei ist gerade die NAVI so extrem wichtig in meinen Augen!

Du meinst "A- A A+" ? Jedes A verlinken und bei mouseclick-Event setzt Du mittels javaScript die Schrifgröße hoch, runter bzw. auf den Standard Wert. Kannst es aber auch mir PHP machen und die ausgewählte Schriftgröße bspw. in dem Session Array speichern, nachdem du eine neue Sitzung gestartet hast, somit bleibt die Schriftgröße auch bei Neuladen der Seite so, wie Sie der Besucher eingestellt hat.

okay, dann eher php....hab zwar 'nen fetten Javascript-Schinken hier stehen, mache ich aber nur wenns gar nicht anders geht, denn in z.Bsp. den meisten Firmennetzwerken ist JS eben deaktiviert.

Wenn du dich für die JavaScript Variante entscheidest, kannst Du Cookies setzen und die ausgewählte Schriftgröße in diesen speichern.

Sofern die Cookies nicht gelöscht werden, oder? Aber wie gesagt: JS, nur wenns gar nicht anders geht!
Was definierst du als perfekt?

Wenns funktioniert und zudem noch passabel aussieht und sich flexibel den Größeneinstellungen des clients anpaßt und einigermaßen ähnlich aussieht auf unterschiedlichen Einstellungen/Browsern.

Ganz gleich wie horizontal, nur dass Du die Listelemente nicht floatest.

Dachte, das geht nicht anders?

Kannst ja mal die Image Datein hochladen und deren URI posten, dann bastel ich dir da was.

Leider kann ich gar nichts hochladen, weil dieser Dateimanager hier bei mir nicht funzt....

Edit:
Nein, das ist genau umgekehrt. Ein Fixes Layout kann meiner Meinung nach mit einem Flexiblen nicht mal annähernd mithalten. Ein Flexibles Layout ist, sofern es gut umgesetzt wurde, in jeder Auflösung tadellos, was die Proportionen angeht. Feste Pixel Werte verwende ich in Flexiblen Layouts lediglich für die min- und max-Größen sowie für Innenabstände - das wars dann aber auch schon.

Diese Thematik hatte ich hier schon ageschnitten - ohne befriedigendes Ergebnis: Schau mal hier:

http://www.html.de/css/39781-conten...r-designs-auf-verschiedenen-bildschirmen.html

und hier:

http://www.drweb.de/magazin/flexible...g-der-zukunft/

Alles schön und gut, aber mein Projekt für den Kunden muss fertig werden und ich kann nicht tagelang Vorteile
des flexiblen Designs hören, aber letztlich läßt es sich (für mich drzeit) einfach nicht umsetzen!
Und genau das ist dasPproblem: em und %Werte in allen Ehren, Jubel auf max- und min-width, aber der Content wie
Text-Absätze, backt-to-top-liniking, Bilder und Grafiken (weil sie nun mal ne feste px-Größe haben) passen sich aber nicht an und zerschießen somit das Layout beim
Betrachten in verschiedenen Auflösungen und viewport-Größen!
Wenn ich genug Zeit habe, dann gerne, aber dieses Projekt muss fertig werden...
Bei meinem Zweiten reden wird dann nochmal über Flexibilität...

Solange sich die Schriftgröße in den NAVI-Buttons und allgemein in den containern
anpaßt bin ich schon mal happy fürs erste - die Kür dann bei meinem 2. Auftrag, denn ich schon in der Tasche habe!
Aber first things first!

L'mate

 

[Lovemate]

Hier das HTML der Navigation!
"navkeep" ist zur Position im Dokumentenfluß. Der background ist halbtransparent in weiß, damit das background-image der Seite leicht durchschimmert!
"hornav", also die NAVI soll 3 Button-Arten haben (normal, mauszeiger drüber und angeklickt (a:hover, current)
Die Farben sind dunkelblau, hellblau, orange in der Reihenfolge der Maus-Effekte.

Gewünschte Features:
Buttongröße (horizontal & vertikal ) passt sich an Inhaltsmenge Text und Schriftgrößeneinstellungen durch User nahtlos an
und behält aber dabei die aberundeten Ecken des images und Schriftpositionierung (padding/margin) proportional bei.
Sollte die Größe extrem vergrößert werden, sollte die Navi umbrechen und sie hinteren Elemente untereinander stehen, damit zumindest
die Funktionalität gewährleistet bleibt, wenn schon nicht das Layout!

<div class="navkeep">
<ul class="hornav">
<li id="current"><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
<li id=""><a href="blabla.html"><span>blabla</span></a></li>
</ul>


</div>