Mira: Imagemap absolut oben links positionieren

Hi, ich hab schon alles durch (Top:0px usw.) aber es bleibt bei der Imagemap trotzdem immer oben ein kleiner weißer Rand. Bitte helft!
Mira

  1. Hallo Mira,

    hast du das margin von body auf 0px gesetzt?

    body {
       margin: 0px;
    }

    Schönen Gruß aus München

    die knappschaft

    --

    sh:(  fo:|  ch:?  rl:°  br:$,<,>  n4:&  ie:|  mo:|  va:)  de:]  zu:)  fl:|  ss:|  ls:[,#
    1. jo...geht aber nicht:

      ..
      <style type="text/css">
      BODY {margin: 0px;}
      </style>
      </HEAD>
      <BODY >
      <div style="position:absolute; width:189px; height:11px; z-index:1; left: 0px; top: 0px">
      <IMG height="11" src="navi.png" width="189" useMap="#navi2" name="navi" border="0" > .....

      1. Hallo Mira,

        kann man sich das mal anschauen -> URL?

        Schönen Gruß aus München

        die knappschaft

        --

        sh:(  fo:|  ch:?  rl:°  br:$,<,>  n4:&  ie:|  mo:|  va:)  de:]  zu:)  fl:|  ss:|  ls:[,#
        1. ups, da steht mein Beitrag ja plötzlich über euren Postings

      2. Ist das jetzt zuviel des Guten???

        <style type="text/css">
        html, body { margin:0; border:0; padding:0; }
        p.obenlinks, p.obenlinks img { margin:0; border:0; padding:0; }
        </style>
        </HEAD>
        <BODY >
        <p class="obenlinks"><IMG height="11" src="navi.png" width="189" useMap="#navi2" name="navi" border="0" alt=""></p>
        <MAP name="navi2">
        <AREA shape=RECT target=self coords=2,2,38,9 href="test.html">
        <AREA shape=RECT target=self coords=49,2,94,9 href="test.html">
        <AREA shape=RECT target=self coords=105,2,124,9 href="test.html">
        <AREA shape=RECT target=self coords=135,2,163,9 href="test.html">
        <AREA shape=RECT target=self coords=174,1,187,10 href="test.html"></MAP>
        </BODY></HTML>

        Funktioniert aber :)
        Danke
        Mira

        1. Hallo Mira,

          schoen, dass es funktioniert! ;-)

          Ist das jetzt zuviel des Guten???

          html, body { margin:0; border:0; padding:0; }
          p.obenlinks, p.obenlinks img { margin:0; border:0; padding:0; }

          Naja, man koennte das CSS noch etwas kompakter schreiben:
          html, body,  p.obenlinks, p.obenlinks img
            { margin:0; border:0; padding:0; }

          <p class="obenlinks"><IMG height="11" src="navi.png" width="189" useMap="#navi2" name="navi" border="0" alt=""></p>
          <MAP name="navi2">
          <AREA shape=RECT target=self coords=2,2,38,9 href="test.html">
          <AREA shape=RECT target=self coords=49,2,94,9 href="test.html">
          </MAP>

          IMG-Tag:
          * Die folgenden Attribute sind IMHO ueberfluessig:
            name, border
          * Mach ggf. ein sinnvolleres ALT-Attribut hin.

          AREA-Tags:
          Sollten unbedingt ein ALT-Attribut mit sinnvollem Text enthalten.
          (Fuer Benutzer von Nicht-Grafischen Browsern, z.B. Blinde.)
          Auch eine zweite, redundante Navigation mit Text-Links waere gut fuer alle, die die Grafik und somit die Imagemap nicht sehen.
          Siehe:
          http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-text-equivalent
          http://www.w3.org/TR/WCAG10-HTML-TECHS/#client-side-text-equivs

          mfg
          Thomas

      3. Hallo Mira,

        Versuch's nochmal mit dem, was ich Dir im vorderen Posting geraten hatte, naemlich _saemtliche_ Abstaende auf Null zu setzen.

        <div style="position:absolute; width:189px; height:11px; z-index:1; left: 0px; top: 0px">
        <IMG height="11" src="navi.png" width="189" useMap="#navi2" name="navi" border="0" > .....

        Der "Fehler" koennte auch ganz einfach der Zeilenumbruch im Quelltext zwischen <div ...> und <img ...> sein.
        Mach dort _alle_ Leerzeichen und Zeilenumbrueche weg:
        <div ...><img ...></div>

        Und warum nimmst Du <DIV> und nicht einfach <P>?

        <p><img ...></p>

        mfg
        Thomas

  2. Hallo Mira,

    Hi, ich hab schon alles durch (Top:0px usw.) aber es bleibt bei der Imagemap trotzdem immer oben ein kleiner weißer Rand. Bitte helft!

    In Ergaenzung zu Sascha:
    Wenn Du alle Abstaende auf Null setzen kannst, kannst Du
    Dir vielleicht das absolute Positionieren ersparen.
    Versuch's mal mit:

    html, body { margin:0; border:0; padding:0; }

    Je nachdem, wie der HTML-Code aussieht, musst Du natuerlich
    auch noch weitere Abstaende auf Null setzen, z.B. bei
    <p class="imagemap"><img src="..." alt="..." usemap="#bla"></p>
    muesste das CSS so aussehen:

    p.imagemap, p.imagemap img { margin:0; border:0; padding:0; }

    mfg
    Thomas