Hallo zusammen
Ich bin daran auf meiner Homepage ( Michael Ritter ) die bestehende horizontale Navigation oben zu einer ausklappbaren mit Untermenüpunkten zu erweitern. Das Ganze soll nur mit HTML und CSS geschehen. Den aktuellen Stand ist unter Michael Ritter zu sehen.
Optisch (also gewissermassen ohne Berücksichtigung des Codes) stört im Moment in erster Linie, dass die Untermenüpunkte nach rechts nicht alle gleichviel Platz einnehmen (das Problem ist ersichtlich, wenn Ihr auf "Vereine" klickt, denn dort habe ich vier solche Punkte reingemacht). Offenbar richtet sich die Grösse der fraglichen <li>-Elemente aus für mich nicht erklärebaren Gründen nach der Grösse des Inhalts (=Länge des Textes), was natürlich komisch aussieht bei verschiedenen Textlängen.
Mein Versuch diesen <li> eine fixe Breite zuzuweisen (in den beiden letzten Zeilen des CSS-Codes) ist wirkungslos.
Der CSS-Code der Testseite:
Hat jemand eine Idee, wie ich dieses Problem beheben könnte? Da ich Anfänger bin, ist der gepostete CSS-Code per se etwas verdächtig. Ich habe mich bemüht alles zu verstehen was ich da zusammengeschrieben habe, aber gewisse Unklarheiten bestehen für mich bei den anspruchsvolleren Sachen wie { position } und solchem. Ich erwähne zu meiner Verteidigung, dass der CSS-Code immerhin durch den W3C-CSS-Validator gekommen ist, d. h. das Problem sollte (eigentlich) nicht in der Syntax liegen.
Herzlichen Dank für jeglichen Support!
Lg Xeno
Ich bin daran auf meiner Homepage ( Michael Ritter ) die bestehende horizontale Navigation oben zu einer ausklappbaren mit Untermenüpunkten zu erweitern. Das Ganze soll nur mit HTML und CSS geschehen. Den aktuellen Stand ist unter Michael Ritter zu sehen.
Optisch (also gewissermassen ohne Berücksichtigung des Codes) stört im Moment in erster Linie, dass die Untermenüpunkte nach rechts nicht alle gleichviel Platz einnehmen (das Problem ist ersichtlich, wenn Ihr auf "Vereine" klickt, denn dort habe ich vier solche Punkte reingemacht). Offenbar richtet sich die Grösse der fraglichen <li>-Elemente aus für mich nicht erklärebaren Gründen nach der Grösse des Inhalts (=Länge des Textes), was natürlich komisch aussieht bei verschiedenen Textlängen.
Mein Versuch diesen <li> eine fixe Breite zuzuweisen (in den beiden letzten Zeilen des CSS-Codes) ist wirkungslos.
Der CSS-Code der Testseite:
Code:
* { margin:0; padding:0; }
p, #navigationsleiste { margin:0 0 20px 20px; }
h1, h2, h3 { margin:0 0 10px 20px; }
h1 { font-size:180%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
body { background-color:#B4DC00; font-family:Verdana, sans-serif; }
a { text-decoration:none; }
a:link { color:#2F54FF; }
a:visited { color:#FF4B4B; }
a:hover { color:#FEFF49; }
span { color:#2F54FF; }
.linkliste li { margin: 0 0 0 20px; }
#navigationsleiste { overflow:auto; width:100%; height:30px; background-color:#FFFFFF; margin-top:5px; }
#navigationsleiste ul, #navigationsleiste li { list-style-type:none; }
#navigationsleiste ul, #navigationsleiste ul ul { float:left; width:6em; }
#navigationsleiste ul, #navigationsleiste li:hover ul ul { position:absolute; left:-9999px; top:0; }
#navigationsleiste li:hover #unterleiste1 { left:7.25em; width:6em; }
#navigationsleiste li:hover #unterleiste2 { left:13.25em; width:6em; }
#navigationsleiste ul { top:auto; }
#navigationsleiste ul li { position:relative; font-size:80%; margin:5px 0 5px 0; }
#navigationsleiste ul li:hover ul { position:absolute; left:100%; top:0; }
#navigationsleiste li { float:left; width:6em; padding:5px 0 5px 0; }
#navigationsleiste a, span { padding:10px; }
#navigationsleiste a:link { background-color:#FFFFFF; }
#navigationsleiste a:hover { color:#FF40CF; }
#navigationsleiste #aktiv span { background-color:#D2A5FF }
#unterleiste1 li, #unterleiste2 li { width:7em; }Hat jemand eine Idee, wie ich dieses Problem beheben könnte? Da ich Anfänger bin, ist der gepostete CSS-Code per se etwas verdächtig. Ich habe mich bemüht alles zu verstehen was ich da zusammengeschrieben habe, aber gewisse Unklarheiten bestehen für mich bei den anspruchsvolleren Sachen wie { position } und solchem. Ich erwähne zu meiner Verteidigung, dass der CSS-Code immerhin durch den W3C-CSS-Validator gekommen ist, d. h. das Problem sollte (eigentlich) nicht in der Syntax liegen.
Herzlichen Dank für jeglichen Support!
Lg Xeno
