Willkommen auf dem Portal für Mediengestalter

Olsen Hegh · Threadersteller

Bonjour

Ich versuche gerade einen div-Container mit einem jpeg als Inhalt zu positionieren.

<div id="3bilder"><img src="eigenetemps/3bilder.jpg" alt="3bilder" longdesc="eigenetemps/3bilder.jpg" /></div>

Der CSS Stil ist

#3bilder {
height: 117px;
width: 554px;
position: relative;
margin: 0px auto;
top: 50px;
}

Also normalerweise müsste der Container dadurch zentriert unter dem div darüber sitzen. Tut er auch in der Dreamweaver- Vorschau. Aber nicht im Browser, da sitzt er irgendwo weiter oben und ganz auf der linken Seite.

Vielen Dank schonmal im Voraus!

Olsen Hegh · Threadersteller

So ich habe jetzt mal im Div direkt die Ausrichtung (align) mit center deklariert. Jetzt sitzt der Container zwar mittig, aber die 50 Pixel Abstand zum darüber liegenden Div sind weg und es klebt direkt dadrunter. Inakzeptabel...

_eris_ · **Verfasst** Di 15.02.2011 13:07 **Titel**

Hmm ganz spontan geraten würde ich sagen in deiner HTML-Datei könnte der Doctype fehlen...
ohne den stellt der IE zumindest das "margin:auto" nicht so gerne dar *zwinker*

Probiers mal, wenn du ganz oben noch vor das <html> folgendes einfügst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hier die entsprechende SelfHTML-Referenz dazu: DOCTYPE

Edit: ahh zu langsam - meine Antwort bezog sich natürlich auf deinen ersten Post. Lächel

Olsen Hegh · Threadersteller

Danke für die schnelle Antwort , aber daran liegts wohl wirklich nicht. Ich geb euch mal hier den kompletten Quelltext

<!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-1" />
<title>Ferienwohnung</title>

<style type="text/css">

</style>
</head>

<body>
<div id="balken">
<div id="buttonleiste">
<img src="eigenetemps/homebutton.jpg" width="105"
height="35" alt="home" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/homebutton.jpg" /><img src=
"eigenetemps/impressumbutton.jpg" width="105" height="35" alt="impressum"
longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/impressumbutton.jpg" /><img src="eigenetemps/kontaktbutton.jpg" width="105" height="35" alt="kontakt" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/kontaktbutton.jpg" /><img src="eigenetemps/sitemap.jpg" width="105" height="35" alt="sitemap" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/sitemap.jpg" /><img src="eigenetemps/privacy.jpg" width="105" height="35" alt="privacy" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/privacy.jpg" /><img src="eigenetemps/preisliste.jpg" width="105" height="35" alt="preis" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/preisliste.jpg" /></div></div>
<div id="leiste1"><img src="eigenetemps/leiste1.jpg" width="554" height="47" alt="leiste1" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/leiste1.jpg" /></div>
<div id="haus"><img src="eigenetemps/haus.jpg" width="554" height="212" alt="haus" longdesc="file:///C|/Dokumente und Einstellungen/hagel/Desktop/Alles/eigenetemps/haus.jpg" /></div>
<div id="leiste2"><img src="eigenetemps/leiste2.jpg" alt="leiste2" longdesc="eigenetemps/leiste2.jpg" /></div>
<div align="center" id="3bilder"><img src="eigenetemps/3bilder.jpg" alt="3bilder" longdesc="eigenetemps/3bilder.jpg" /></div>
</body>
</html>

Sorry, dass das hier so unübersichtlich ist.

Olsen Hegh · Threadersteller

Mit Auffüllen klappts irgendwie auch nicht.
Man sieht die korrekte Form in der Dreamweaver- Vorschau, aber im Browser tut sich nichts.

_eris_ · **Verfasst** Di 15.02.2011 13:47 **Titel**

Hm also ich hab mir das mal kopiert und getestet.

Also zum ersten: keine IDs und Klassen mit einer Zahl beginnen lassen - habsch aber auch vergessen *zwinker*

Sonderzeichen in Selektoren

Nehme ich jetzt das align raus und bennene dein Div um sitzt dein Container mittig im Browser (zumindest bei mir) - sollte das Bild kleiner sein als das div würde es hier allerdings linksbündig mit dem Container sitzen. (Ich weiß ja nicht wie groß das Bild nachher ist, das da rein kommt)
dafür müsste in den CSS-Style tatsächlich noch ein "text-align: center;" rein

#bilder3 {
height: 117px;
width: 554px;
position: relative;
margin: 0px auto;
text-align: center;
}

Nur noch eine frage am Rande, du kuckst dir das nicht mit nem IE6 an oder?
Das wäre dann nämlich nochmal ne GAAAANZ andere Geschichte *zwinker*

Olsen Hegh · Threadersteller

Jawohl

Ich hab das Div umbenannt und nun gehts.
Danke für den Hinweis.

Ich habs mir im Firefox 3.6.13 angeschaut.

Willkommen auf dem Portal für Mediengestalter

Thema: Div sitzt im Browser nicht zentriert vom 15.02.2011

Div sitzt im Browser nicht zentriert

erste Lösung

Antwort

Weiteres

Danke