✔ Grafik unter mozila verschoben

Status
Nicht offen für weitere Antworten.
R

R-M-D

Mitglied
nabend alle zusammen,

ich hab da ein kleines prob, und zwar...
ich versuche gerade ein style in css zu coden.. hat auch alles wunderbar geklappt
nur ist unter ff plötzlich der header ca 3pxl nach oben gerückt
unter ie alles super

ich hab hier mal ein screen geschossen
http://img15.myimg.de/prob65766.jpg

und hier der code :

Code: 
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment: fixed;
	background-image: url(Bilder/pinwand_02.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background-image: url(Bilder/pinwand_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:3;
	background-image: url(Bilder/pinwand_04.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:4;
	background-image: url(Bilder/Bilder/pinwand_07_02.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#apDiv5 {display:block;
	position:absolute;
	left:2%;
	top:42px;
	width:78px;
	height:27px;
	z-index:5;
	background-image: url(Bilder/off/pinwand_11.gif);
	background-repeat: no-repeat;
	page-break-after: auto;
	background-attachment: scroll;
	cursor: crosshair;
	
}
    #apDiv5:hover { background-image:url(Bilder/on/pinwand2_11.gif); }
#apDiv6 {display:block;
	position:absolute;
	right:2%;
	top:42px;
	width:78px;
	height:24px;
	z-index:6;
	background-image: url(Bilder/off/pinwand_14.gif);
	background-repeat: no-repeat;
	cursor: crosshair;
}
   #apDiv6:hover { background-image:url(Bilder/on/pinwand2_14.gif); }
#apDiv7 {
	position:relative;
	top:20px;
	width:627px;
	height:95px;
	z-index:7;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
</body>
</html>

würde mich über eure hilfe freuen :)

LG
 
Bastel dein div7 doch auch mit position:absolute dann wird dir kaum ein Browser was anderes zeigen:

Code: 
#apDiv7 {
	position:absolute;
	top:20px; #anpassen
	left:50%;
	width:627px;
	height:95px;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
	margin-left: -313.5px;
}

Wenn das der betroffene Div überhaupt ist. Bei den Dateinamen kann man nur z-index angucken und vermuten was wozu gehört.
 
hmm unter absolute wird der div nicht zentriert gelegt
daher musste ich aufs relativ umändern

hab dein code ausprobiert (thx)
hat aber auch cnihts gebracht.. der ganze banner ist nu verschwunden
bibbes vllt noch eine andere möglichkeit ?


LG
 
Hi,

dann hast du wohl übersehen, dass ZodiacXP in seinem Vorschlag die vorhandene Schichtpositionierung z-index:7 unter den Tisch gekehrt hatte, und das Element somit in der Z-Ebene ganz nach unten wandert - ansonsten wird das Element mit dieser Art der absoluten Positionierung im Viewport horizontal zentriert.

Und achte bitte in deinen zukünftigen Beiträgen etwas mehr auf die Netiquette, insbesondere auf den Punkt 15 bzgl. der Groß- und Kleinschreibung.

mfg Maik
 
Ok tut mir leid wusste nicht dass ich hier auch meine Rechtschreibung achtgeben muss,
hat alles wunderbar geklapt danke dir.

Es lag an der fehlenden z-index

LG
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück