Doppelt geschachtelte Hyperlinks und CSS

[Michael H]

Hi Leute,

ich beiß mir jetzt schon länger an einem Problem die Zähne aus und nach dem lesen von x Webseiten komem ich auf Knien zu euch.

Das Problem: Ich hätte gerne ein Menu, das absolut positioniert bei top:30px und left:10px steht. Soweit kein problem.

Darin befinden sich mehrere Links, alle mit display:block und einem netten Hintergrund.

Jetzt will ich aber zu jedem Menupunkt ein Submenu schreiben (mit Unterpunkten). Diese Submenus sollen aber nur angezeigt werden, wenn ich mit der Maus über den Menupunkt gehe.

Also habe ich sowas geschrieben:

<a href="..." class="menu">
  Link1
  <a href="..." class="submenu">Sublink1</a>
  <a href="..." class="submenu">Sublink2</a>
</a>

und habe im Stylesheet:

a.menu a.submenu
{ display:none; }

a.menu:hover a.submenu
{ display:block; }

Aber die Sch.... will und will ncith funktionieren. Sämtliche Versuche, das Zeugs in DIVs, Ps und sonstwas einzuschließen schlugen fehl, wenn ich z.B. sowas habe:

<a href="a" class="menulink">
  Menulink
  <div class="submenu1"><a href="bc">bbb</a></div>
</a>

Zeigt er mir den Link sogar doppelt an!
Die Frage ist: Kann man das, was ich vorhabe überhaupt mit CSS machen? Wenn ja: Wo liegt mein Fehler?

Help,
   Michael

[Thomas Luethi]

Hallo,

Jetzt will ich aber zu jedem Menupunkt ein Submenu schreiben (mit Unterpunkten). Diese Submenus sollen aber nur angezeigt werden, wenn ich mit der Maus über den Menupunkt gehe.

Dazu braucht man ueblicherweise JavaScript.
Die Kombination HTML + CSS + JavaScript wird manchmal "DHTML" (dynamisches HTML)
genannt.

Neue Spielereien, die aber erst in wenigen Browsern funktionieren,
benutzen reines CSS zum Ein- und Ausblenden von Dingen. Siehe z.B.
http://www.meyerweb.com/eric/css/edge/menus/demo.html

Aber um das im "Ernstfall" fuer etwas so wichtiges wie die Navigation
einzusetzen, ist es IMHO etwas zu frueh.

<a href="..." class="menu">
  Link1
  <a href="..." class="submenu">Sublink1</a>
  <a href="..." class="submenu">Sublink2</a>
</a>

Das ist bereits in HTML verboten.
Links duerfen nicht verschachtelt werden.
Das haette Dir auch der Validator gesagt.

Gruesse,

Thomas

[Der Hans]

Moin!

Obwohl ich's gestern erst bei Spotlight vorgestellt habe und mir hier eigentlich noch nicht
den Kopf abreißen lassen wollte ... es geht doch halbwegs!

Ziel meines kleinen Experimentes war es, eine CSS-Popup-Menü zu bauen, das sowohl im IE
als auch in den Geckos funktioniert und zudem heil durch den Vali läuft.

Das vorläufige Ergebnis gibt es hier zu sehen: http://www.cssnavi.beimhans.de

Im dazugehörigen Artikel findest du auch die Probleme, die dieses Menü macht
und den Hinweis darauf, das die Validität nur durch eine "Veräppeln" des Valis zu erreichen ist.

Gruß

Der Hans

[wahsaga]

hi,

Obwohl ich's gestern erst bei Spotlight vorgestellt habe und mir hier eigentlich noch nicht
den Kopf abreißen lassen wollte ... es geht doch halbwegs!

Das vorläufige Ergebnis gibt es hier zu sehen: http://www.cssnavi.beimhans.de

statt "geht halbwegs" solltest du vielleicht "geht ein mal, dann nicht mehr" sagen - zumindest im IE 5.0/Win NT.
nach dem laden erscheinen die untermenüpunkte beim ersten überfahren der hauptmenüpunkte, danach jedoch nicht mehr ...

gruss,
wahsaga

[Der Hans]

Moin!

statt "geht halbwegs" solltest du vielleicht "geht ein mal, dann nicht mehr" sagen - zumindest im IE 5.0/Win NT.
nach dem laden erscheinen die untermenüpunkte beim ersten überfahren der hauptmenüpunkte, danach jedoch nicht mehr ...

Wer lesen kann ist klar im Vorteil:
[snip]Im dazugehörigen Artikel findest du auch die Probleme, die dieses Menü macht ...[/snip]
[snip]Dieses Menü läuft nicht unter: IE 5.0 ...[/snip]

Gruß

Der Hans

[molily]

Hallo,

Im dazugehörigen Artikel findest du auch die Probleme, die dieses Menü macht und den Hinweis darauf, das die Validität nur durch eine "Veräppeln" des Valis zu erreichen ist.

Das ist doch wahrlich absurd. Was ist der Validator für dich, warum interessiert es dich, dass der Validator es absegnet, was versprichst du dir davon? Entweder das Dokument entspricht dem Standard oder es entspricht nicht dem Standard. Die Schwächen des Konzepts DTD auszunutzen, um bewusst nichtvaliden Code zu schreiben, ändert nichts daran, dass das Dokument invalide ist. Der Validator weist dich zu Recht auf einen Fehler hin. Dies ist ein Hinweis an dich, dass dieser Code dazu prädestiniert ist, in manchen Browsern und Clients Fehler zu produzieren. Der Validator macht nichts anderes als auf diese potenziell Fehler produzierende Codestellen aufmerksam. Es gibt nur zwei vernünftige Konsequenzen, eine davon ist, bewusst weiter auf dem invaliden Code zu bestehen, etwa weil man glaubt, die Wirkung hinreichend einschätzen zu können. Dieser Fall ist in der Regel nicht gegeben und die Fälle, in denen invalider Code notwendig ist, sind im Allgemeinen sehr selten (es geht ja auch nicht nur um Tauglichkeit im praktischen Sinne - nichtvalider Code kann durchaus kompatibler sein -, sondern auch um Nachhaltigkeit, Zukunftssicherheit usw., das ist alles zu berücksichtigen). Die andere mögliche Konsequenz ist, sich einzugestehen, dass der Fehler problematisch wirken kann und ihn als Folge dessen aus der Welt zu schaffen. Was nun ist bitte der Nutzen davon, den Validator auszutricksen? Das beseitigt weder den Fehler - im Gegenteil, es schafft nur noch mehr chaotischen, fehlerträchtigen Code - noch ändert es etwas daran, dass der Code faktisch invalide ist. Die sogenannte Validität bzw. Standardkonformität eines Dokuments ist nicht abhängig vom Werkzeug, welches diese prüfen soll. Der Validator kann in letzter Konsequenz nur DTD-Konformität prüfen, was bekanntlich wenig mit Standardkonformität zu tun hat, da viele Anforderungen nicht in der DTD ausgedrückt sind und werden können.

Mathias

[Der Hans]

Moin!

Kann ich auch validen Code schreiben, der nicht durch den Vali geht oder geht das nur umgekehrt?

Wenn ich eine eigene DTD geschrieben hätte, könnte ich deine Aufregung eventuell
nachvollziehen, so aber habe ich mich nur an die Vorgaben von XHTML1.0 gehalten
und zugegebenermaßen "unschönes" HTML geschrieben.

Aber ich habe auch Tabellen zu Layoutzwecken missbraucht dabei und kann noch schlafen ...

Gruß

Der Hans

[wahsaga]

hi,

Wenn ich eine eigene DTD geschrieben hätte, könnte ich deine Aufregung eventuell
nachvollziehen, so aber habe ich mich nur an die Vorgaben von XHTML1.0 gehalten
und zugegebenermaßen "unschönes" HTML geschrieben.

du hast vor allem unvalides, _fehlerhaftes_ HTML für den IE geschrieben.
du _entziehst_ diesen code-teil lediglich dem validator, in dem du ihn in conditional comments einkleidest. dass du aber in <a> block level elemente und sogar wiederum <a> verwendest, wird dem IE nichts desto trotz sauer aufstossen, auch wenn der validator hier nichts bemängelt, weil er es nicht "sieht".
du verlässt dich hier in allerhöchstem maße auf die fehlertoleranz des IE ... aber "schön" wird dein code durch diesen "trick" ganz bestimmt nicht, und weiterzuempfehlen ist er dadurch schon gar nicht.

an dieser stelle würde ich ein sauberes, valides und per _javascript_ ausklappendes menü (mit schlichter gehaltener noscript-alternative) doch _deutlich_ vorziehen, als derartige code-vergewaltigung zu betreiben ...

gruss,
wahsaga

[Der Hans]

Moin!

du hast vor allem unvalides, _fehlerhaftes_ HTML für den IE geschrieben.
du _entziehst_ diesen code-teil lediglich dem validator, in dem du ihn in conditional comments einkleidest.

Ich kann dir nicht verbieten, immer wieder alles zu kommentieren, würde dich aber bitten,
doch endlich den Artikel dazu zu lesen oder wenigstens den Quelltext anzuschauen!
Dann würde dir auffallen, dass die conditional comments zwar den Quellcode vor Geckos und
Opera verstecken, der Code aber dennoch (in Worten: auch ohne die IE-Kommentierung!) durch
den Vali ginge/geht!

mit kopfschüttelndem Gruß

Der Hans

[MudGuard]

Hi,

Ich kann dir nicht verbieten, immer wieder alles zu kommentieren, würde dich aber bitten,
doch endlich den Artikel dazu zu lesen oder wenigstens den Quelltext anzuschauen!
Dann würde dir auffallen, dass die conditional comments zwar den Quellcode vor Geckos und
Opera verstecken, der Code aber dennoch (in Worten: auch ohne die IE-Kommentierung!) durch
den Vali ginge/geht!

Du bist hier derjenige, der Unsinn erzählt.

a ist in a nicht erlaubt. Siehe http://www.w3.org/TR/html401/struct/links.html#edef-A:
<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

Beachte das -(A) im content model.

Ich habe Deinen Beispielcode aus der von Dir genannten Seite kopiert, die //-Kommentare sowie die IE-Kommentierung rausgenommen.

Es gibt genau 4 Fehler, weil es genau 4 a in a gibt.

Siehe http://validator.w3.org/check?uri=http%3A%2F%2Ftemp.andreas-waechter.de%2Fhans.html

cu,
Andreas

[Der Hans]

Moin!

Ich habe Deinen Beispielcode aus der von Dir genannten Seite kopiert, die //-Kommentare sowie die IE-Kommentierung rausgenommen.

Es gibt genau 4 Fehler, weil es genau 4 a in a gibt.

Siehe http://validator.w3.org/check?uri=http%3A%2F%2Ftemp.andreas-waechter.de%2Fhans.html

Ja sacht ma ...
Freud hätte heute echt die Freude an euch! Weltbildalarm?

Der Vali war (leider allein auf weiter Flur) clever genug, die CSS mit zu parsen!
Daher noch einmal zur Veranschaulichung und Validierung ohne IE-Comments: http://www.cssnavi.beimhans.de/ohne.htm
(Hinweis zur Sicherheit: die Seite funzt jetzt nicht mehr einwandfrei in non-IE-Browsern!)

Gruß

Der Hans

[MudGuard]

Hi,

Siehe http://validator.w3.org/check?uri=http%3A%2F%2Ftemp.andreas-waechter.de%2Fhans.html

Der Vali war (leider allein auf weiter Flur) clever genug, die CSS mit zu parsen!

Nein, der HTML-Validator interessiert sich NICHT für CSS. Der validiert das HTML.

Und solange Du a-Elemente in a-Elemente schachtelst, kann das nicht valide werden.

Daher noch einmal zur Veranschaulichung und Validierung ohne IE-Comments: http://www.cssnavi.beimhans.de/ohne.htm
(Hinweis zur Sicherheit: die Seite funzt jetzt nicht mehr einwandfrei in non-IE-Browsern!)

Klar, wenn Du XHTML nutzt, wo formal das Ausschließen von Elementen aus dem content-model nicht möglich ist...
Korrekter Code muß aber mehr Bedingungen erfüllen als nur den Validator zu befriedigen.

Auch in den XHTML 1.0-DTDs steht:
<!-- content is %Inline; except that anchors shouldn't be nested -->
Das kann in XHTML (weil es XML ist) nur nicht formal ausgedrückt werden - damit kann der Validator diesen Fehler im XHTML nicht finden.

XHTML 1.0 ist ja auch nur eine Umformulierung von HTML 4.01 auf die XML-Syntax-Regeln - darum wird auch nicht jedes Element einzeln beschrieben wie in HTML 4.01, sondern nur auf die Unterschiede verwiesen. Bei den Unterschieden steht nichts davon, daß das Schachteln von Links in XHTML erlaubt wird.
Daher gilt auch Abschnitt 12.2.2 aus dem HTML 4.01-Standard (http://www.w3.org/TR/html401/struct/links.html#h-12.2.2):

12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Deine Konstruktion ist kein (X)HTML.

cu,
Andreas

[Der Hans]

Moin!

Nein, der HTML-Validator interessiert sich NICHT für CSS. Der validiert das HTML.

Echt? Warum bezieht er sie dann ein?
Und viel wichtiger: warum beanstandet er dann deine Variante ohne CSS?

Klar, wenn Du XHTML nutzt, wo formal das Ausschließen von Elementen aus dem content-model nicht möglich ist...
Korrekter Code muß aber mehr Bedingungen erfüllen als nur den Validator zu befriedigen.

Auch hier: umgekehrt geht aber nicht, nehme ich an?

Auch in den XHTML 1.0-DTDs steht:
<!-- content is %Inline; except that anchors shouldn't be nested -->

12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Indirekte Schachtelung auch nicht?
Aber objekt geht schon? Aber objekt in a darf dann entgegen der Regeln doch kein a enthalten?
Obwohl es so da steht?
Wo steht das denn? Hast du das Kraft deiner Erfahrung entschieden?
Und der sonst so pingelige Vali kann das nicht sehen?

Der Punkt ist doch nicht der, dass ich den Code für der Weisheit letzten Schluss halte.
Der Punkt ist der, dass die Konstruktion eine Art "Gesetzeslücke" in HTML ausnutzt.
Aber die Gesetzeslücke ist in HTML und nicht im Vali!

Daher wäre es schön, wenn die manigfaltigen Belehrungen ans W3C gingen (Tel.:+ 1.617.253.2613)
und nicht jeder hier plötzlich mich an den Rand des Schwachsinns verortet.

Gruß

Der Hans

[MudGuard]

Hi,

Nein, der HTML-Validator interessiert sich NICHT für CSS. Der validiert das HTML.
Echt? Warum bezieht er sie dann ein?

Das tut er nicht.

Und viel wichtiger: warum beanstandet er dann deine Variante ohne CSS?

Weil ich - im Gegensatz zu Dir - HTML benutzt habe.
Hättest Du mein Posting aufmerksam gelesen, wüßtest Du das.

Klar, wenn Du XHTML nutzt, wo formal das Ausschließen von Elementen aus dem content-model nicht möglich ist...

Genau diese Zeile hättest Du lesen (und verstehen) müssen, um zu verstehen, warum der Validator bei Dir im XHTML keinen Fehler finden _kann_.

Korrekter Code muß aber mehr Bedingungen erfüllen als nur den Validator zu befriedigen.
Auch hier: umgekehrt geht aber nicht, nehme ich an?

Nein, Validität (= formale Korrektheit) ist notwendige (aber nicht hinreichende) Voraussetzung für Korrektheit.

Auch in den XHTML 1.0-DTDs steht:
<!-- content is %Inline; except that anchors shouldn't be nested -->
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Indirekte Schachtelung auch nicht?

Nein. a-Elemente dürfen keine a-Elemente enthalten.
Auch wenn um das innere a-Element noch andere Elemente geschachtelt sind, ändert das ja nichts daran, daß das innere Element im äußeren geschachtelt ist - und das ist ja nicht erlaubt.

Ist das so schwer zu verstehen?

Aber objekt geht schon? Aber objekt in a darf dann entgegen der Regeln doch kein a enthalten?
Obwohl es so da steht?
Wo steht das denn? Hast du das Kraft deiner Erfahrung entschieden?

Nein, anhand der Spezifikation.

Und der sonst so pingelige Vali kann das nicht sehen?

Warum er das bei XHTML nicht kann, habe ich bereits im vorherigen Posting geschrieben.

Der Punkt ist doch nicht der, dass ich den Code für der Weisheit letzten Schluss halte.

Nein, der Punkt ist, daß der Code falsch ist.

Der Punkt ist der, dass die Konstruktion eine Art "Gesetzeslücke" in HTML ausnutzt.

Nein, in  HTML ist ganz klar gesagt, daß a-Elemente in a-Elementen nicht enthalten sein darf. Da ist keine Lücke.

Aber die Gesetzeslücke ist in HTML und nicht im Vali!

Nein, denn da ist keine Lücke in HTML 4.01. Und auch in XHTML 1.0 nicht.
Wenn überhaupt, dann liegt die Lücke in den Regelungen, die für XML-DTDs gelten, da dort im Gegensatz zu allgemeinen SGML-DTDs der Ausschluß von Elementen aus dem content-model _formal_ nicht möglich ist.
Und daher KANN der Validator für XHTML diesen Fehler NICHT erkennen.

Daher wäre es schön, wenn die manigfaltigen Belehrungen ans W3C gingen (Tel.:+ 1.617.253.2613)

Warum sollte man das W3C belehren? Es hat ganz konkret gesagt, daß a-Elemente keine a-Elemente enthalten dürfen.
DU bist derjenige, der das nicht versteht.

und nicht jeder hier plötzlich mich an den Rand des Schwachsinns verortet.

Trotz mehrfachen Hinweises darauf, daß a-Elemente keine a-Elemente enthalten dürfen, beharrst Du darauf, daß sie enthalten sein dürfen.

cu,
Andreas

[Der Hans]

Moin!

Klar, wenn Du XHTML nutzt, wo formal das Ausschließen von Elementen aus dem content-model nicht möglich ist...

Es ist also nicht möglich, zu prüfen, ob irgendwo innerhalb eines Tags <a></a>
noch einmal ein <a></a> geöffnet wurde? Jetzt bin ich ein wenig enttäuscht vom Vali ...

... dann muss ich wohl jemandem glauben, der zu mir sagte:"Du erzählst Unsinn, das liegt an den IE-Comments!" ...

Gruß

Der Hans

[MudGuard]

Hi,

Moin!

Klar, wenn Du XHTML nutzt, wo formal das Ausschließen von Elementen aus dem content-model nicht möglich ist...
Es ist also nicht möglich, zu prüfen, ob irgendwo innerhalb eines Tags <a></a>
noch einmal ein <a></a> geöffnet wurde? Jetzt bin ich ein wenig enttäuscht vom Vali ...

Du hast es immer noch nicht verstanden. Es liegt NICHT am Validator.
Es liegt an der Unmöglichkeit, in XML (und damit in XHTML) solche Ausschlüsse formal zu definieren.

Der Validator ist durchaus in der Lage dazu - vorausgesetzt, die formale Spezifikation der DTD erlaubt es (also z.B. bei HTML).
Siehe auch den Link, den ich in meinem ersten Posting gesetzt habe. Der zeigt doch, daß der Validator das kann.

... dann muss ich wohl jemandem glauben, der zu mir sagte:"Du erzählst Unsinn, das liegt an den IE-Comments!" ...

Klar, wenn der IE-Kommentar drin ist, ist der Teil zwischen <!-- und --> ein SGML-Kommentar, dessen Inhalt vom Validator ignoriert wird, genauso wie von jedem Browser (außer dem IE).

cu,
Andreas

[Struppi]

Jetzt will ich aber zu jedem Menupunkt ein Submenu schreiben (mit Unterpunkten). Diese Submenus sollen aber nur angezeigt werden, wenn ich mit der Maus über den Menupunkt gehe.

guck mal hier http://css.maxdesign.com.au/index.htm da sind auch ein paar Beispiele dabei, die das machen was du willst, aber wie Thomas schon schrieb, funktioniert da noch nicht überall.

Struppi.

[sschumann]

<a href="..." class="menu">
  Link1
  <a href="..." class="submenu">Sublink1</a>
  <a href="..." class="submenu">Sublink2</a>
</a>

Ich halte _gar nichts_ davon, Links zu verschachteln.

[Maximilian Baumgart]

Schreib das ganze als verschachtelte Liste, z.B.:
<ul>
   <li class="menu">
      <a href="#"></a>
   </li>
   <li class="menu">
      <a href="#"></a>
   </li>
   <li class="menu">
      <a href="#"></a>
      <ul>
         <li class="submenu">
            <a href="#"></a>
         </li>
         <li class="submenu">
            <a href="#"></a>
         </li>
      </ul>
   </li>
</ul>