✔ Position wird nicht eingehalten

Status
Nicht offen für weitere Antworten.
Marco-P

Marco-P

Erfahrenes Mitglied
Hallo,

ich hoffe es kannmir jemand helfen.
Ich hätte gerne das die box bild 1 genau neben der box text1 steht usw.
aber leider tut sie das nicht. Weiß vielleihct jemand warum.

N dreamweaver ist alles ok nur im Firefox ist jeder text box nach unten verschoben.

MFG Marco

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{
 background:#eee;
 font-family:arial,verdana,sans-serif;
 font-size:.9em;
 margin:1em;
 text-align:center
}

#box{
 background:#fff;
 border:1px solid #ccc;
 margin:0 auto;
 text-align:left;
 width:748px;
}
#box #container {
	height: 700px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#box #container #bild1 {
	background: #ffd5ee;
	padding: 0;
	border: 1px solid #f09;
	margin: 10px;
	width: 225px;
	top: 0;
	left: 0;
	height: 200px;
}
#box #container #text1 {
	background-color: #d5eeff;
	padding: 0;
	border: 1px solid #09f;
	position: absolute;
	top: 148px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 247px;
	height: 200px;
	width: 440px;
}
#box #container #bild2 {
	background: #ffd5ee;
	padding: 0;
	border: 1px solid #f09;
	margin: 10px;
	width: 225px;
	top: 0;
	left: 0;
	height: 200px;
}
#box #container #text2 {
	background-color: #d5eeff;
	padding: 0;
	border: 1px solid #09f;
	position: absolute;
	top: 360px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 247px;
	height: 200px;
	width: 440px;
}
#box #container #bild3 {
	background: #ffd5ee;
	padding: 0;
	border: 1px solid #f09;
	margin: 10px;
	width: 225px;
	top: 0;
	left: 0;
	height: 200px;
}
#box #container #text3 {
	background-color: #d5eeff;
	padding: 0;
	border: 1px solid #09f;
	position: absolute;
	top: 572px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 247px;
	height: 200px;
	width: 440px;
}
-->
</style>
</head>

<body>
<div id="box">
	<div id="kopf"><img src="vorlage-bilder/Kopf.jpg" alt="Rabattcool Newsletter" width="602" height="107" /></div>
	<div>&nbsp;</div>
	<div id="container">
		<div id="bild1">Raum für den Inhalt von  id "container"</div>
		<div id="text1">Raum für den Inhalt von  id "text1"</div>
		<div id="bild2">Raum für den Inhalt von  id "bild2"</div>
		<div id="text2">Raum für den Inhalt von  id "text2"</div>
		<div id="bild3">Raum für den Inhalt von  id "bild3"</div>
		<div id="text3">Raum für den Inhalt von  id "text3"</div>
	</div>
Raum für den Inhalt von  id "box"</div>
</body>
</html>
 
Hi,

bei mir wird die gewünschte Position in allen mir zur Verfügung stehenden Browsern eingehalten.

Hier der repräsentative Firefox-Screenshot:

test_Marco-P.jpg

Eine Verschiebung tritt erst dann in Erscheinung, wenn das eingebundene Grafikelement im DIV #kopf nicht zur Verfügung steht, oder aus einem anderen Grund nicht angezeigt wird, woraufhin die linksseitigen DIVs nach oben wandern, und da die DIVs auf der rechten Seite mit der top-Eigenschaft absolut positioniert sind, verschieben sie sich auch nicht analog zu den benachbarten Boxen.

Lösung in diesem Fall:

Code: 
#box #kopf { height:107px; /* entspricht der Grafikhöhe */ }

mfg Maik
 
Ja du hast recht. wenn das Bild fehlt dann verschiebt sich alles.
Auch dein Code hilft da sehr weiter.

Aber was auch noch seltsam ist.

Ich lade die Seite zum erstenmal - Alles richtig angezeigt und Grafik geladen.
Ich lade die Seite das zweite mal usw - Grafik ist weg.
Ich lösche meine Privaten daten aus dem firefox und siehe da es geht wieder einmal und dann nicht mehr.

das hatte ich auch noch nie.
 
Marco-P hat gesagt.:
Aber was auch noch seltsam ist.

Ich lade die Seite zum erstenmal - Alles richtig angezeigt und Grafik geladen.
Ich lade die Seite das zweite mal usw - Grafik ist weg.
Ich lösche meine Privaten daten aus dem firefox und siehe da es geht wieder einmal und dann nicht mehr.

das hatte ich auch noch nie.
Zum Vergrößern anklicken....
Ich auch nicht.

mfg Maik
 
Also das Problem tritt nicht auf wenn .html datei und .jpg datei im selben verzeichnis stehen.
 
Kannst du mal auf deinem Webserver ein entsprechendes Beispiel mit zwei eingebundenen Grafikelementen hochladen, bei dem eines im Rootverzeichnis, und das andere in einem Unterverzeichnis liegt, damit man sich das mal anschauen kann?

mfg Maik
 
Also heute ist der wurm drin. Jetzt geht es egal wo es liegt.
Ach was solls. trotzdem Danke.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück