MouseOver: Grafiklink ändern und (!) versteckten div anzeigen

[Enrico]

Hallo Forum :-)

Ich habe folgende skizzierte Ausgangssituation bei unserer geplanten Darthomepage:

|
| +-------------+ +-------------+ +--- ...
| | Versteckter | | Versteckter | |
| | div-Bereich | | div-Bereich | |
| | der zum 1.  | | der zum 2.  | |
| | Menüpunkt   | | Menüpunkt   | |
| | gehört      | | gehört      | |
| +-------------+ +-------------+ +--- ...
|
|  [Menüpunkt 1]   [Menüpunkt 2]   [...
|
|         [Menüpunkt 3]      [Menüpunkt 4]
|
+-------------------------------------------

Zu allen weiteren Menüpunkten gibt es ebenfalls jeweils einen versteckten div-Bereich, diese habe ich aber - der Übersichtlichkeit halber - weggelassen, da sich die versteckten div-Bereiche teilweise überlagern.

Die einzelnen Menüpunkte bestehen aus Grafiklinks, die die MouseOut-/MouseOver- und Click-Grafiken enthalten, d.h. ich habe pro Grafiklink eine "große" Grafik mit allen Zuständen, nur wird über css der jeweils anzuzeigende Grafikausschnitt per background-position verschoben.

In den versteckten div-Bereichen sind Details zu den einzelnen Grafiklinks enthalten.

Ich habe sowohl den "Wechsel" der Zustände der Grafiklinks über css hinbekommen, als auch das gleichzeitige Anzeigen/Verbergen der versteckten div-Bereiche über javascript hinbekommen.

Allerdings möchte ich von javascript weggehen, da dies doch sehr oft oder/und immer öfter aus Sicherheitsgründen oder Durch-unsinnige-Skripte-nicht-mehr-belästigt-werden-wollen-Gründen ausgeschaltet.

Was ich erreichen möchte, ist, dass bei MouseOver über einen Grafiklink über css auch der zugehörige versteckte div-Bereich angezeigt wird, weiß aber nicht, ob und wie das genau funktionieren kann.

Ich meine, im Internet mal Konstrukte gefunden zu haben, die über die spitze Klammer rechts (">") miteinander verbunden (?) wurden, konnte aber aufgrund der Tatsache, dass ich nicht weiß, wie diese Technik heisst, auch nicht gewinnbringend danach googeln.

Auch weiß ich nicht, ob diese Technik, sollte es sie geben, valide ist und in jedem handsüblichen Browser auch reibungslos funktioniert.

Aber wenn ja, dann müsste es folgendermassen doch richtig sein, oder?

div.Container_Ankuendigungen_Klebezettel
   {
      position:   absolute;
      width:      125px;
      height:     126px;
      bottom:     65px;
      left:       294px;
      background: url("../Grafiken/Ankuendigungen_Klebezettel.png") 0px 0px no-repeat;
      display:    none;
   }

div.Container_Link_Ankuendigungen a
   {
      height:     31px;
      width:      128px;
      display:    block;
      background: url("../Grafiken/Ankuendigungen_Link.png") 0px 0px no-repeat;
   }

div.Container_Link_Ankuendigungen a:hover
   {
      background-position: 0px -31px;
   }

div.Container_Link_Ankuendigungen a:hover > div.Container_Ankuendigungen_Klebezettel
   {
      display: block;
   }

Ich hoffe, ihr könnt mir weiterhelfen.

Vielen Dank im Voraus.

Gruß
Enrico

[Der-Dennis]

Hey Enrico,

hier ein Beispiel, wie wir unser Menü per CSS aufgebaut haben. Vielleicht hilft Dir das weiter:

  
#navigation {  
	background: #000000 url(../img/navigation.jpg) repeat-x;  
}  
  
#navigation ul {  
	display: inline;  
	margin: 0;  
}  
  
#navigation ul li {  
	float: left;  
	list-style: none;  
	position: relative;  
	white-space: nowrap;  
}  
  
#navigation ul li a {  
	display: block;  
}  
  
#navigation ul li a:hover {  
}  
  
#navigation ul li ul {  
	padding: 0;  
	position: absolute;  
}  
  
#navigation ul li ul li {  
	background: #000000 url(../img/navigation.jpg) repeat-x;  
	display: block;  
	float: none;  
	white-space: nowrap;  
}  
  
#navigation ul li > ul {  
	display: none;  
}  
  
#navigation ul li:hover > ul {  
	display: block;  
}  

Die Format-Definitionen für Schrift und Rahmen habe ich weitestgehend entfernt.

Gruß, Dennis

[Enrico]

Hallo Dennis,

wenn ich Dich richtig verstanden habe, dann wäre eine (mögliche) Lösung, jeden Grafiklink als Liste mit der versteckten Grafik als Unterpunkt zu definieren?

Gruß
Enrico

[Der-Dennis]

wenn ich Dich richtig verstanden habe, dann wäre eine (mögliche) Lösung, jeden Grafiklink als Liste mit der versteckten Grafik als Unterpunkt zu definieren?

Genau. So wäre es, wenn ich Dich richtig verstanden habe, zumindest möglich. Wir erstellen unsere Menüs mittlerweile nur noch über Listen, die dann mit CSS formatiert werden. Damit ist (fast) alles möglich.

Ansonsten bin ich auch gespannt, was die Anderen noch für Vorschläge haben. Man lernt ja nie aus.

Gruß, Dennis

[Enrico]

Hallo Dennis,

ok, dann mache ich mich mal an's Werk :-)

Danke schon mal für Deinen Lösungsansatz, bin gespannt, ob's klappt.

Muß halt "bloß" meinen kompletten Code umschreiben, aber wenn's funktioniert, um so besser :-)

Gruß
Enrico

[Der-Dennis]

ok, dann mache ich mich mal an's Werk :-)

Danke schon mal für Deinen Lösungsansatz, bin gespannt, ob's klappt.

Muß halt "bloß" meinen kompletten Code umschreiben, aber wenn's funktioniert, um so besser :-)

Dann wünsche ich Dir viel Erfolg dabei! Wie gesagt, ich kann immer nur sagen, wie wir es gelöst haben. Ob es bessere Möglichkeiten gibt, weiß ich nicht, würde mich aber interessieren...

Gruß, Dennis

[Enrico]

Hallo Dennis,

hmmm, ich habe nun, um mich Schritt für Schritt an die für mich unbekannte Materie "css-Menü" heranzutasten, folgendes Konstrukt erstellt:

<html>
      <head>
         <style type="text/css">
            <!--
               ul
               {

}

ul li
               {
                  list-style-type:none;
               }

ul ul
               {
                  display:none;
               }

ul li:hover > ul
               {
                  display:block;
               }

//-->
         </style>
      </head>
      <body>
         <ul>
            <li>
               <a href="#">Neuigkeiten</a>
            </li>
            <ul>
               <li>Neuigkeiten_klebezettel</li>
            </ul>
         </ul>
      </body>
   </html>

Ich will zunächst nur diesen einen Menüpunkt zum Laufen bekommen und werde ihn dann, wenn alles klappt, als Schablone für die übrigen Menüpunkte verwenden und mit entsprechenden IDs versehen.

Momentan stehe ich aber vor dem Problem, dass hier der Unterpunkt "Neuigkeiten_Klebezettel" nicht angezeigt wird.

Wo liegt mein Fehler?

Vielen Dank und Gruß
Enrico

[Enrico]

Hallo Dennis,

ok, durch eine Verschachtelung und 1:1-Übernahme Deines Codes hat es nun bei diesem einfachen Konstrukt geklappt, jetzt kommt das Tuning :-)

Danke hierfür.

Gruß
Enrico

[Der-Dennis]

Hey Enrico,

freut mich, wenn es soweit funktioniert hat. Wie ich grad gesehen habe, habt Ihr Euch damit ja noch weiter beschäftigt. Wenn ich noch helfen kann, sag einfach Bescheid.

Gruß, Dennis

[Enrico]

Hallo Dennis,

es ist richtig, dass wir uns noch "relativ" intensiv mit der Thematik auseinandergesetzt haben, letztendlich sind wir allerdings zu einem Punkt gelangt, an dem ich dem Ansatz von ChrisB nicht mehr folgen konnte, leere html-Elemente, die lediglich über css-Definitionen anzeigetschnisch/optisch an Bedeutung gewinnen, wegzulassen, trotzdem aber, sofern ich ihn hier richtig verstanden habe, über css-Selektoren trotzdem die korrekte Anzeige am Bildschirm zu bekommen.

Meine Struktur ist immer die gleiche:

<li>
      <a href="#"></a>
      <ul>
         <li></li>
      </ul>
   </li>

"li a"     beinhaltet css-technisch jeweils einen Grafiklink mit hover, focus und active-Zuständen
"li ul li" beinhaltet css-technisch immer den zugehörigen "Klebezettel"

ChrisB meinte nun, die leeren Elemente aus dem html-Code rauszunehmen:

Wenn du keinen *Inhalt* an der Stelle hast, der es wert wäre, im HTML notiert zu werden - dann »» baue auch kein leeres HTML-Element dafür ein.
Wenn du nur einen Platzhalter brauchst, in dem du ein Hintergrundbild anzeigen kannst - dann »» kannst du auch bspw. das äußere LI- oder das A-Element per Padding an geeigneter Seite »» entsprechend ausweiten.

D.h., meine Struktur würde html-technisch folgendermassen schrumpfen:

<li>
                <a href="#"></a>
           +--
           |    <ul>
rausnehmen |       <li></li>
           |    </ul>
           +--
             </li>

Mein Verständnisproblem, was dann logischerweise auch ein Umsetzungsproblem ist, ist, dass ich mir nicht vorstellen kann, wie es funktionieren soll, dass ein Browser Elemente anzeigt, die lediglich im css-Code definiert wurden, nicht aber im html-Code stehen.

Ich müsse wohl mit Selektoren (">") arbeiten, muß mir aber in SelfHTML erstmal die entsprechenden Seiten anschauen, da ich noch nicht mit solchen Selektoren geareitet habe.

Und das wird meine heutige Aufgabe sein: einarbeiten und versuchen, die Ansätze von ChrisB umzusetzen.

Gruß
Enrico

[Der-Dennis]

Hey Enrico,

Mein Verständnisproblem, was dann logischerweise auch ein Umsetzungsproblem ist, ist, dass ich mir nicht vorstellen kann, wie es funktionieren soll, dass ein Browser Elemente anzeigt, die lediglich im css-Code definiert wurden, nicht aber im html-Code stehen.

Das funktioniert auch schlichtweg nicht. (HTML-)Elemente, die es nicht gibt, kannst Du auch nicht formatieren.

Was Chris wahrscheinlich meinte: Statt beispielsweise

  
li a { color: red; }  
li ul li { background-image: url(); }  

zu schreiben, wobei li ul li ein leeres Element ist, könntest Du auch folgendes schreiben:

  
li a {  
  color: red;  
  background-image: url();  
}  

Und anschließend nur noch li a (z.B. mit padding) so zu formatieren, wie Du es haben möchtest. li ul und li ul li könntest Du so löschen.

Gruß, Dennis

[Enrico]

Hallo Dennis,

ok, aber ich habe ja zwei verschiedene Hintergrundgrafiken (eine als Grafiklink und die andere als Klebezettel, die bei mouseover beim Grafiklink angezeigt wird), nicht nur eine, somit bräuchte ich, meiner Meinung nach, auch zwei Elemente.

Wenn ich die Systematik noch immer nicht gerafft habe, dann lasse ich es jetzt endgültig bleiben.

Gruß
Enrico

[Der-Dennis]

Hey Enrico,

ok, aber ich habe ja zwei verschiedene Hintergrundgrafiken (eine als Grafiklink und die andere als Klebezettel, die bei mouseover beim Grafiklink angezeigt wird), nicht nur eine, somit bräuchte ich, meiner Meinung nach, auch zwei Elemente.

Ich hab nicht mehr ganz verfolgt, was Du noch mit Chris geschrieben hast. Aber bei zwei Bildern brauch man auch auf jeden Fall zwei Elemente. Alles andere wäre mir völlig neu. Deshalb hatte ich Dir ja auch das Beispiel mit den Unter-Listen geschickt.

Gruß, Dennis

[ChrisB]

Hi,

Ich hab nicht mehr ganz verfolgt, was Du noch mit Chris geschrieben hast. Aber bei zwei Bildern brauch man auch auf jeden Fall zwei Elemente.

Die hat man in einer Navigationsliste bereits - LI und A.

MfG ChrisB

[Der-Dennis]

Richtig!

Die Aussage zuvor war ja nur in etwa: Ich habe EIN Element und SOLL da ZWEI Bilder reinpacken.
Und das - da dürften wir uns einig sein ;-) - geht einfach nicht. Sonst stimmt das natürlich mit ul - li - a. Aber das sind ja wie gesagt mehrere Elemente.

Gruß, Dennis

[Enrico]

Hallo Dennis & ChrisB,

konnte erst eben wieder reinschauen, da ich unterwegs war.

Ich denke, dass ich mich hier dann möglicherweise wohl missverständlich ausgedrückt hatte und ihr davon ausgegangen seid, dass ich über ein Element zwei Grafiken anzeigen lassen will.

Dann bitte ich hier um Entschuldigung.

Gut, dann können wir hier einen Schnitt setzen, das funktioniert ja :-)

Bis zum nächsten Mal :-)

Gruß
Enrico

[Der Martin]

Hallo,

<style type="text/css">
            <!--

bitte gewöhn dir die Unart, HTML-Kommentare im Stylesheet zu notieren, gar nicht erst an.

<ul>
            <li>
               <a href="#">Neuigkeiten</a>
            </li>
            <ul>
               <li>Neuigkeiten_klebezettel</li>
            </ul>
         </ul>

Das ist ungültiges HTML - ul darf nicht direkt Kind von ul sein, es muss innerhalb eines li stehen.

Momentan stehe ich aber vor dem Problem, dass hier der Unterpunkt "Neuigkeiten_Klebezettel" nicht angezeigt wird.
Wo liegt mein Fehler?

Im oben zitierten HTML-Ausschnitt steht (auch wenn die HTML-Struktur korrigiert ist) ein ul-Element innerhalb eines ul-Elements. Also trifft die CSS-Regel

ul ul
               {
                  display:none;
               }

zu, die dafür sorgt, dass das innere ul nicht angezeigt wird - und logischerweise alle seine Nachfahren auch nicht.

Ciao,
 Martin

[Enrico]

Hallo Martin,

sorry für meine verspätete Antwort auf Deine Hinweise.

bitte gewöhn dir die Unart, HTML-Kommentare im Stylesheet zu notieren, gar nicht erst an.

Habe ich rausgelöscht. Ich frag mich nur, warum diese Unart aber scheinbar usus geworden ist.

<ul>
   <li>
      <a href="#">Neuigkeiten</a>
   </li>
   <ul>
      <li>Neuigkeiten_klebezettel</li>
   </ul>
</ul>

Das ist ungültiges HTML - ul darf nicht direkt Kind von ul sein, es muss innerhalb eines li stehen.

Das habe ich bereits umgestellt:

<ul class="Neuigkeiten_Verweis">
      <li>
         <a href="#"></a>
         <ul>
            <li></li>
         </ul>
      </li>
   </ul>

Es steht deshalb kein Text zwischen dem "<li><li>", weil ich hier per css eine Grafik definiert habe, die angezeigt wird.

Nun funktioniert alles wie gewünscht und ist auch noch unendlich schlanker als javascript-Code mit aufzunehmen :-)

Gruß
Enrico

[Der Martin]

Hallo Enrico,

sorry für meine verspätete Antwort auf Deine Hinweise.

verspätet? Drei Stunden sind doch hier fast nocht "Echtzeit". ;-)

bitte gewöhn dir die Unart, HTML-Kommentare im Stylesheet zu notieren, gar nicht erst an.
Habe ich rausgelöscht. Ich frag mich nur, warum diese Unart aber scheinbar usus geworden ist.

Ganz einfach: Weil vor langer, langer Zeit, als die Erde noch eine flache Scheibe war, die ersten Browser erschienen, die sowas wie CSS kannten. Damit die anderen, die das noch nicht kannten, den vermeintlichen Text zwischen <style> und </style> nicht einfach so anzeigten, kamen die Webautoren auf den Gedanken, diesen Abschnitt zusätzlich als HTML-Kommentar auszuzeichnen und so unschädlich zu machen. Das war, wenn ich mich recht erinnere, etwa zu der Zeit, als die ersten Wirbeltiere entstanden sind.
Heute, in der Zeit des homo sapiens, wissen alle Browser zumindest, was CSS ist und was das style-Element bedeutet. Sie brauchen die Auskommentierung daher nicht mehr. Aber ein Großteil der Webautoren weiß das anscheinend noch nicht.

<li></li>
Es steht deshalb kein Text zwischen dem "<li><li>", weil ich hier per css eine Grafik definiert habe, die angezeigt wird.

Bedenklich. Wenn die Grafik mal nicht geladen werden kann oder darf, sieht man nichts.

Ciao,
 Martin

[ChrisB]

Hi,

Ganz einfach: Weil vor langer, langer Zeit, als die Erde noch eine flache Scheibe war, [...]
Heute, in der Zeit des homo sapiens, [...]

Was die Story angeht, stimmen wir schon mal überein.
Nur unsere jeweilige zeitliche Verortung dieser ist noch nicht ganz deckungsgleich gelungen.

MfG ChrisB

[Der Martin]

Hallo,

Ganz einfach: Weil vor langer, langer Zeit, als die Erde noch eine flache Scheibe war, [...]
Heute, in der Zeit des homo sapiens, [...]
Was die Story angeht, stimmen wir schon mal überein.
Nur unsere jeweilige zeitliche Verortung dieser ist noch nicht ganz deckungsgleich gelungen.

naja, ohne Absprache und aus dem Stand finde ich das schon recht überzeugend. ;-)

So long,
 Martin

[Enrico]

Hallo Martin,

Drei Stunden sind doch hier fast nocht "Echtzeit". ;-)

Püüh, da hab' ich aber noch einmal sakrisch Glück und Schwein gehabt ;-)

Weil vor langer, langer Zeit, als die Erde noch eine flache Scheibe war
Damit die anderen, die das noch nicht kannten

Gut, die Erde ist ja keine Scheibe mehr und alle handelsüblichen Browser kennen und können mittlerweile css, damit *wegwisch*

Wenn die Grafik mal nicht geladen werden kann oder darf, sieht man nichts.

Das verblüfft mich jetzt schon.

Es soll vorkommen, dass eine/mehrere/alle Grafik/en, die ich in einem css-Sheet definiert habe, nicht geladen werden kann/können (ok, dass eine/mehrere/alle Grafik/en mal nicht geladen werden kann/können, könnte ja u.U. evtl. vielleicht mal vorkommen, auch wenn mir keine Gründe einfallen, warum der Code geladen werden können, nicht aber eine/mehrer/alle Grafik/en), aber dass eine/mehrere/alle Grafik/en nicht geladen werden dürfen leuchtet mir nicht ein.

Ich glaub', das war bislang der längste Satz meines bisherigen Daseins ;-)

Was ist denn eine Homepage ohne (sinnvolle) Grafiken?

Gruß
Enrico

[Der Martin]

Hi,

Wenn die Grafik mal nicht geladen werden kann oder darf, sieht man nichts.
Das verblüfft mich jetzt schon.

warum?

Es soll vorkommen, dass eine/mehrere/alle Grafik/en, die ich in einem css-Sheet definiert habe, nicht geladen werden kann/können (ok, dass eine/mehrere/alle Grafik/en mal nicht geladen werden kann/können, könnte ja u.U. evtl. vielleicht mal vorkommen, auch wenn mir keine Gründe einfallen, warum der Code geladen werden können, nicht aber eine/mehrer/alle Grafik/en), aber dass eine/mehrere/alle Grafik/en nicht geladen werden dürfen leuchtet mir nicht ein.

Warum nicht? Internet-Zugänge über langsame 56k-Modems werden zwar immer seltener, dafür gibt's immer häufiger mobile Internet-Zugänge über UMTS oder sogar nur GPRS, die mit Müh und Not das Tempo eines alten 56k-Modems erreichen. Deren Nutzer stellen ihren Browser gern mal so ein, dass er keine Grafiken lädt, damit sie die gesuchten Informationen in endlicher Zeit auf dem Display haben.

Ich glaub', das war bislang der längste Satz meines bisherigen Daseins ;-)

Das lässt sich bestimmt noch steigern.

Was ist denn eine Homepage ohne (sinnvolle) Grafiken?

Denk mal an Websites, die hauptsächlich Information rüberbringen wollen, und nicht so sehr der Unterhaltung dienen (Online-Manuals, Wikipedia, SELFHTML). Die eigentliche Information steckt zum überwiegenden Teil im Text. Wenn wir mal von Bildergalerien absehen, haben Grafiken meist vor allem kosmetischen Zweck, oder sie dienen "nur" zur Verdeutlichung dessen, was im Text schon in Worten beschrieben wird.

So long,
 Martin

[Enrico]

Hallo Martin,

Internet-Zugänge über langsame 56k-Modems
mobile Internet-Zugänge über UMTS oder sogar nur GPRS
die hauptsächlich Information rüberbringen wollen

Ok, und schon bin ich eines Besseren belehrt ;-)

Ne, Scherz beiseite, klingt plausibel, aber ich kann mir nicht vorstellen, dass unser Dartverein in absehbarer Zeit so großes Interesse wecken wird, dass man unsere Homepage sogar unterwegs mobil aufrufen wird.

Nun ja, dann hoffe ich, dass auf den Feststationen unserer wenigen Fans nichts passiert und alles geladen wird :-)

Gruß
Enrico

[ChrisB]

Hi,

bitte gewöhn dir die Unart, HTML-Kommentare im Stylesheet zu notieren, gar nicht erst an.

Habe ich rausgelöscht. Ich frag mich nur, warum diese Unart aber scheinbar usus geworden ist.

Weil es vor der letzten Eiszeit mal Browser gab, die kein CSS kannten, und den Inhalt eines STYLE-Elements als Inhalt innerhalb der Seite angezeigt haben. Die hat Manny, das mürrische Mammut aber dann zusammen mit Sid und Diego niedergetrampelt, und deshalb braucht mal das in der heutigen Zeit des Klimawandels nicht mehr machen.

Und „Usus“ ist es heutzutage nur noch insofern, dass es einerseits in zahlreichen hoffnungslos veralteten Quellen noch so drin steht, bzw. andererseits von einigen „das haben wir immer schon so gemacht“-Webexperten noch immer angewandt wird.

<li>

<a href="#"></a>
         <ul>
            <li></li>
         </ul>

  

> Es steht deshalb kein Text zwischen dem "<li><li>", weil ich hier per css eine Grafik definiert habe, die angezeigt wird.  
  
Wenn du keinen \*Inhalt\* an der Stelle hast, der es wert wäre, im HTML notiert zu werden - dann baue auch kein leeres HTML-Element dafür ein.  
Wenn du nur einen Platzhalter brauchst, in dem du ein Hintergrundbild anzeigen kannst - dann kannst du auch bspw. das äußere LI- oder das A-Element per Padding an geeigneter Seite entsprechend ausweiten.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Enrico]

Hallo ChrisB,

Wenn du nur einen Platzhalter brauchst, in dem du ein Hintergrundbild anzeigen kannst,
dann kannst du auch bspw. das äußere LI- oder das A-Element per Padding an geeigneter Seite entsprechend ausweiten.

Sorry, it's a little late by far and my eyes are getting weighty, das versteh ich (jetzt) nicht.

Laß' ich dann was weg bzw. muß ich im html-Code dann was weglassen oder wie meinst Du das genau?

Gruß
Enrico

[ChrisB]

Hi,

Laß' ich dann was weg bzw. muß ich im html-Code dann was weglassen oder wie meinst Du das genau?

Du lässt die Elemente, die du nur zu Darstellungszwecken eingefügt hast, und die sogar komplett leer sind, keinerlei Inhalt transportieren - in diesem Falle in deinem Beispielcode <LI></LI> - weg. Sie haben in einem sinnvoll strukturierten HTML-Dokument nichts verloren, *weil* sie keinen Inhalt transportieren.

Wenn du an der Stelle Hintergrundbilder anzeigen willst - dann machst du das in einem der Elemente, die noch da sind, die wirklich Inhalt transportieren. Wenn du dafür neben/über/unter dem Inhalt dieser Elemente Platz schaffen willst - dann gibst du diesen Elementen an der jeweiligen Seite ein entsprechendes padding.

MfG ChrisB

[Enrico]

Hi ChrisB,

ul          -> Nur Einleitung der Liste (pro Grafiklink habe ich eine eigene Liste)
ul li a     -> Enthält den Grafiklink
ul li ul li -> Enthält den zugehörigen "Notizzettel" als Hintergrundgrafik

Nachdem ich pro Grafiklink folgendes Konstrukt habe...

<ul class="...">
      <li>
         <a href="#"></a>
         <ul>
            <li></li>
         </ul>
      </li>
   </ul>

...und um Deinen ausführlicheren Ansatz noch einmal aufzugreifen (vielen Dank für Deine Geduld, aber langsam, aber sicher fällt mir die Konzentration schwer ;-) ):

Ich lasse die inneren "<li></li>"'s weg, aber dann habe ja wieder leere Elemente, und zwar die umgebenden "<ul></ul>"'s.

Wäre es "problematisch", die leeren "<li></li>"'s im Code zu belassen, denn ehrlich gesagt bin ich froh, dass ich alles in mühevoller Kleinstarbeit ausrichten konnte?

Gruß
Enrico

[ChrisB]

Hi,

Ich lasse die inneren "<li></li>"'s weg, aber dann habe ja wieder leere Elemente, und zwar die umgebenden "<ul></ul>"'s.

Ja die lässt du natürlich mit weg, wenn da sonst nichts weiter drin steht ...!

Das eine leere Liste genauso unsinnig ist wie ein leeres LI-Element, sollte doch wohl selbstverständlich sein.

Wäre es "problematisch", die leeren "<li></li>"'s im Code zu belassen

Wenn du sinnvollen, die Inhalte gut strukturierenden HTML-Code schreiben willst - dann fliegen die leeren Listen raus, keine Frage.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Ja die lässt du natürlich mit weg, wenn da sonst nichts weiter drin steht ...!

Ja, aber wenn ich das ganze weg lasse, wie soll dann der Browser wissen, dass da eigentlich was hingehört?

Gruß
Enrico

[ChrisB]

Hi,

Ja die lässt du natürlich mit weg, wenn da sonst nichts weiter drin steht ...!

Ja, aber wenn ich das ganze weg lasse, wie soll dann der Browser wissen, dass da eigentlich was hingehört?

Dadurch, dass du es ihm sagst.

Noch mal* - du hast bereits ein LI und ein A, welche deinen Menüpunkt darstellen. Wenn du jetzt an diesem Menüpunkt noch ein verzierendes Hintergrundbild anzeigen willst bzw. es bei :hover auswechseln - dann schaffe dir den zur Anzeige dieses Bildes nötigen Platz, in dem du LI oder A einen entsprechenden Innenabstand (padding) verpasst, und das Hintergrundbild passend ausrichtest.

Wenn das Bildchen an anderer Stelle erscheinen soll (und das dein eigentliches [Verständnis-]Problem darstellt) - dann setze bspw. ein zusätzliches SPAN-Element ins LI oder A, und positioniere dieses entsprechend. (Für moderne Browser könntest auch auf das zusätzliche SPAN verzichten, und das per :after oder :before lösen.)

* aber ein allerletztes; wenn du es jetzt noch nicht verstehst, muss einer von uns beiden wohl in einen Dolmetscher investieren - oder du dich mehr mit den Grundlagen von CSS beschäftigen

MfG ChrisB

[Enrico]

Hallo ChrisB,

wenn du es jetzt noch nicht verstehst

Ich vermute, dass Du meinst, dass ich in einer bestimmten Richtung etwas nicht verstehe, ich aber etwas anderes meine, was ich nicht verstehe:

Wenn meine html-Struktur...

<ul class="...">
      <li>
         <a href="#"></a>
         <ul>
            <li></li>
         </ul>
      </li>
   </ul>

...in...

<ul class="...">
      <li>
         <a href="#"></a>
         <span>...</span>
      </li>
   </ul>

...schrumpft, ich aber in meiner css-Datei für...

ul          -> Nur Einleitung der Liste (pro Grafiklink habe ich eine eigene Liste)
   ul li a     -> Enthält den Grafiklink
   ul li ul li -> Enthält den zugehörigen "Notizzettel" als Hintergrundgrafik

...definiert habe, wie weiss dann der Browser, dass ich er im Endeffekt eine verschachtelte Liste anzeigen soll, da ja die Innenverschachtelung html-technisch fehlt?

Wenn wir allerdings vom selben fehlenden Verständnis gesprochen haben, dann ziehe ich mich an dieser Stelle dezent aus der Affaire zurück, probier's morgen noch einmal und danke Dir für Deine Geduld und Deine Bemühungen (war nicht ironisch gemeint).

Gruß
Enrico

[ChrisB]

Hi,

Wenn meine html-Struktur...

<ul class="...">
      <li>
         <a href="#"></a>
         <ul>
            <li></li>
         </ul>
      </li>
   </ul>

...in...

<ul class="...">
      <li>
         <a href="#"></a>
         <span>...</span>
      </li>
   </ul>

...schrumpft, ich aber in meiner css-Datei für...

ul          -> Nur Einleitung der Liste (pro Grafiklink habe ich eine eigene Liste)
   ul li a     -> Enthält den Grafiklink
   ul li ul li -> Enthält den zugehörigen "Notizzettel" als Hintergrundgrafik

...definiert habe, wie weiss dann der Browser, dass ich er im Endeffekt eine verschachtelte Liste anzeigen soll, da ja die Innenverschachtelung html-technisch fehlt?

Sie fehlte auch schon vorher - weil deine UL/LI überhaupt keinen Inhalt hatte - also *gab* es da nichts zu verinnenschachteln!

Die Selektoren in deinem CSS musst du selbstverständlich so anpassen, dass sie auf die neue Struktur passen.

Und wenn du mit deiner „Innenverschachtelung“ nur meinst, dass du das Hintergrundbild (deinen „Notizzettel“) eingerückt darstellen willst - dann, hatte ich auch bereits geschrieben, richte das Hintergrundbild entsprechend aus; bzw. erweitere den dir zur Anzeige dieses Hintergrundbildes innerhalb des LI- oder A-Elementes, die deinen eigentlichen Link auszeichnen, zur Verfügung stehenden Platz noch über entsprechendes Padding, falls erforderlich.

Wenn wir allerdings vom selben fehlenden Verständnis gesprochen haben, [...]

K.A., vielleicht ist es auch nur ein Problem des Vorstellungsvermögens, dass du nicht „sehen“ kannst, welche Umsetzungsmöglichkeit mir vor meinem inneren Auge schwebt ... :&

MfG ChrisB

[Enrico]

Guten Morgähn, ChrisB,

ok, dann werde ich - nach Anfertigung einer Sicherheitskopie meiner css- und html-Seite - versuchen, die Struktur ensprechend zu verkleinern und mit Selektoren zu arbeiten, wobei ich mir hier erst mal ihre prinzipielle Funktionsweise aneignen muss.

Ehrlich gesagt, ohne Dir hier zu nahe treten zu wollen, verstehe ich nicht, warum etwas angezeigt werden soll, wenn im html-Code keine entsprechenden Tags genannt sind, aber vielleicht ist das u.a. einer der Zwecke von Selektoren, ich weiß es ja (noch) nicht.

Gruß
Enrico

[ChrisB]

Hi,

Ehrlich gesagt, ohne Dir hier zu nahe treten zu wollen, verstehe ich nicht, warum etwas angezeigt werden soll, wenn im html-Code keine entsprechenden Tags genannt sind,

Ich verstehe nicht, warum du Elemente ins HTML einbauen willst, wenn diese gar keinen Inhalt haben sollen.

aber vielleicht ist das u.a. einer der Zwecke von Selektoren, ich weiß es ja (noch) nicht.

Nein, der Sinn von Selektoren ist nur, Elemente auszuwählen - um sie dann anschließend wie gewünscht formatieren zu können.

MfG ChrisB

[Enrico]

Hallo ChrisB,

ojeoje, ich befürchte, da steig ich wirklich nicht dahinter... :-|

Ich habe jetzt mal das innere "<li></li>" und das nächstumgebende "<ul></ul>" weggelassen und der Klebezettel wird mir nicht mehr angezeigt bei unveränderter Definition in css.

Und genau dahin ging mein Bedenken.

Ich denke, es ist wohl am Besten, wir klappen dieses Kapitel zu.

Dir nochmal vielen lieben Dank für Deine Geduld :-)

Gruß
Enrico

[ChrisB]

Hi,

ojeoje, ich befürchte, da steig ich wirklich nicht dahinter... :-|

Und ich habe immer mehr den Eindruck, dass das, was du dir zusammengebastelt hattest, mehr oder weniger irgendwie „zufällig funktioniert“ hat - und nicht deshalb, weil du bewusst irgendwo Elemente eingesetzt und formatiert hast.

Ich habe jetzt mal das innere "<li></li>" und das nächstumgebende "<ul></ul>" weggelassen und der Klebezettel wird mir nicht mehr angezeigt bei unveränderter Definition in css.

Ja, natürlich nicht - wenn du ein Element formatierst, dass es gar nicht mehr gibt, ist doch wohl absolut logisch, dass du davon auch nichts mehr siehst ...!

Deshalb schrieb ich MEHRMALS, dass du stattdessen ANDERE Elemente formatieren sollst - solche, die noch da sind, solche, die nicht inhaltsleer und damit sinnlos sind.

Und genau dahin ging mein Bedenken.

Wenn du nur die Hälfte von dem umsetzt, was ich dir vorschlage - dann brauchst du keine „Bedenken“ zu haben, sondern dann ist es absolut *vorhersehbar*, dass dabei nicht das gewünschte herauskommt.

Ich denke, es ist wohl am Besten, wir klappen dieses Kapitel zu.

Ich denke, es wäre am besten, du klappst noch mal auf - und zwar die Grundlagenkapitel von SELFHTML, sowohl was HTML als auch CSS angeht.

Ich kann dir hier keine Vorschläge auf fachlich halbwegs akzeptablem Niveau machen (bzw. du sie nicht verstehen), wenn dir noch so absolutes Grundlagenwissen fehlt, wie bspw. was ein Selektor in CSS eigentlich ist und was er für eine Aufgabe hat.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Ich denke, es wäre am besten, du klappst noch mal auf

Das werde ich tun :-)

Gruß
Enrico

[MudGuard]

Hi,

Weil es vor der letzten Eiszeit mal Browser gab, die kein CSS kannten,

Es ging nicht darum, ob sie CSS kannten - es ging darum, ob sie das style-Element kannten.
Wenn sie nur wußten, was das style-Element ist, aber kein CSS kannten, war das bereits genug Wissen, den Inhalt des style-Elements nicht anzuzeigen.

Die Kommentare waren für die Browser, die nicht einmal das style-Element kannten.

(Textbrowser können zwar manchmal keinerlei CSS, wissen aber trotzdem korrekt mit dem style-Element umzugehen)

cu,
Andreas

[ChrisB]

Hi,

Was ich erreichen möchte, ist, dass bei MouseOver über einen Grafiklink über css auch der zugehörige versteckte div-Bereich angezeigt wird, weiß aber nicht, ob und wie das genau funktionieren kann.

Da der DIV kein Nachfahrenelement von A sein kann, kannst du auch nicht den Kind- oder Nachfahrenselektor nutzen; da bleibt dir also höchstens noch der Nachbar- oder Schwesterselektor.

Ich meine, im Internet mal Konstrukte gefunden zu haben, die über die spitze Klammer rechts (">") miteinander verbunden (?) wurden, konnte aber aufgrund der Tatsache, dass ich nicht weiß, wie diese Technik heisst, auch nicht gewinnbringend danach googeln.

Du weißt aber wenigstens, dass es sich dabei um Selektoren in CSS handelt - und darüber kannst du dich sehr wohl informieren, und wirst dabei auch u.a. auf > stoßen.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Selektoren
und darüber kannst du dich sehr wohl informieren

Und das werde ich jetzt auch machen, ich wusste nur nicht mehr, dass die spitze Klammer in css als Selektor bezeichnet wird.

Gruß
Enrico

[Deus Figendi]

Ohne den ganzen Faden gelesen zu haben würde ich es so lösen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Liste Einruecken</title>  
  <style type="text/css">  
   ul {  
    position:relative;  
    left:2em;  
    top:20em;  
   }  
   li {  
    float:left;  
    position:relative;  
    padding:-2em;  
    margin-left:-2em;  
   }  
   li.odd {  
    top:2em;  
   }  
   li div {  
    display:none;  
    position:absolute;  
    background-color:#FFB;  
    padding:0.5em;  
   }  
   li.even div {  
    bottom:4em;  
   }  
   li.odd div {  
    bottom:6em;  
   }  
   li:hover div {  
    display:block;  
   }  
  </style>  
 </head>  
 <body>  
  
 <ul>  
  <li class="even"><div>mehrzeiliger erklaerender Text zu Menuepunkt1</div><a>Menuepunkt 1</a></li>  
  <li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt2, der auch ein bisschen laenger ist als der zu Menuepunkt 1</div><a>Menuepunkt 2</a></li>  
  <li class="even"><div>mehrzeiliger erklaerender Text zu Menuepunkt3</div><a>Menuepunkt 3</a></li>  
  <li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt4</div><a>Menuepunkt 4</a></li>  
  <li class="even"><div>foobar</div><a>Menuepunkt 5</a></li>  
  <li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt6</div><a>Menuepunkt 6</a></li>  
 </ul>  
 </body>  
</html>  

Schaut so aus wie ich dich verstanden habe.
Wie genau du dein Menü jetzt positionierst will ich dir gerne überlassen ich habe jetzt einfach einen Wert genommen der eben genügend Abstand nach oben schafft :)

Wenn du CSS3 benutzen willst kannst du auch das even/odd weglassen und einfach zählen :)
Es gibt auch noch den semantischen Vorteil, dass der Erklär-Text direkt dem Menü zugeordnet ist, also Roboter erkennen können, dass das zusammengehört, was ja sonst mit IDs oder so nicht unbedingt der Fall sein muss.