Tutorial HTML, CSS u. PHP - Forum

[philipp e.]

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"

2. Willkommen selektiert, Rest "unselektiert"

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ß

[Sören]

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.

[philipp e.]

So sieht die Navigation im Gesamtkonzept aus:

Bei der Selektion werde ich keinen Verlauf einbauen.

[Sören]

ok, sieht, glaub ich, mit weniger padding links und rechts besser aus. (und mit Farbverlauf bei der Selektion auch - aber ist dein Blog).

Darf ich auch was zum Rest sagen?

[philipp e.]

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

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.

[Basiii]

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.

Code: Alles auswählen

<ul class="menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

----

ul.menu li {
  background: transition;
}

ul.menu li a {
  display: block;
  background: image;
} 

ul.menu li:hover {
  background: 2. transition;
}


[philipp e.]

hat ich gar nicht dran gedacht
Danke, habs eingebaut:

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

[Basiii]

Also das Menü an sich gefällt mir ganz gut, ist modernes Webdesign (Stand Anfang 2011) ;)

Du musst das Teil aber bitte so breit machen wie den Rest des Inhaltes, sonst sieht es absolut nicht aus.

[philipp e.]

Ja, das finde ich auch, nur Sören hatte seine Kritik
Wie du am Anfang sehen kannst, war es auch so breit wie der Rest.

[Basiii]

Ja aber zwischendrin war es dann kürzer das verwirrt doch

Zeigst du uns neben den Bildern auch mal Code?

[Sören]

Ich hatte aber eher gedacht, den Text oder die Abstände zwischen den Navigationspunkten breiter zu machen, damit an den Seiten in der Navigation nicht so viel Luft ist.

PS: willst du auch was zum Rest der Seite hören?

[philipp e.]

@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.

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

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?

[Basiii]

Nur den Navi Code, den gesamten Code sehen wir ja dann wenn du fertig bist, würde nur wieder ablenken ;)

[Yamram]

Code: Alles auswählen

<div id="navi">
  <ul>
            <?php
            $date = $_SERVER['PHP_SELF'];
            if($date == "/y/index.php")
            {
            echo '<li class="active"><a id="home" href="index.php">Willkommen</a></li>';
            }
            else
            {
            echo '<li><a id="home" href="index.php">Willkommen</a></li>';
            }
            if($date == "/y/blog.php")
            {
            echo '<li class="active"><a id="blog" href="blog.php">Blog</a></li>';
            }
            else
            {
            echo '<li><a id="blog" href="blog.php">Blog</a></li>';
            }
            if($date == "/y/projekte.php")
            {
            echo '<li class="active"><a id="projects" href="projekte.php">Projekte</a></li>';
            }
            else
            {
            echo '<li><a id="projects" href="projekte.php">Projekte</a></li>';
            }
            if($date == "/y/handbuch.php")
            {
            echo '<li class="active"><a id="handbook" href="handbuch.php">Handbuch</a></li>';
            }
            else
            {
            echo '<li><a id="handbook" href="handbuch.php">Handbuch</a></li>';
            }
            if($date == "/y/impressum.php")
            {
            echo '<li class="active"><a id="rights" href="impressum.php">Impressum</a></li>';
            }
            else
            {
            echo '<li><a id="rights" href="impressum.php">Impressum</a></li>';
            }
            ?>
  </ul>
</div>


Code: Alles auswählen

div#navi {
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */margin: 0px auto;
background-color: #393939;
border-radius: 15px;
font-family: Georgia;
font-size: 110%;
color: black;
text-align: center;
margin-top: 0px;
box-shadow: 2px 2px 3px #393939;
width: 100%;
}
div#navi ul li a:visited, div#navi ul li a {
color: #ffffff;
padding: 15px;
text-decoration: none;
}
div#navi ul {
padding: 15px;
}
div#navi ul li {
display: inline;
list-style: none;
background: transparent;
padding: 15px;
}
div#navi ul li.active {
background-image: url(../png/navi_sel_bg.png);
}
div#navi ul li:hover {
background-image: url(../png/header_bg.png);
}
div#navi ul li a {
padding-left: 50px;
}
div#navi a#home {
background-image: url(../png/navi/home_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#home:hover {
background-image: url(../png/navi/home.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#blog {
background-image: url(../png/navi/blog_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#blog:hover {
background-image: url(../png/navi/blog.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#projects {
background-image: url(../png/navi/projects_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#projects:hover {
background-image: url(../png/navi/projects.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#handbook {
background-image: url(../png/navi/handbook_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#handbook:hover {
background-image: url(../png/navi/handbook.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#rights {
background-image: url(../png/navi/rights_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#rights:hover {
background-image: url(../png/navi/rights.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#archiv {
background-image: url(../png/navi/archiv_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#archiv:hover {
background-image: url(../png/navi/archiv.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#profil {
background-image: url(../png/navi/user_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#profil:hover {
background-image: url(../png/navi/user.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}
div#navi a#welcome {
background-image: url(../png/navi/welcome_w.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div#navi a#welcome:hover {
background-image: url(../png/navi/welcome.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent;
color: #393939;
}


Ich bin Philipp E.

[Basiii]

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: Alles auswählen

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


...schreibst du einfach:

Code: Alles auswählen

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:

Code: Alles auswählen

ul#navi {
  /* positionierung */
  /* margin-top: 0px; // kommt irgendwie 2 mal vor */
  margin: 0px auto;

  /* aussehen */
  width: 100%;
  background: rgb(69,72,77); /* Old browsers */
  background-color: #393939;
  box-shadow: 2px 2px 3px #393939;
  border-radius: 15px;

  /* textgestaltung */
  font-family: Georgia;
  font-size: 110%;
  color: black;
  text-align: center;

  /* solch riesen codes würde ich auch immer abtrennen */
  background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
}


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

Code: Alles auswählen

  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;


Bei box-shadow das Selbe:

Code: Alles auswählen

  -webkit-box-shadow: 10px 10px 5px #cefa42;
  -moz-box-shadow: 10px 10px 5px #cefa42;
  box-shadow: 10px 10px 5px #cefa42;


Solltest du ein Fan des IE sein dann noch Folgendes:

Code: Alles auswählen

  -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=2, offy=2)"; /* IE ab V.8 */
  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 ;)