Navigation als Liste Problem mit Unternavigation

[wolle1975]

Hallo an Alle,

ich habe einen echt nervigen Fehler mit einer Navigation als Liste.

Die Liste formatiert mit Links, welche als display:block deklariert sind, damit sie die komplette Breite der li einnehmen.

Jetzt kommt der Fehler: Wenn man eine einfache Unternavigation erstellt bei einem beliebigen LI, so verhält sich die Liste nicht standardkonform, indem Sie einfach die zusätzlichen Listenpunkte nicht zwischen den LI's der 1. Ordnung und etwas eingerückt plaziert, sondern der Listenpunkt der verschachtelten Liste steht genau über dem nächsten Listenpunkt der 1. Ebene.

Warum ist das so?

Meine Liste ist wie folgt formatiert:

ul:

list-style-type: none


li:

display: block
margin: 5px 0
height: 30px

li a:

display: block;
height: 30px;
line-height: 30px;
text-decoration: none;

li a:hover:

color: ...;
background-color:....;
text-decoration: none;
background: farbe url(....) right center no-repeat; (kleines Background-Bild)


Hoffe, Ihr könnt mir helfen!

 

[XraYSoLo]

sieht deine CSS-datei so aus?

Nils aka XraYSoLo

 

[wolle1975]

ja, das die Befehle stehen so drin.

Ich kann mir nicht erklären, warum er nicht die Liste in der Liste richtig darstellt!

Kann es am Dokumentenfluss liegen? Die Liste ist in einem Div-Container, welcher nach links gefloatet wurde, damit die Navigation auf der linken Seite ist. Rechts daneben der Inhaltsbereich als div. Also ein klassischer Aufbau!

Die Links und Hintergründe arbeiten einfach perfekt. Mir ist es erst gar nicht aufgefallen mit der Unternavigation. Erst als ich die Links überprüfte und drauf geklickt habe, sah ich das Problem und habe sowas auch vorher noch nie gehabt..

 

[_Thor_]

Der dazugehörige HTML-Code wäre auch interessant.

 

[wolle1975]

<div id="left">
 <div class="menu">

<h3>Hauptmenü</h3>
<ul>
<li><a href="#"><span>Startseite</span></a></li>
<li><a href="#"><span>Überblick</span></a>
    <ul><li><a href="#"><span>Neues</span></a></li></ul>
</li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>FAQ</span></a></li>
<li><a href="#"><span>Neuigkeiten</span></a></li>
</ul>		</div>
	</div>

 

[_Thor_]

Es fällt auf, dass da mindestens ein <div> zu viel ist, denn das äussere gruppiert ja nichts und die Formatierung kannst du auch dem inneren <div> geben.

Warum stehen die ganzen Listeneinträge nochmal in einem <span>, machst du damit noch etwas besonderes? Wenn nicht, kannst du das <span> auch weglassen.

Die Struktur des Menüs ist ansonsten richtig, jetzt bleibt die Frage, ob das CSS, welches du in deinem ersten Post gezeigt hast, auch wirklich so in der CSS-Datei steht, denn dieses wäre ziemlich fehlerhaft und könnte die falsche Darstellung erklären.

 

[XraYSoLo]

mich wundert vorallem, dass die style-definitionen nicht in geschweifte klammern gefasst sind...

Nils aka XraYSoLo

 

[wolle1975]

Hallo,

Die Div's gehen so schon in Ordnung, da ich alle Elemente mit verschiedenen Hintergründen anspreche.

Das CSS habe ich gerade so schnell herunter geschrieben ohne Klammern etc, damit es schneller geht. Aber die CSS-Befehle sind so hinterlegt in der Datei und arbeiten ja auch alle einwandfrei bis auf das kleine Problemchen...

Normalerweise müssten doch die restlichen Listeneinträge einfach nach unten wandern, damit die eingeschobenen neuen Listeneinträge platz haben und diese kann ich ja auch mit CSS ansprechen...

Darauf reagiert der Browser aber nicht. Ist der Firefox in neuster Generation. An ihm sollte es also nicht liegen...

Wenn ich eine ul nehme und den li's Display: block gebe, dann kann ich sie in der Breite ansprechen und auch in der Höhe, aber auf die Eigenschaften rei HTML-technisch hat das doch keinen Einfluss..

In der CSS Datei habe ich auch einen STernchen-Selektor angesprochen, wo ich margin und padding jeweils auf 0 gesetzt habe, damit mir der Browser nicht durch eigene Werte das Layout zerschießt. Margins und Paddings gebe ich dann jeweils bei den zu formatierenden Elementen ein!

Aber warum die Liste sich so verhält ist mir ein Rätzel....

 

[_Thor_]

Also wenn das wirklich so in deiner CSS-Datei steht, wundert mich es, dass dort irgendwas funktioniert, denn die richtige Schreibweise wäre

Selektor {
  Eigenschaft: Wert;
}

So etwas wie ul: li: oder a: gibt es nicht. Der Doppelpunkt leitet eine Pseudoklasse ein, die aber, wie bei hover, folgen muss, ein Doppelpunkt ohne nachstehender Pseudoklasse ist ein Fehler. Ebenso die fehlenden geschweiften Klammern.

Befreie dein CSS mal von den Fehlern, dann können wir uns um die Eigenschaften kümmern, so macht das wenig Sinn.

 

[wolle1975]

das ist mir schon klar, dass es sowas wie a: nicht gibt..

deshalb habe ich ja auch geschrieben, dass es nur zu anschauung dient.

ein Beispiel:


Problem 1:

erklärungen...


Problem 2:

erklärungen


ich war einfach zu faul, die geschweiften Klammern etc. zu schreiben, aber in der CSS-Datei ist es semantisch korrekt mit allem was dazu gehört.

 

[wolle1975]

ul{

list-style-type:none;
}


li{

display: block;
margin: 5px 0;
height: 30px;
}

li a{

display: block;
height: 30px;
line-height: 30px;
text-decoration: none;
background-color: white;
}

li a:hover{

color: #......;
text-decoration: none;
background: blue url(Pfad zu meine Datei..) right center no-repeat;
}

 

[_Thor_]

Dann solltest du uns das auch zeigen und nicht ein paar Brocken, die völlig fehlerhaft sind.

Copy -> Paste erspart einem sogar die Schreibarbeit und ist um einiges schneller.

Noch besser wäre allerdings ein Link zur Seite, damit man das mal sehen kann.

 

[wolle1975]

ja, da hast du auch wieder recht. hätte es ja auch kopieren können.

Link zur Seite geht leider nicht, da lokal.


habe aber soeben heraus gefunden, dass es wohl an der height liegt. wenn ich dies auskommentiere bei den li und a tags, dann rutscht das Untermenü nicht mehr in die anderen hinein!

So verhält sich ja auch eine verschachtelte Liste. Damit bin ich einen Schritt weiter. Aber in diesem Zusammenhang hätte ich eine Frage, die Ihr mir vielleicht beantworten könntet:

Ich möchte gerne, dass die Untermenüpunkte erst auftauchen, wenn ich auf den jeweiligen Link des übergeordneten Listenelements klicke. Wie muss ich da vorgehen?

Vielen Dank schon einmal für Eure Hilfe

 

[_Thor_]

Link zur Seite geht leider nicht, da lokal.

Hier möchte ich Efchen mal zitieren

Kunde an Werkstatt: Mein Auto ist kaputt! Wo liegt der Fehler?
Werkstatt an Kunde: Wir würden uns das Auto gerne mal ansehen!
Kunde an Werkstatt: Geht nicht, das Auto steht noch in meiner Garage.

Soll heißen, melde dich bei einem Freehoster an und stell die Seite online, wenn dir schnell und effektiv geholfen werden soll, denn so kann jeder mit seinem Entwicklertools die Seite untersuchen und kommt schneller auf den Fehler, als erst den Code verstehen zu müssen.

Ich möchte gerne, dass die Untermenüpunkte erst auftauchen, wenn ich auf den jeweiligen Link des übergeordneten Listenelements klicke. Wie muss ich da vorgehen?

Dafür brauchst du eine serverseitige Scriptsprache wie PHP. Damit liest du die URL der Seite aus und vergleichst diese mit den URL's in deinem Menü, wenn sie übereinstimmen, setzt du per PHP eine zusätzliche Klasse, die das Untermenü anzeigt. Vorher blendest du es per CSS mit display: none; aus.

 

[wolle1975]

vielen Dan für die Info.

Ja, da hast du recht. Bin halt noch nicht so lange dabei und habe so eine Freehosting-Geschichte noch nicht...

Werde mir das aber zulegen, damit man da wirklich gut schauen kann, wenn's mal wieder nicht funktioniert...

Übrigens hat es mit der height geklappt! Daran lag es...hab dann aber noch die Einrückungen mit margin-left gelöst, damit es optisch paßt. Aber das mit dem PHP wird wohl etwas schwieriger für mich, da ich kein PHP kann...

Aber trotzdem vielen Dank für deine Hilfe..

 

[_Thor_]

Ja, da hast du recht. Bin halt noch nicht so lange dabei und habe so eine Freehosting-Geschichte noch nicht...

Werde mir das aber zulegen, damit man da wirklich gut schauen kann, wenn's mal wieder nicht funktioniert...

Das ist auf jeden Fall sinnvoll und wird zu schnellerer und besserer Hilfe führen, denn nicht jeder hat Lust, sich durch langen Quellcode in einem Beitrag zu arbeiten.

Übrigens hat es mit der height geklappt! Daran lag es...hab dann aber noch die Einrückungen mit margin-left gelöst, damit es optisch paßt.

Dabei ist zu beachten, das einige Browser für den Abstand margin verwenden, einige padding und manche sogar beides. Um also sicher zu gehen, setzt du die Eigenschaft, die du nicht verwendest besser auf 0, damit es nicht zu bösen Überraschungen in anderen Browsern kommt.

Aber das mit dem PHP wird wohl etwas schwieriger für mich, da ich kein PHP kann...

Das kann man lernen, PHP: Documentation

Aber trotzdem vielen Dank für deine Hilfe..

Bitte.

 

[Efchen]

das ist mir schon klar, dass es sowas wie a: nicht gibt.

Wenn Du zu faul bist, das richtig zu schreiben, warum gibst Du dann nicht einfach einen Link zur Seite? Damit wäre allen viel viel viel viel mehr geholfen :-)

ich war einfach zu faul, die geschweiften Klammern etc. zu schreiben, aber in der CSS-Datei ist es semantisch korrekt mit allem was dazu gehört.

Nicht semantsch, sondern syntaktisch.

Fehler kann man nicht finden, wenn der Code nicht exakt 1:1 hier wiedergegeben wird. Deswegen ist ein Link immer das beste.

@_Thor_: Cooles Zitat, woher hast Du das bloß ;-)