Navigation bearbeiten.

[RonjaWork]

Hallo,
ich fange grade an das Programmieren von Webseiten zu lernen. Das klappt bis jetzt auch schon ganz gut.

Nun bin ich aber doch an meine Grenzen gestoßen, weil mir einfach der Überblick über die vielen Möglichkeiten, die mir CSS bietet fehlt.

Ich bekomme es nicht hin, meine Navigation ordentlich zu formatieren.

In meiner html-Datei sieht das folgendermaßen aus:

<div id="navigation">
      <ul>
               <li> <a href="index.html" title="Zurück zur Startseite">Home</a> </li>
            <li> <a href="#" title="Seite 1">Seite 1</a> </li>
            <li> <a href="#" title="Seite 2">Seite 2</a> </li>
            <li> <a href="#" title="Zu den Terminen">Aktuelles</a> </li>
            <li> <a href="#" title="Kontakt">Kontakt</a> </li>
      </ul>
    </div>

Was muss ich in meiner CSS-Datei nun schreiben, um Beispielsweise die Farbe der Schrift zu ändern, die Unterstreichung der Schrift zu entfernen, die Punkte zu entfernen, die einzelnen Navigationspunkte nebeneinander zu setzen usw?

Kennt vielleicht jemand einen Link, wo mal alle Befehle aufgelistet sind. Ich finde immer nur hier mal nen paar und da mal nen paar.

Danke für eure Hilfe,
LG Ronja

 

[andy1304]

AW: Navigation bearbeiten.

Hallo Ronja,

hier findest Du sehr viel über CSS. Einfach mal der Reihe nach durchstöbern. Speziell für Navigationen kann ich dir empfehlen. Da hast Du je ein Bsp. für vertikale und horizontale Navigationen. Vielleicht hilft es Dir. Sonst nochmal fragen.

LG Andy

 

[RonjaWork]

AW: Navigation bearbeiten.

Danke für die Links.
Meine CSS-Datei sieht jetzt so aus:

}
#navigation {
    height: 34px;
    width: 850px;
    background: url(bilder/navileiste.png);
}
#navigation ul li {
    float: left;
    list-style: none;
    display: inline;
    margin: 8px 10px 0 10px;
}
#navigation ul {
    list-style-type: none;
    margin: 0 0 0 0;
    white-space: nowrap;
    font-size: 100%;
    list-style-image: none;
    list-style-type: none;
}
#navigation a, #navigation span {
    text-decoration: none; font-weight: bold;
    color: #E36355;
}
#navigation a:hover, ul#navigation span {
    color: #DAE8BE;
}

Das Problem:
Ich habe keine Ahnung, was ich da gemacht habe.

Meine Fragen:
An welcher Stelle haben ich die Listenpunkte entfernt?
Was kommt unter "#navigation ul" und was unter "#navigation ul li"?
Welche Angaben, die ich gemacht habe sind überflüssig?

Weiter Probleme:
Die Schrift auf der Navigationsleiste ist jetzt zu weit nach rechts eingerutscht. Wo ist das passiert und wie kann ich das ändern?
Beim Rollover-Effekt:
Wenn ich mit der Maus über den Link fahre, verändert sich wie gewünscht die Farbe, wenn ich aber auf den Link drücke und dann ja auch auf der passenden Seite bin (funktioniert in meinem Fall ja nur bei der Startseite), wird die Farbe der Schrift wieder wie vorher. Ich möchte aber, dass bei der Aktiven Seite die Farbe der Schrift anders ist, als bei den anderen Seiten, auch wenn ich nicht mit der Maus über dem Link bin.

Ich hoffe ihr versteht, wo mein Problem liegt...
Tut mir leid für die dummen Fragen, aber ich habe erst vor einer Woche angefangen zu programmieren und finde mich einfach noch nicht so richtig zurecht.

LG

 

[andy1304]

AW: Navigation bearbeiten.

Das ist doch schon mal ein Anfang. Dein CSS kannst Du aber noch ausdünnen. Die Listenpunkte entfernst Du mit "list-style: none" - das reicht aber einmal unter #navigation ul.

Mit #navigation ul sprichst Du die ganze Liste (ul) an, mit #navigation ul li die einzelnen Listenelemente (li).

Das Problem:
Ich habe keine Ahnung, was ich da gemacht habe.

Das ist der Punkt. Am Besten setzt Du Dich Schritt für Schritt mit CSS auseinander. Kopiere Dir doch von dem 2. Link, den ich oben gepostet habe, den Code und geh der Reihe nach dort durch. Wenn Du etwas geändert hast, schau Dir die Auswirkungen an. So kommst Du am schnellsten dahinter.