Imagemap absolut oben links positionieren
Mira
- css
0 Sascha Knappe0 Mira0 Sascha Knappe0 Mira
0 Mira0 Thomas Luethi
0 Thomas Luethi
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
Hallo Mira,
hast du das margin von body auf 0px gesetzt?
body {
margin: 0px;
}
Schönen Gruß aus München
die knappschaft
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" > .....
Hallo Mira,
kann man sich das mal anschauen -> URL?
Schönen Gruß aus München
die knappschaft
ups, da steht mein Beitrag ja plötzlich über euren Postings
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
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
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
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