Gegen Bilderklau - Das Original | Druckvorschau: Design (Iframe & Imagemap) zentrieren

Geschrieben von mickymouse am 09.07.2012 um 14:06:

Design (Iframe & Imagemap) zentrieren

Hallo ihr Lieben,

ich bekomme es einfach nicht raus.
Ich habe ein Imagemap gecodet mit einem Iframe, indem die Links angezeigt werden. Nun wollte ich das ganze mithilfe einer Tabelle zentrieren. Das Bild und Imagemap ist auch zentriert, aber der Text, der in dem iframe erscheint, ist zu weit nach links verschoben.

Hier der Code:

Zitat:

<HTML>
<HEAD>
<TITLE>Seelen-Schoß</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">#
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<div align="center">
<table border="0" width="70%" id="table1">
<tr>
<td>

<IMG SRC="bilder/imagemap.jpg" WIDTH=1300 HEIGHT=700 BORDER=0 ALT="" USEMAP="#Seele">
<table border="0" width="70%" id="table1">
<tr>
<td>

<div id="Layer1" style="position: absolute; left: 209px; top: 141px;">
<iframe align="center" src="home.html" name="home" width="981" height="681" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
</iframe>

</td>
</tr>
</table>

<MAP NAME="seele">

<AREA SHAPE="rect" ALT="" COORDS="34,397,205,450" HREF="rechtliches.html" TARGET="home">
<AREA SHAPE="rect" ALT="" COORDS="33,332,176,363" HREF="kontakt.html" TARGET="home">
<AREA SHAPE="rect" ALT="" COORDS="32,275,140,304" HREF="persoenliches.html" TARGET="home">
<AREA SHAPE="rect" ALT="" COORDS="30,218,193,247" HREF="energiearbeit-reiki.html" TARGET="home">
<AREA SHAPE="rect" ALT="" COORDS="28,161,171,190" HREF="lebensberatung.html" TARGET="home">
<AREA SHAPE="rect" ALT="" COORDS="29,103,101,129" HREF="home.html" TARGET="home">
</MAP>

</BODY>
</div>
</HTML>

Kann mir jemand helfen?

Liebe Grüße

Geschrieben von Felixx am 01.09.2012 um 18:39:

Hallo!

Da ich das Bild nicht habe, musst du die Werter selber einstellen. Ersetze diese Zeile

code:
1: 2:	<div id="Layer1" style="position: absolute; left: 209px; top: 141px;">

durch diese

code:
1:	<div id="Layer1" style="position: relative; left: 0px; top: 0px;">

und schreibe statt den Nullen passende Werte. Spiel dich einfach ein bisschen damit herum, der top-Wert wird sicher negativ werden. Wichtig ist, dass die position auf "relative" gesetzt ist - sonst schaut das Design für deine Auflösung super aus und ist für jeden anderen Benützer zum Vergessen.

Außerdem hab ich einen kleinen Fehler gefunden. Schreibe statt

code:
1:	<iframe align="center" src="home.html" name="home" width="981" height="681" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>

das hier

code:
1:	<iframe align="center" src="home.html" name="home" width="981" height="681" frameborder=0 scrolling="auto" noresize style="border-width: 0px" style="FILTER: chroma (color=#ffffff)" ;>

sonst bringt dir der CSS Befehl nichts.

LG, hoffe, jetzt funktioniert alles.
PS: Ich würde allgemein empfehlen, das Design immer auch mit einer anderen Auflösung/von einem anderen PC aus mal anzuschauen, damit sich keine Fehler einschleichen ;-)