Zur Navigation

Div Elemente Zentrieren

Problem

1 Smile

Guten Tag.
Ich bin neu hier und stelle mich erstmal vor. Ich heiße Kevin, bin 17 Jahr jung (27.11 -> 18)
und arbeite mit HTML seit 2 Tagen.

Komme allerdings nicht weiter.
Div Container / Div Elementen kann man ja in der Regel zentrieren mit

IE
body {
      text-align: center;
}

Firefox
body { 
     margin: 0;
     padding: 0;
}


Beimir funktioniert beides nicht.

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=utf-8" />
        <link rel="Stylesheet" type="text/css" href="textcss"/>
</head>

<body>
      <div id="logo"> 
          </div>
</body>

</html

IE CSS
body {
    text-align: center;
}

#boxhead { 
    background-image: url(image/logo.jpg)
    width: 300px;
    height: 300px;
}

Firefox CSS
body {
    margin: 0;
    padding: 0;
}

#boxhead { 
    background-image: url(image/logo.jpg)
    width: 300px;
    height: 300px;
}

Bilder werden angezeigt! Aber Rechtsbündig

Ich google schon seit Stunden, hab zwar unterschiede gefunden, aber die Lösungen von denen haben bei mir auch nicht Funktioniert.

Need Help :D

Bedanke mich schonmal!

MfG
Smile aka. Kevin

25.11.2011 11:20

2 Jörg Kruse

Das div wird zentriert, wenn margin den Wert auto erhält

Außerdem fehlt da noch ein ";" am Ende der ersten Zeile:

#boxhead { 
    background-image: url(image/logo.jpg);
    width: 300px;
    height: 300px;
    margin: auto;
}

Wenn du statt XHTML Transitional XHTML Strict verwendest, beachtet übrigens auch der IE die margin:auto Angabe

25.11.2011 11:45

3 Smile

Wow, hätte mit so einer schnellen Antwort nicht gerechnet.
Das mit ";" war ein kleiner Flüchtigkeitsfehler :D

Werde ich später ausprobieren. Hocke hier im Büro und von meinen Laptop ist der Akku fast alle gewesen. Keine lust nochmal aufzuladen. :)

Mfg
Kevin

PS: Ich werde zu 100% hier mehrere Themen schreiben. xD

25.11.2011 12:23

4 Smile

So, ausprobiert und es passiert rein nichts. Code ist jetzt genauso wie du beschrieben hast. c.c

25.11.2011 20:35

5 Jörg Kruse

Wie schaut denn der gesamte Code bei dir aus (HTML und CSS)?

Der HTML-Codeabschnitt in Beitrag 1 beinhaltet ja kein Element #boxhead, nur ein Element #logo

25.11.2011 22:24

6 Smile

Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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" />
		<link rel="Stylesheet" type="text/css" href="test.css"/>
<title> Testdaei </title>

</head>

<body>

<div id="body_bg">
		<div id="boxhead">
			</div>
</div>
</body>
</html>

CSS
body {
	background-image: url(images/bg.jpg);
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	position: fixed;
	text-align: center;
	margin: 0;
	padding: 0;

}


#boxhead {
	background-image: url(images/head_box.png);
	width: 1024px;
	height: 415px;
	margin: auto;
}

Hab Firefox 3.6, glaube aber nicht, dass das ein Unterschied macht.

PS: In mein CSS Tool "TopStyle Lite" werden die Pics zentriert angezeigt.

26.11.2011 16:54 | geändert: 26.11.2011 16:56

7 Jörg Kruse

Dann würde ich mal den Browser-Cache leeren und anschließend nochmal testen.

26.11.2011 17:45

8 Smile

Was würde mir das bringen? Wenn das so ist, müsste jede Seite dann bei mir Linksbündig sein.

Anderen Vorschlag? q.q

26.11.2011 18:49

9 Jörg Kruse

Was würde mir das bringen?

Dass dein Browser keine veraltete CSS-Datei aus seinem Cache lädt. Du kannst das Neuladen auch mit einem Strg + F5 erzwingen.

Bei mir wird div#boxhead von Firefox und Opera zentriert, so wie das ja auch bei deinem CSS-Tool der Fall ist.

26.11.2011 19:18

10 Smile

Jörg, hast du vllt. Facebook? :/ Das klappt reingarnicht.

26.11.2011 23:08