waendu: hover / mouseover / verhalten / formatierung

Guten Tag

Nachdem ich mit Google relativ lang nach einer Lösung gesucht habe, wende ich mich nun an euch.

Mit meiner Website habe ich zwei Probleme:

1. Grundsätzlich habe ich links das Menu und rechts den Inhalt. Unter "Architektur" habe ich im Menu vier Links und in Inhalt je ein Bild zu jedem Link. Ich möchte nun, dass wenn ich mit der Maus über ein Bild gehe, der entsprechende Link markiert wird (gleich wie wenn ich mit der Maus direkt über den Link gehe). Ich habe bereits Lösungen gefunden, für Bild und Link im selben Container - sind sie in meinem Fall aber nicht.

Ein Beispiel für wie ich das gerne möchte seht ihr hier.

2. Da ich für a:hover ein grauer Hintergrund eingestellt habe (im Stylesheet), wird jetzt im Firefox - wenn man mit der Maus über die Bilder geht - auch ein grauer Hintergrund angezeigt. Wie krieg ich den denn weg?

Herzlichen Dank für Eure Hilfe!

  1. @@waendu:

    nuqneH

    Ich habe bereits Lösungen gefunden, für Bild und Link im selben Container - sind sie in meinem Fall aber nicht.

    Dann mit JavaScript, nicht mit CSS. Aber worin siehst du den Mehrwert für den Nutzer?

    1. Da ich für a:hover ein grauer Hintergrund eingestellt habe (im Stylesheet), wird jetzt im Firefox - wenn man mit der Maus über die Bilder geht - auch ein grauer Hintergrund angezeigt. Wie krieg ich den denn weg?

    Nicht für 'img' margin angeben, sondern für 'a'. Und das Unterlängen-Problem lösen: vertical-align: botttom.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Hi,

      Und das Unterlängen-Problem lösen: vertical-align: botttom.

      Bei Dir hat das bottom eher ein Überlängen- als ein Unterlängen-Problem ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    2. @@waendu:

      nuqneH

      Ich habe bereits Lösungen gefunden, für Bild und Link im selben Container - sind sie in meinem Fall aber nicht.

      Dann mit JavaScript, nicht mit CSS. Aber worin siehst du den Mehrwert für den Nutzer?

      Naja der Nutzer sieht dann, welches Bild zu welchem Projekt gehört. die Bilder habe ich nicht beschriftet... da ich JavaScript nicht verstehe, lasse ich es aber wohl sein :)

      1. Da ich für a:hover ein grauer Hintergrund eingestellt habe (im Stylesheet), wird jetzt im Firefox - wenn man mit der Maus über die Bilder geht - auch ein grauer Hintergrund angezeigt. Wie krieg ich den denn weg?

      Nicht für 'img' margin angeben, sondern für 'a'. Und das Unterlängen-Problem lösen: vertical-align: botttom.

      kein margim für "img" - das verstehe ich. aber was ist "a"? kannst du mir dies bitte genauer erklären? Sorry aber ich bin Anfänger :)

      Qapla'

      1. Am liebsten möchte ich einfach ein zweites a:hover erstellen. Nur wie kann ich das machen? Wie muss der Name sein (a.zwei:hover) und wie kann ich dann auswählen, dass dieser und nicht der normale auf ein Objekt angewendet wird?

        Merci!

      2. @@waendu:

        nuqneH

        kein margim für "img" - das verstehe ich. aber was ist "a"?

        Der Selektor für Elemente des Typs 'a' (Links).

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
  2. Moin,

    Guten Tag

    Nachdem ich mit Google relativ lang nach einer Lösung gesucht habe, wende ich mich nun an euch.

    Mit meiner Website habe ich zwei Probleme:

    1. Grundsätzlich habe ich links das Menu und rechts den Inhalt. Unter "Architektur" habe ich im Menu vier Links und in Inhalt je ein Bild zu jedem Link. Ich möchte nun, dass wenn ich mit der Maus über ein Bild gehe, der entsprechende Link markiert wird (gleich wie wenn ich mit der Maus direkt über den Link gehe). Ich habe bereits Lösungen gefunden, für Bild und Link im selben Container - sind sie in meinem Fall aber nicht.

    Erstmal machst du aus den Menüs http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Listen.

    Ein Beispiel für wie ich das gerne möchte seht ihr hier.

    Dieses Beispiel arbeitet mit JavaScript. Mit reinem CSS wirst du das bei dieser Seitenaufteilung nicht hinkriegen.

    1. Da ich für a:hover ein grauer Hintergrund eingestellt habe (im Stylesheet), wird jetzt im Firefox - wenn man mit der Maus über die Bilder geht - auch ein grauer Hintergrund angezeigt. Wie krieg ich den denn weg?

    Dieses Problem taucht häufiger auf, um eine Klasse für Links mit Bildern drin wirst du nicht herumkommen, mit CSS kann man (ja leider) nicht rück-/aufwärts selektieren.

    Herzlichen Dank für Eure Hilfe!

    Gruß,
    Take

    1. @@Take:

      nuqneH

      um eine Klasse für Links mit Bildern drin wirst du nicht herumkommen,

      Aber natürlich kommt es da drumherum.

      mit CSS kann man (ja leider) nicht rück-/aufwärts selektieren.

      Aber abwärts. Die Bilder sind allesamt Nachfahren des Elements mit der ID "content_uebersicht".

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Moin,

        @@Take:

        nuqneH

        um eine Klasse für Links mit Bildern drin wirst du nicht herumkommen,

        Aber natürlich kommt es da drumherum.

        Es?

        mit CSS kann man (ja leider) nicht rück-/aufwärts selektieren.

        Aber abwärts. Die Bilder sind allesamt Nachfahren des Elements mit der ID "content_uebersicht".

        Ok, ich gebe zu, ich habe das jetzt nicht auf seine spezielle Seite bezogen. Aber was, wenn er jetzt irgendwann einmal auch Text auf der rechten Seite verlinken will?

        Qapla'

        Gruß,
        Take

      2. @@Take:

        nuqneH

        um eine Klasse für Links mit Bildern drin wirst du nicht herumkommen,

        Aber natürlich kommt es da drumherum.

        Ich bin männlich :)

        mit CSS kann man (ja leider) nicht rück-/aufwärts selektieren.

        Aber abwärts. Die Bilder sind allesamt Nachfahren des Elements mit der ID "content_uebersicht".

        Kannst du mir bitte erklären, was genau ich machen muss? Merci!

        Qapla'

        1. @@waendu:

          nuqneH

          Aber abwärts. Die Bilder sind allesamt Nachfahren des Elements mit der ID "content_uebersicht".

          Kannst du mir bitte erklären, was genau ich machen muss? Merci!

          Selektoren für Nachfahren verwenden. [CSS2 §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
  3. Om nah hoo pez nyeetz, waendu!

    Mit meiner Website habe ich zwei Probleme:

    zwei? - 57! ;-)

    Im Ernst: valider Code ist ganz schön nützlich, um der gewünschten Seitendarstellung nahe zu kommen.

    Matthias

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Om nah hoo pez nyeetz, waendu!

      Mit meiner Website habe ich zwei Probleme:

      zwei? - 57! ;-)

      Im Ernst: valider Code ist ganz schön nützlich, um der gewünschten Seitendarstellung nahe zu kommen.

      Ich werde mir das mal ansehen - doch verstehen werde ich es wohl nicht :)

      Matthias

      1. Om nah hoo pez nyeetz, waendu!

        Deinen Postings entnehme ich zweierlei:

        #1# du hast im Wesentlichen überhaupt keine Ahnung

        #2# du lässt dir deine Website von irgendeinem Editor erstellen, wahrscheinlich NFO.

        Jetzt gibt es für dich folgende Möglichkeiten:

        #1# du hast aus irgendwelchen Gründen nicht die Möglichkeit, dich selbst damit zu beschäftigen. Dann bleibt dir nur die Hilfe-Funktion deines WYSIWIG-Editors zu bemühen oder jemanden zu bitten die gewünschten Änderungen für dich vorzunhmen.

        #2# du möchtest lernen, wie man selbst ordentliche Internetseiten erstellt. Dann beschäftige dich mit den Grundlagen. Hier wirst du immer Leute finden, die dich auf diesem Weg unterstützen. Die Antworten die du bisher bekommen hast zeigen das. Sie überfordern dich zwar im Moment, was aber daran liegt, dass du dich bisher mit der Materie noch nicht beschäftigt hast.

        Stell dir vor, du hast eine Frage zur Bruchrechnung und kannst aber mit den natürlichen Zahlen noch nicht umgehen.

        Stell dir vor, du hast eine Frage zur Rechtschreibung, kennst aber noch gar nicht alle Buchstaben.

        Kopf hoch!

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Om nah hoo pez nyeetz, waendu!

          Deinen Postings entnehme ich zweierlei:

          #1# du hast im Wesentlichen überhaupt keine Ahnung

          #2# du lässt dir deine Website von irgendeinem Editor erstellen, wahrscheinlich NFO.

          Was ist NFO? Habe die Website mit Dreamweaver erstellt ...

          Jetzt gibt es für dich folgende Möglichkeiten:

          #1# du hast aus irgendwelchen Gründen nicht die Möglichkeit, dich selbst damit zu beschäftigen. Dann bleibt dir nur die Hilfe-Funktion deines WYSIWIG-Editors zu bemühen oder jemanden zu bitten die gewünschten Änderungen für dich vorzunhmen.

          #2# du möchtest lernen, wie man selbst ordentliche Internetseiten erstellt. Dann beschäftige dich mit den Grundlagen. Hier wirst du immer Leute finden, die dich auf diesem Weg unterstützen. Die Antworten die du bisher bekommen hast zeigen das. Sie überfordern dich zwar im Moment, was aber daran liegt, dass du dich bisher mit der Materie noch nicht beschäftigt hast.

          Stell dir vor, du hast eine Frage zur Bruchrechnung und kannst aber mit den natürlichen Zahlen noch nicht umgehen.

          Stell dir vor, du hast eine Frage zur Rechtschreibung, kennst aber noch gar nicht alle Buchstaben.

          Kopf hoch!

          Matthias

          Konnte das Problem mit "vertical-align: botttom" lösen ...

          1. Om nah hoo pez nyeetz, waendu!

            #2# du lässt dir deine Website von irgendeinem Editor erstellen, wahrscheinlich NFO.

            Was ist NFO? Habe die Website mit Dreamweaver erstellt ...

            Net Fusion Objects ;-) Richtig wäre allerdings NOF NetObjects Fusion.

            Matthias

            --
            http://www.billiger-im-urlaub.de/kreis_sw.gif
          2. Hi,

            Konnte das Problem mit "vertical-align: botttom" lösen ...

            Zu viel Tee ...

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.