✔ Probleme mit Listen-Navigation

[soyo]

Guten Morgen,

Hier erstmal der Code, Erklärung später.
html

<div id="navigation">
      <div id="nav_top_left">
        <a href="#">
          <ul>
            <li><a href="#">MCS - ISYNET</a></li>
            <li><a href="#">Honorarkompa&szlig;</a></li>
            <li><a href="#">Daymedic</a></li>
            <li><a href="#">medimed</a></li>
          </ul>
        </a>
      </div>
    </div>

css:

body {
  margin: 0px
}

image {
  border: 0
}

#nav_top_left a:link,
#nav_top_left a:visited {
  background: url('img/1.jpg') no-repeat;
  display: block;
  height: 150px;
  width: 352px
}
#nav_top_left a:hover,
#nav_top_left a:active {
  background: url('img/1a.jpg') no-repeat
}
#nav_top_left ul li a:link,
#nav_top_left ul li a:visited {
  background: none;
  color: #33C;
  text-decoration: none
}
#nav_top_left ul{
  font: bold 12pt arial;
  padding: 0;
  margin: 0;
  list-style-type: none
}

Hier das ganze mal in Atkion: hier klicken für ein wirklich sehr schönes menu

Wieder mal im FF und IE ganze unterschiedliche Darstellung, jedoch sind beide total daneben. Anbei noch ein Screen wie es eigentlich aussehen sollte.

Erstmal kaffee


Gruß soyo

 

[Gumbo]

Das ul-Element hat in dem a-Element nichts zu suchen. Weg damit.

Dein gedankliches Problem wird aber wohl sein, dass die dritte und vierte Regel auch auf die a-Elemente innerhalb der Liste angewandt werden.

 

[soyo]

Ich hab es immer mit dem ul- im a-Element gelöst. Viele CSS-Menüs auf cssplay arbeiten mit dieser Technik. Was schlägst du denn als Alternative vor?

 

[PuReSteeL]

Ich hab es immer mit dem ul- im a-Element gelöst. Viele CSS-Menüs auf cssplay arbeiten mit dieser Technik. Was schlägst du denn als Alternative vor?

Ich habe mir da jetzt nur ein paar Beispiele angesehen. Die legen in das a-Element eine vielzahl von Span-Elementen, was wieder zulässig ist.

 

[soyo]

Wie mit span-Element ist das zulässig? Wer verbietet mir denn ein ul- im a-Element? Hatt das war mit Barrierefreiheit zu tun? Und wenn du dir teilweise die Multi-Level Menus dort anschaut, gibt es ab und zu eins was so läuft wie meins, ich hab nur eins gesehn wo mit span gearbeitet wurde.

 

[Maik]

Hi,

versuch es mal auf diese Weise:

#nav_top_left {
  background: url('img/1.jpg') no-repeat;
  height: 150px;
  width: 352px;
}
#nav_top_left:hover {
  background: url('img/1a.jpg') no-repeat;
}

    <div id="navigation">
      <div id="nav_top_left">
          <ul>
            <li><a href="#">MCS - ISYNET</a></li>
            <li><a href="#">Honorarkompaß</a></li>
            <li><a href="#">Daymedic</a></li>
            <li><a href="#">medimed</a></li>
          </ul>
      </div>
    </div>

Dass die einzelnen Links derzeit so weit auseinander liegen, liegt einfach daran, dass du ihnen jeweils eine Höhe von 150px verpasst hast.

Wie mit span-Element ist das zulässig? Wer verbietet mir denn ein ul- im a-Element?

Du kannst dein "Konstrukt" ja mal vom w3c-Validator überprüfen lassen.

Merke: Inline-Elemente dürfen keine Block-Elemente enthalten.

 

[soyo]

Achso danke, weningstens einer der es mir erklärt und nicht einfach sagt: "So geht das aber nicht!"

Ich werd es mal auf Arbeit ausprobieren, die Daten liegen alle da und außerdem ist Sonntag, trozdem danke

 

[soyo]

So ich habe das eben getestet, es funktioniert schon so sehr schön. Jedoch soll das Menü erst erscheinen, wenn man mit der Maus über das Bild geht, da hab ich aber schon selber eine Idee.

Aber noch eine andere Frage: #nav_top_left:hover funktioniert aber im IE6 nicht oder?

Ich hab die standalone leider nicht hier, aber ich werd sie gleich mal installieren.

 

[Maik]

Hi!

Richtig, der IE6 unterstützt die :hover-Pseudoklasse nur für das a-Element.

Abhilfe könnte da beispielsweise das Tauschen zweier CSS-Klassen mittels JS schaffen, wenn man das Element mit der Maus überfährt.

 

[soyo]

Also bleibt mir bei diesem Problem nur die Lösung mit einer *.htc? Da auf der Seite eh schon JS läuft stört mich das nicht weiter, aber ich versuche JavaScript aus der Navigation rauszulassen.