Neue Navi - Meinungen

  • Hallo Leute,
    ich habe für meine Seite, die übrigens bald online sein wird, eine neue Navigationsleiste gestaltet.
    Hauptsächlich geht es natürlich um Verbesserungsvorschläge, Meinungen zum Design.
    Hier sind zwei Fotos:
    1. Alles "unselektiert"


    [attachment=1]<!-- ia1 -->Unbenannt.PNG<!-- ia1 -->[/attachment]



    2. Willkommen selektiert, Rest "unselektiert"


    [attachment=0]<!-- ia0 -->Unbenannt_sel.PNG<!-- ia0 -->[/attachment]


    Sooooo,
    was sagt ihr dazu? Kann man was besser machen? Oder ist es schon "gut genug"?


    MfG
    Philipp E.


    PS:
    1. Was mich schon immer interessiert hat: Sagt man das Navi, die Navi oder der Navi??
    2. Es hat ein wenig "Apple-Navi-Style", ich weiß :D

  • Sieht vernünftig aus, aber kannst du nicht erstmal die komplette Seite machen und uns dann fragen, wie das Gesamtdesign aussieht?
    Erstens sieht man die einzelnen Elemente dann im Zusammenhang und zweitens musst du dann nicht für jedes Element ein neues Thema aufmachen.


    Mir fällt so nämlich auch nichts viel zu verbesserndes auf, vielleicht die Abstände links und rechts zwischen Menüpunkt und Navi-Rand kleiner machen, aber da muss man dann halt sehen, wies im Gesamtdesign aussieht und die selektierten Menüpunkte dunkler und mit besser sichtbarem Farbverlauf machen, damit sich das in die Navi einpasst.


    PS: Es heißt die Navigation.

  • So sieht die Navigation im Gesamtkonzept aus:
    [attachment=0]<!-- ia0 -->Unbenannt.PNG<!-- ia0 -->[/attachment]


    Bei der Selektion werde ich keinen Verlauf einbauen.

  • Soooo, das mit der Breite der Navi ist nun kleiner:


    [attachment=0]<!-- ia0 -->Unbenannt.PNG<!-- ia0 -->[/attachment]


    Das mit dem Farbverlauf in der Selektion funktioniert nicht, da ich schon das jeweilige Menübild als Hintergrundbild gesetzt habe. Deswegen ist nur eine Hintergrundfarbe möglich. (Ich wünsche immer noch, dass man mehr als ein Hintergrundbild setzen kann.) Wenn ich einen Verlauf einbauen möchte, müsste ich das mit JS umsetzen.


    Klar kannst du was zum Rest sagen.

  • &quot;philipp e.&quot; schrieb:

    Das mit dem Farbverlauf in der Selektion funktioniert nicht, da ich schon das jeweilige Menübild als Hintergrundbild gesetzt habe. Deswegen ist nur eine Hintergrundfarbe möglich.


    Da du ja sicher die Navigation mit einer Liste angefertigt hast kannst du getrost den <li>-Elementen den Verlauf und dem <a>-Tag die Bilder zuweisen.


  • hat ich gar nicht dran gedacht :D
    Danke, habs eingebaut:


    [attachment=1]<!-- ia1 -->Unbenannt.PNG<!-- ia1 -->[/attachment]


    [attachment=0]<!-- ia0 -->Unbenannt_sel.PNG<!-- ia0 -->[/attachment]


    Soooo, wie sieht's jetzt aus?
    meiner Meinung nach, ist es jetzt auf jeden Fall besser :D

  • @Basiii:
    Ja, das ist wirklich nicht schön. Willst du den ganzen Code oder nur die Navi?


    Sören :
    Hört sich gut an, aber meiner Meinung nach schadet der Platz nicht. Klar kannst du mir etwas zum Rest der Seite sagen. :D


    @All:
    Sooooo, hier wäre jetzt das Navi nochmal detailiiert dargestellt:


    [attachment=0]<!-- ia0 -->Unbenannt.PNG<!-- ia0 -->[/attachment]


    und dies ist die dazu gehörige Situation:
    Der Besucher befindet sich auf Willkommen (li.selected) und hält den Mauszeiger über Projekte (li:hover).
    Ich mag die neue Idee mit dem blauen, passt perfekt zum Rest der Seite.


    Was sagt ihr nun?



  • Ich bin Philipp E. :D

  • Sieht ja ganz nett aus, habe gerade nic hso die Zeit aber 2 Punkte schon mal:


    1. <ul> ist schon ein block-Element, von daher kannst du dir den <div id="menu"> sparen und direkt <ul id="menu"> schreiben ;)


    2. Du kannst deine background Attribute auch zusammenfassen um Code zu sparen und die Übersicht zu wahren.


    Statt...

    Code
    1. background-image: url(../png/navi/welcome.png);
    2. background-repeat: no-repeat;
    3. background-position: 0px 0px;
    4. background-color: transparent;


    ...schreibst du einfach:

    Code
    1. background: transparent url(../png/navi/welcome.png) no-repeat 0 0;


    Vielleicht solltest du dir auch eine gewisse Ordnung in deinem CSS Code angewöhnen, zum Beispiel Formatierungne für die Positionierung und welche für Farben, etc. trennen, ein Beispiel:



    Nur border-radius ist übrigens ein bisschen mau, versuche es mal so:


    Code
    1. -webkit-border-radius: 15px;
    2. -khtml-border-radius: 15px;
    3. -moz-border-radius: 15px;
    4. border-radius: 15px;


    Bei box-shadow das Selbe:


    Code
    1. -webkit-box-shadow: 10px 10px 5px #cefa42;
    2. -moz-box-shadow: 10px 10px 5px #cefa42;
    3. box-shadow: 10px 10px 5px #cefa42;


    Solltest du ein Fan des IE sein dann noch Folgendes:


    Code
    1. -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=2, offy=2)"; /* IE ab V.8 */
    2. filter:progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=2, offy=2); /* IE unter V.8 */


    Wenn du deinen Code so aufbesserst ist er für dich und uns leichter zu lesen, die Anfälligkeit für Fehler sinkt und du schreibst "sauberen / guten" Code ;)

  • Der blaue Farbverlauf gefällt mir jetzt nicht so, die untere Farbe ist zu grau, sieht mit dem Text darauf eigenartig aus.
    Ich würd dei untere Farbe kräftiger machen, mit weniger grau darin.


    Zu dem Rest:
    Telefonnummer und E-Mail Adresse solltest du da wegnehmen und ins Impressum packen und den Websitenamen, naja eigentlich weiss man auf welcher Seite man sich grad befindet und muss die URL nicht so groß auf der Seite stehen haben, würd ich da also auch wegnehmnen.
    Insgesamt solltest du die Leiste sehr viel kleiner machen, vielleicht auch auf eine Ecke beschränken.

  • @Basiii:
    1. Da das nicht falsch ist, werde ich es wahrscheinlich lassen.


    2. Soooo, das mit dem Zusammenfassen habe ich umgesetzt. Ich war eigentlich nur zu faul um zu gucken, wie die Reihenfolge ist. :D


    3. Das ist eine gute Idee. Ich habe es mal mit div#navi gemacht. (siehe unten)


    4./ 5. Wenn das so besser ist. (siehe unten)




    Sören :
    Also, ich finde das ganz schick.
    Das mit der "Kontaktleiste" werde ich mir mal ansehen. Das mit dem Link ist wirklich Scheiß. :D

  • &quot;Yamram&quot; schrieb:

    @Basiii:
    1. Da das nicht falsch ist, werde ich es wahrscheinlich lassen.


    Semantisch ist es falsch.



    &quot;Yamram&quot; schrieb:

    2. Soooo, das mit dem Zusammenfassen habe ich umgesetzt. Ich war eigentlich nur zu faul um zu gucken, wie die Reihenfolge ist. :D


    Die Reihenfolge ist eigentlich völlig Banane, du solltest nur darauf achten immer die Selbe zu benutzen.

  • Sören :
    Hier habe ich die Kontaktleiste mal etwas kleiner gemacht und noch ein "Sinnabschnittteiler" eingefügt :D
    Das mit dem Link habe ich nur gelassen, weil ich nicht weiß, was ich da sonst hinschreiben soll.


    [attachment=1]<!-- ia1 -->Unbenannt.PNG<!-- ia1 -->[/attachment]


    @Basiii:
    Achso, ein semantischer Fehler. OK, ich geb mich geschlagen und werds ändern.


    Cool, da hat mir jemand aber mal was anderes erzählt. Na ja, egal :D


    @All:
    Ich habe ein großes Problem mit dem IE. In diesem Kackbrowser sieht die Seite so aus:


    [attachment=0]<!-- ia0 -->Unbenannt_ie.PNG<!-- ia0 -->[/attachment]


    Das sieht so scheiße aus :D Warum nur?

  • Kleine Aktualisierung


    Meine Seite sieht im Firefox mit komplett neuer "Kontaktleiste" so aus:


    [attachment=1]<!-- ia1 -->Unbenannt.PNG<!-- ia1 -->[/attachment]


    uuuund im doofen IE:


    [attachment=0]<!-- ia0 -->Unbenannt2.PNG<!-- ia0 -->[/attachment]


    Sieht zwar nicht gut aus, aber besser als vorher ;D


    Was sagt ihr zu beiden Neuerungen?
    Ach übrigens: Sinntrennungslinie habe ich wieder entfernt. War nicht so gut :D