Wie bekomme ich DIV in die Mitte ?

PHP, Ajax, CSS, HTML, Javascript
Eben für die wirklich Harten, die alles selber machen.
Antworten
Feuerball
Beiträge: 636
Registriert: Mi 15.Sep, 2004 22:11

Wie bekomme ich DIV in die Mitte ?

Beitrag von Feuerball »

Hallo und ein Frohes Neues Jahr.

Ich Probiere gerade das DIv immer mittig zu setzten egal bei welcher Auflösung. Das DIV ist immer Links und ich bekomme es wenn überhaubt nur im Firefox mittig :/

kann mir da jemand weiter helfen ???

HTML

Code: Alles auswählen

<div class="box"> 
<b class="top"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b> 
<h1>oben</h1>
<p>ein Text</p> 
<b class="bottom"> <b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b> </b>
</div>
CSS

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA;} 
.box h1, .box p {margin: 0 10px;} 
.box h1 {font-size:150%; color:#ffffff; } 
.box .top, .box .bottom{display:block;background: #ffffff;} 
.box .top b, .box .bottom b { display:block;height: 1px; overflow: hidden; background: #9BD1FA; } 
.box .r1{margin: 0 5px;} 
.box .r2{margin: 0 3px;} 
.box .r3{margin: 0 2px;} 
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Füge mal for die Style-Anweisungen für die erste .box diese Zeile ein:

Code: Alles auswählen

div { margin: auto; }
Dann würden alle div-Elemente horizontal zentriert werden.
Alternativ kannst Du das auch in die Zeile

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA; }
einbauen, also dann so:

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA; margin: auto;}
Soviel dann zum Thema Firefox und ähnlichen Browsern ;)


Für den IE muss man hier schon mehr machen!
Hierfür würde die Zeile so ausschauen müssen:

Code: Alles auswählen

.box { background: #9BD1FA; position: absolute; width: 900px; left: 50%; margin-left: -450px; } 
Wäre auch korrekter, denn nun zeigt jeder Browser den Block zentriert an.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Feuerball
Beiträge: 636
Registriert: Mi 15.Sep, 2004 22:11

Beitrag von Feuerball »

Danke
Antworten