Grafiken verschieben sich

**BenzBabe** · 18.08.2009 12:59

Hallo! Ich muss im Rahmen eines Uni-Projektes eine Homepage erstellen. Ich habe das Ganze über Phase 5 erstellt. Nun habe ich folgendes Problem: Öffne ich die betreffende Seite "Links" in Phase 5 wird alles so dargestellt wie ich mir das vorstelle, jedoch im IE und bei FF verschieben sich meine Grafiken.
Kann mir bitte jemand helfen, weiss absolut nicht wo mein Fehler liegt. Danke schon mal!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kevin</title>
<style type=text/css>
body {
font-size: 12px;
margin-top: 30px;
font-family: Verdana;
background-color: silver;
text-align: center
}

h1 {
font-size: 18px;
margin-bottom: 0px;
color: black
}

h2 {
font-size: 14px;
color: black
}

#oben {
height: 65px;
padding-left: 24px;
padding-top: 5px;
border-bottom: black 1px solid;
background-color: #F77
}

#inhalt {
float: right;
width: 560px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 130px;
background-color: white
}

#unten {
width: 755px;
padding-bottom: 15px;
text-align: center;
background-color: white
}

a:link.oben {
font-weight: bold;
font-size: 12px;
color: white;
text-decoration: none
}

a:visited.oben {
font-weight: bold;
font-size: 12px;
color: white;
text-decoration: none
}

a:hover.oben {
font-weight: bold;
font-size: 12px;
color: white;
text-decoration: underline
}

a:active.oben {
font-weight: bold;
font-size: 12px;
color: white;
text-decoration: none
}
</style>
</head>
<body>
<div style="width: 760px; margin: 0px auto; text-align: left; border-top: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; border-bottom: #000000 1px solid; background-color: white">
<div id=oben>
<h1>Mein Sohn Kevin</h1><br>
<a class="oben" onfocus="this.blur()" href="Index.html" target="_self">Home</a>                
<a class="oben" onfocus="this.blur()" href="Bilder.html" target="_self">Bilder</a>                
<a class="oben" onfocus="this.blur()" href="Urlaub.html" target="_self">Urlaub</a>                
<a class="oben" onfocus="this.blur()" href="Formular.html" target="_self">Umfrage</a>                
<a class="oben" onfocus="this.blur()" href="Links.html" target="_self">Tipps</a>                
</div>
<div id=inhalt>
<h2>Tipps und Anregungen</h2>

<img src="Spielplatz.jpg" usemap="#Spielplatz" width="670" height="864" border="0" alt=""></body></div>
<div style="position:absolute;left:349;top:421;">
<a href="http://www.zoopark-erfurt.de">
<img src="Zoopark Erfurt Logo.jpg" title="Zoopark Erfurt" width="79" height="79" border="0" alt=""></a></div>
<div style="position:absolute;left:332;top:594;">
<a href="http://www.ega-erfurt.com">
<img src="Ega Erfurt Logo.jpg" title="EGA Erfurt" width="79" height="73" border="0" alt=""></a></div>
<div style="position:absolute;left:358;top:188;">
<a href="http://www.kinderlanderfurt.de">
<img src="Kinderland Erfurt Logo.jpg" title="Kinderland Erfurt" width="85" height="79" border="0" alt=""></a></div>
<div style="position:absolute;left:359;top:271;">
<a href="http://www.tollikiz.de">
<img src="Tollikiz Erfurt Logo.jpg" title="Tollikiz Erfurt" width="79" height="70" border="0" alt=""></a></div>
<div style="position:absolute;left:268;top:344;">
<a href="http://www.avenida-therme.de">
<img src="Avenida Therme Erfurt.jpg" title="Avenida Therme Erfurt" width="86" height="70" border="0" alt=""></a></div>
<div style="position:absolute;left:247;top:502;">
<a href="http://www.waidspeicher.de">
<img src="Waidspeicher.jpg" title="Waidspeicher Erfurt" width="85" height="73" border="0" alt=""></a></div>
<div style="position:absolute;left:438;top:505;">
<a href="http://www.cinestar.de">
<img src="CineStar.jpg" title="CineStar" width="85" height="73" border="0" alt=""></a></div>
<map name="Spielplatz">
<area shape="circle" href="http://www.kart-center-erfurt.de" coords="489,666,37" target="blank"
title="Hier gehe ich am Liebsten hin..."></area>
<area shape="circle" href="http://www.erlebnistierpark.de" coords="343,615,36" target="blank"
title="Mein Geheimtipp ist..."></area>
<area shape="circle" href="http://www.freizeitpark-plohn.de" coords="124,680,40" target="blank"
title="Willst Du wissen, wo es mir am Besten gefällt...?"></area>
<area shape="circle" coords="258,238,18" target="blank"
title="Was kann ich heute machen?"></area>
</map>
</div>
<br style="clear: both">
</a>

</div>
</div>
</body>
</html>

**sejuma** · 18.08.2009 13:27

Verwende zunächst einen qualifizierten Doctype, damit der IE das CSS-Boxmodell richtig darstellen kann, z.B. diesen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Die Navi solltest du vollkommen neu machen, weil die verwendeten Leerzeichen als "Abstandhalter" nicht geeignet sind.
Den ganzen onfocus/blur-Kram solltest du entfernen.
Verwende für die Navi eine ul-Liste und formatiere die Links per CSS.
Beispiele findest du hier.

Bei den Grafikdateibezeichnungen und dementsprechen den Pfaden verzichte auf Leer- und Sonderzeichen und möglichst auch auf Großbuchstaben.
Statt Zoopark Erfurt Logo.jpg besser zoopark_erfurt_logo.jpg

**BenzBabe** · 18.08.2009 13:51

Danke für Deine Hilfe, nur leider funktioniert es immer noch nicht.
Mein Navi bereitet mir auch eigentlich keine Probleme, lediglich die Positionierung der einzelnen Bilder. Diese verschieben sich bei IE und FF (Die kleinen Bilder liegen zu weit links und das Große verschiebt sich nach rechts)
Wie gesagt in Phase 5 wird alles richtig dargestellt.
Habe ich einen Fehler in der Positionierung gemacht?

**sejuma** · 18.08.2009 14:42

Da fehlen auch durchgänig die Einheiten, wie z.B. hier:

Code:

<div style="position:absolute;left:349;top:421;">

An dieser Stelle darf der body nicht geschlossen werden:

Wenn du das bereinigt hast und es klappt immer noch nicht, versuch's mal noch mit dieser zusätzlichen CSS-Angabe:
* {margin: 0; padding: 0;}
siehe Abstände einheitlich darstellen
und lass die Seite validieren.

Sollte das auch nichts nützen, dann bitte einen Link zur Seite posten.

zur Startseite vom TP

Thema: Grafiken verschieben sich

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Grafiken verschieben sich

Ähnliche Themen

CS3: sich überlappende Bilddateien lassen sich im PS-Fenster nicht verschieben

Layer verschieben sich

Frames verschieben sich

Layer verschieben sich :-(

Links verschieben sich

Aktive Benutzer

Aktive Benutzer