Frederik: Problem mit display:block und verlinkten Bildern im float:left

SELF-Forum

Problem mit display:block und verlinkten Bildern im float:left

Frederik
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich habe ein Problem mit meinen verlinkten Bildern: Eine 140px breite Navigationsleiste "umfließt" per float:left; den Content, in dieser Leiste befinden sich Bilder als Links. Wenn ich jetzt jedoch mit dem Mozilla / Opera auf den Link (also das Bild) klicken will, kann ich das jedoch nur innerhalb der ersten ca. 10 Pixel. Im Internet Explorer hingegen kann ich das ganze Bild als Link benutzen.

Ich habe mal eine Beispielseite auf meinen "Übergangsserver" gestellt:
Hier die HTML-Datei und dort die CSS-Datei.

Ich hoffe, ihr könnt mir helfen!

Grüße!
Frederik

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit display:block und verlinkten Bildern im float:left

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    installiere Dir im Mozilla/Frefox die Webdeveloper Toolbar und wähle

    • outline blocklevel elements
    • display id & class details
      und Du wirst sehen, daß Dein .inhalt die Navigation überlagert. Kein Wunder bei position:relative - lösche diese hier unsinnige Angabe und verwende margin.

    freundliche Grüße
    Ingo

    --
    [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit display:block und verlinkten Bildern im float:left

      Frederik
      – Informationen zu den Bewertungsregeln

      Hallo Ingo,

      und Du wirst sehen, daß Dein .inhalt die Navigation überlagert. Kein Wunder bei position:relative - lösche diese hier unsinnige Angabe und verwende margin.

      Danke! Damit ist das Problem gelöst...

      installiere Dir im Mozilla/Frefox die Webdeveloper Toolbar

      Danke für den Tipp!

      Grüße!
      Frederik

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Nachtrag: height:100%; ?

    Frederik
    – Informationen zu den Bewertungsregeln

    Hier die HTML-Datei und dort die CSS-Datei.

    Ich habe noch eine kleine Nachfrage: Wie bekomme ich es jetzt hin, dass wenn der Inhalt "länger" als die Navigationsleiste ist, die Leiste trotzdem "mitläuft", also bis ans Ende des seite-Containers?

    Mit height:100%; funktioniert es nicht.

    Grüße!
    Frederik

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Nachtrag: height:100%; ?

      Ingo Turski Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Ich habe noch eine kleine Nachfrage: Wie bekomme ich es jetzt hin, dass wenn der Inhalt "länger" als die Navigationsleiste ist, die Leiste trotzdem "mitläuft", also bis ans Ende des seite-Containers?

      eine solche Abhängigkeit wie bei Tabellenzellen ist bei CSS-Containern nicht vorgesehen. Du kannst den Effekt höchstens optisch simulieren, z.B. über ein Hintergrundbild oder eine Hintergrundfarbe für das umschließende Element mit der Angabe für dasjenige Element, welches eine geringere Höhe hat, also meistens der Navigation.

      freundliche Grüße
      Ingo

      --
      [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Nachtrag: height:100%; ?

        Frederik
        – Informationen zu den Bewertungsregeln

        eine solche Abhängigkeit wie bei Tabellenzellen ist bei CSS-Containern nicht vorgesehen. Du kannst den Effekt höchstens optisch simulieren, z.B. über ein Hintergrundbild oder eine Hintergrundfarbe für das umschließende Element mit der Angabe für dasjenige Element, welches eine geringere Höhe hat, also meistens der Navigation.

        Perfekt! Vielen Dank für deine nette Hilfe :-)

        Grüße!
        Frederik

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln