Autor |
Nachricht |
Olsen Hegh
Threadersteller
Dabei seit: 11.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 15.02.2011 12:45
Titel Div sitzt im Browser nicht zentriert |
|
|
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
Dabei seit: 11.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 15.02.2011 13:04
Titel erste Lösung |
|
|
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...
|
|
|
|
|
Anzeige
|
|
|
_eris_
Dabei seit: 19.09.2007
Ort: -> · <-
Alter: 38
Geschlecht:
|
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
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.
Zuletzt bearbeitet von _eris_ am Di 15.02.2011 13:09, insgesamt 1-mal bearbeitet
|
|
|
|
|
Olsen Hegh
Threadersteller
Dabei seit: 11.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 15.02.2011 13:17
Titel Antwort |
|
|
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">
<!--
body {
background-color: #8e8e8e;
}
#balken {
height: 60px;
width: 640px;
margin: 0px auto;
background-image: url(eigenetemps/balken.jpg);
}
#buttonleiste {
height: 35px;
width: 630px;
left: 5px;
position: relative;
top: 12px;
}
#leiste1 {
width: 554px;
height: 47px;
margin: 0px auto;
position: relative;
top: 17px;
}
#haus {
height: 212px;
width: 554px;
position: relative;
margin: 0px auto;
top: 17px;
}
#leiste2 {
height: 47px;
width: 554px;
position: relative;
margin: 0px auto;
top: 17px;
}
#3bilder {
height: 117px;
width: 554px;
position: relative;
margin: 0px auto;
}
-->
</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
Dabei seit: 11.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 15.02.2011 13:20
Titel Weiteres |
|
|
Mit Auffüllen klappts irgendwie auch nicht.
Man sieht die korrekte Form in der Dreamweaver- Vorschau, aber im Browser tut sich nichts.
|
|
|
|
|
_eris_
Dabei seit: 19.09.2007
Ort: -> · <-
Alter: 38
Geschlecht:
|
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
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
Zuletzt bearbeitet von _eris_ am Di 15.02.2011 13:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
Olsen Hegh
Threadersteller
Dabei seit: 11.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 15.02.2011 14:34
Titel Danke |
|
|
Jawohl
Ich hab das Div umbenannt und nun gehts.
Danke für den Hinweis.
Ich habs mir im Firefox 3.6.13 angeschaut.
|
|
|
|
|
|
|
|
Ähnliche Themen |
DIV hintergund u footer sitzt im ie7 richtig, im ff nicht..
[CSS] Will nicht zentriert...
CSS linksbündige ul zentriert
In IE zentriert, in FF nicht
Objekt zentriert
<div> zentriert ausrichten
|
|