CSS Navigation

F

fredolin

Erfahrenes Mitglied
Hallo Gemeinde des CSS

seit einigen Tagen schlage ich mich mit einen Problem herum, den ich nicht sehe. Darum bitte ich Euch hier um Hilfe. Worum geht es?
Ja ich habe für mein Studium eine Websteie gebaut, wo die TopNavigation rein über CSS funktioniert. Spricht man fährt über einen Menupunkt unddann erscheint das darunterliegene Menu.

Ansicht funktioniert es ja auch schon, aber es sind noch kleine Fehler drinne, die ich nicht sehe.
So hier mal der CSS Code für die Navigation
CSS:
Das ist der CSS Code, die die Navigation steuert. ALs nächstes hier der Code für die Navigation. Da ich eine externe function Datei benutze und diese in der index.php include

PHP:
In der index.php rufe ich Funktion dann nur noch auf. Da wird Ihr sehen, das wenn IHr über die Navigation fährt, das beim ersten Klick nicht auf die Seite gesprungen wird, sondern das man nocheinmal auf den Link klickenmuss. Und dass das Menu nach Links aussen wandert. Woran liegt das?

Um sich ein Bild besser davon zu machen schaut einfach hier mal rauf: http://fredolin.bplaced.net/

So ich hoffe es kann mir eine helfen.

Gruß Fredolin
 
Zuletzt bearbeitet:
Hi,

die Ursache des Verschiebens dürfte in den letzten drei fehlerhaften, weil unvollständigen, Selektoren zu finden sein, da deren enthaltenden Pseudoklassen in dieser Form auch für die angesprochene Navigation zutreffen:
CSS: 
ul.small_top_nav li a:link, a:active, a:visited, a:focus {
	margin: 0;
	padding: 3px 5px;
	width: 66px;
	height: 15px;
	text-decoration: none;
}

Im Klartext, in den letzten drei Selektoren fehlt ul.small_top_nav li.

Zudem wird :visited im Anschluß an :link genannt, und :active nach :focus, da es ansonsten zu Fehlinterpretationen führen kann - siehe http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active.

Wenn das Verschieben der Untermenüs beim Anklicken der enthaltenden Links aufgehoben ist, sollten auch deren Verweisziele beim ersten Klick erreichbar sein.

mfg Maik
 
Hey Maik,

erstmal Danke für deine Antwort. Aber den CSS Tag den du beschrieben hast, der verursacht den Fehler nicht. Da ich das was du da meinst ja auch in einer anderen CSS Datei drinne stehen hab.
Die CSS Datei, die ich oben gepostet hab, ist nur für die Navigation von Startseite bis Blog zuständing und in dieser Navigation ist auch der Fehler.

Aber ich hoffe doch das mir da eine einen Tip geben kann.

Gruß Fredolin
 
In welcher CSS-Datei sich der angesprochene CSS-Snippet befindet, ist unerheblich. Fakt ist, dass für die letzten drei Selektoren in dieser "allgemeinen" Formulierung ohne den Zusatz ul.small_top_nav li im HTML-Code ebenso eine Übereinstimmung mit den Links im zweiten Menü .head_nav vorliegen kann, und so bei ihrem Anklicken die Regeln der beiden Pseudoklassen :active und :focus greifen.

Ein weiterer Fehler findet sich hier:
CSS: 
ul.head_nav li:hover{
    position: relative;
    background-color: #C1C1C1;
    color: #171717;
    cursor: pointer;
}

Die relative Positionierung des <li>-Elements gilt somit beim Überfahren des Elements.

Diese Angabe ist aber generell, und nicht erst beim Hovern erforderlich, damit sich die absolute Positionierung des nachfolgenden <ul>-Elements auf die Ränder dieses Elements beziehen. Also gib diese Regel im vorherigen Selektor ul.head_nav li an, denn wie es scheint, wird sie aufgehoben, wenn die Maustaste gedrückt wird, womit sich ab diesem Moment die absolute Positionierung des Submenüs auf den linken Rand des relativ positionierten DIV-Blocks .box bezieht.

Übrigens deklarierst du für alle Submenüs ein und denselben ID-Bezeichner, was ebenfalls nicht regelkonform ist.

Entweder wandelst du ihn in einen Klassen-Bezeichner um, oder formulierst stattdessen Selektoren für Nachfahren (ul.head_nav li ul, sowie ul.head_nav li ul ... für dessen Nachfahren), in denen der zusätzliche Bezeichner nicht benötigt wird.

mfg Maik
 
Mit den fehlerbereinigten Fassungen der beiden angesprochenen Stylesheets verschieben sich die Submenüs nicht nach links, wenn einer ihrer enthaltenden Menüpunkte angeklickt wird.

Zugegebenermaßen lag ich mit meiner ersten Vermutung falsch, dennoch bedarf es auch dort aus den zuvor erläuterten Gründen einer Korrektur, um in dem einen oder anderen Browser Fehlinterpretationen zu vermeiden.

Probehalber kannst du ja mal diesen Deklarationsblock übernehmen, in dem ich lediglich die Reihenfolge der Pseudoklassen korrigiert, sowie eine Schriftformatierung hinzugefügt habe, und diese mit den Links im zweiten Menü abgleichen ;)

CSS: 
ul.small_top_nav li a:link,
a:visited,
a:focus,
a:active   {
        margin: 0;
        padding: 3px 5px;
        width: 66px;
        height: 15px;
        text-decoration: none;
        font: bold italic 1.4em arial verdana, sans-serif;
        color: green;
}

  • style.css
    Die unvollständigen Selektoren ergänzt, Pseudoklassen in der korrekten Reihenfolge benannt.
CSS: 
ul.small_top_nav li a:link,
ul.small_top_nav li a:visited,
ul.small_top_nav li a:focus,
ul.small_top_nav li a:active   {
        margin: 0;
        padding: 3px 5px;
        width: 66px;
        height: 15px;
        text-decoration: none;
}
  • navigation.css
    Von Grund auf vollständig überarbeitet.
CSS: 
#menu {
        margin: 42px 0 0 0;
        width: 100%;
        float: left;
}
#menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#menu ul a {
        position: relative;
}
#menu ul li {
        margin: 2px 2px;
        padding: 5px 5px;
        display: inline;
        border: thin solid #979797;
        border-bottom: 0;
        position: relative;
}
#menu ul li:hover {
        background-color: #C1C1C1;
        color: #171717;
        cursor: pointer;
}
#menu ul li ul {
        position: absolute;
        top: 22px;
        left: 0;
        display: none;
        background-color: #C1C1C1;
}
#menu ul li:hover ul {
        display: block;
}
#menu ul li ul li {
        display: block;
        background-color: #EBEBEB;
        border: 1px solid #8B6508;
}
#menu ul li ul li:hover {
        background-color: #C2C2C2;
}

Wie du siehst, hab ich im zweiten Stylesheet navigation.css neben der angesprochenen Fehlerkorrektur bzgl. der relativen Positionierung des <li>-Elements zusätzlich für Ordnung gesorgt, sprich deine einzelnen unterschiedlich lautenden Selektoren auf das Elternelement #menu abgestimmt, und sie in Selektoren für Nachfahren umdefiniert, doppelte weil gleichlautende Regeln für die Haupt- und Untermenüebene geschickt zusammengefaßt, sowie die diskrepanten Regelangaben zur Positionsart des Submenüs entfernt, und so das CSS gegenüber deiner Fassung deutlich um ein Drittel (= 22 Zeilen) verschlankt.

Bis auf den ID-Bezeichner #menu für den umschliessenden DIV-Block sind alle übrigen Bezeichner im HTML- und CSS-Code entfallen, darunter auch dein regelwidriger mehrfach vergebener ID-Bezeichner #submenu für die einzelnen Submenüs.

Und wie von mir eingangs vermutet, sind die Verweisziele in den Untermenüs nun auch direkt beim ersten Klick problemlos erreichbar, weil die Hyperlinks dem gedrückten Mauszeiger nicht mehr nach links außen ausweichen ;-)

mfg Maik
 
Hallo Maik,

ich ziehe meinen Hut vor dir. Echt Super geholfen. Also deine anpassungen waren super. Es war echt eine grosse Hilfe fuer mich.
Ich hatte mir es fast schon gedacht, das ich es nur auf das #menu die UL beziehen müssen. Aber da muss ich noch lernen.

Kannst Du mir einen Tipp geben oder auch ein Buch nennen wo solche Themen gut erklärt werden, beschrieben werden, so dasman es lernen kann?

Ach ich habe noch eine kleine Anpassung gemacht, damit es schöner aussieht:

CSS: 
#menu ul li ul li {
	margin: 2px 2px;
	width: 190px;
	float: left;
	dispaly: block;
	background-color: #EBEBEB;
	border: thin solid #8B6508;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück