[erledigt] css: wie zwei divs zentrieren?

infinite

God

mardi 10 février 2009, 22:25

1

nabend,

ansich ne einfache sache: ich hab zwei divs, die nebeneinander sind in ein container div gepackt und moechte das ganze jetzt horizontal zentrieren - soweit, sogut - im netz gibt es ja zahlreiche tools dafuer inkl IE hacks, aber komischerweise haben die alle keinen effekt

die divs sind nur mehr oder weniger zentriert, aber ein stueck zu weit links.

hier mal mein css:

Code source

#total {
  background: url(../img/bg.jpg) repeat-y;
  margin: 0 auto;
  width:980px;
}

#menu {
  background: url(../img/logo_menu.jpg) 50% 0 no-repeat;
  float: left;
  font-size: 1.0em;
  margin: 10px 0 0 0;
  padding: 160px 10px 5px 10px;
  text-align: left;
  width: 200px;
  color: #5b2300;
}

#content {
  background-color: #5b2300;
  color: #caa078;
  float: left;
  font-size: 0.9em;
  font-style: normal;
  margin-left: 0px;
  padding: 10px;
  width: 650px;
}

total ist der container div, menu der linke und content der rechte. kann mir jemand verraten wie ich das ganze jetz zentriert bekomme?

danke,
messi

Ce message a été modifié 2 fois. Dernière modification effectuée par "infinite" (11 février 2009, 16:00)

Multiswitch Script Generator NG | Aquaero2Multiswitch | Ae Relais | Verkaufe AT Plexi!

TrOuble

God

mercredi 11 février 2009, 00:25

2

Haste mal eine live-demo inkl. HTML Code?

cuto8

Full Member

RE: css: wie zwei divs zentrieren?

mercredi 11 février 2009, 09:37

3

Citation de "infinite"

total ist der container div, menu der linke und content der rechte. kann mir jemand verraten wie ich das ganze jetz zentriert bekomme?

Wenn die html-Datei so aussieht:

	Code source
1 2 3 4	<div id='total'> <div id='menu'>...</div> <div id='content'>...</div> </div>

...sollte das so in deiner CSS-Datei aussehen:

	Code source
1 2 3 4 5	div#total{ ... margin:0 auto 0 auto; ... }

STOP VDS

infinite

God

mercredi 11 février 2009, 10:00

4

jo:

http://boombule.com/test/example.html
http://boombule.com/test/style/style.css

danke,
infinite

edit: grad getestet cuto8 - leider keine veraenderung

Ce message a été modifié 1 fois. Dernière modification effectuée par "infinite" (11 février 2009, 10:05)

Multiswitch Script Generator NG | Aquaero2Multiswitch | Ae Relais | Verkaufe AT Plexi!

Ani

God

mercredi 11 février 2009, 13:13

5

Code source

#total {
  margin: 0 auto;
  width:980px;
  border:1px solid red;
}

#menu {

  float: left;
  font-size: 1.0em;
  text-align: left;
  width: 200px;
}

#content {
  background-color: #5b2300;
  color: #caa078;
  font-size: 0.9em;
  font-style: normal;
  margin-left:200px;
}

so, bitte.
musst nur die Hintergrund Bilder wieder einbinden
das ganze läuft aber nicht im IE 6...
wennde das auch brauchst musste nochmal was sagen

crushcoder

God

mercredi 11 février 2009, 14:21

6

Citation de "infinite"

die divs sind nur mehr oder weniger zentriert, aber ein stueck zu weit links.

width: 200px
+
width: 650px

macht zusammen 850px, nicht 980px.

#total ist mittig zentriert, aber die divs darin liegen links an #total an.
Mach #total kleiner, oder die Summe der beiden divs gleich der Breite von #total, und die divs sind mittig.

Zitat von »Microsoft-Sprecher Thomas Baumgärtner«

Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.

kaZuo

Moderator

mercredi 11 février 2009, 14:38

7

Bei den momentanen Innenabständen, brauchst du eine Breite von 890px für #total. Boxmodell und so

Y0Gi

God

mercredi 11 février 2009, 15:12

8

Wenn `margin: 0 auto;` zur horizontalen Zentrierung funktionieren soll, muss das Elternelement (in diesem Fall wohl `body`) `text-align: center;` haben.

Wenn ich deine Paddings addiere, komme ich auch auf 890px

Anbei noch ein paar Gratis-CSS-Tipps, weil mein Code-Styleguide-Artikel immer noch auf Halde liegt:

* CSS-Eigentschaften immer alphabetisch sortieren. So weiß man bspw. am Anfang einer längeren Definition, dass kein Rahmen (border) mehr kommt, wenn er nicht in den ersten Zeilen definiert wurde. Man weiß so auch einfach immer, was wo hin gehört und muss nicht erst überlegen, wo es besser hinpasst, wenn man etwa anfängt, Attribute von innen nach außen oder hinten nach vorne in Bezug auf die Darstellung zu sortieren.

* Bei zusammengesetzten Attributen, dessen Werte über die Position nicht im Uhrzeigersinn Seiten (top, right, bottom, left) bezeichnen (background, border, font-family etc.), die Attribute nach dem Namen der enthaltenen Attribute sortieren (z.B. border-color, border-style, border-width).

Und ja, ich vermute, dass du zumindest die erste Regel "normalerweise" auch befolgst, aber ich kenn dich doch

Ce message a été modifié 1 fois. Dernière modification effectuée par "Y0Gi" (11 février 2009, 15:19)

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

infinite

God

mercredi 11 février 2009, 15:31

9

oh man, in der tat, mit 890px klappts eins a.. danke!

und danke auch fuer die style tips jochen, ich bin einfach faul, aber das muss ich dir glaub ich ned sagen

und gleich noch ne frage, hab ein weiteres problem mit IE6:

http://boombule.com/test/example2.html
http://boombule.com/test/example3.html

im ff und ie7 ist alles ok, im ie6 gibt es jedoch folgendes problem: wenn der erste text nicht laenger als die hoehe des bildes ist, ist der abstand zwischen dem text/bild und dem neuen hellbraunen div zu klein. (example2). ist der text laenger als das bild, dann stimmt der abstand (example3)
wie kriege ich es hin, dass der abstand zwischen erstem text/bild <-> hellbrauner div & hellbrauner div <-> zweiter text/bild exakt gleich ist?

infinite

Ce message a été modifié 1 fois. Dernière modification effectuée par "infinite" (11 février 2009, 15:40)

Multiswitch Script Generator NG | Aquaero2Multiswitch | Ae Relais | Verkaufe AT Plexi!

crushcoder

God

mercredi 11 février 2009, 15:55

10

Pah, paddings, ich wollte ja nicht gleich die Lösung geben, aber auf den richtigen Lösungsweg hinweisen

*rausred*

Ins Blaue geschossen:
Du hast am p neben dem Bild ein margin-bottom angegeben. Solang das p kürzer als das Bild ist, kommt das garnicht zum tragen.

Ich würde dem div#kasten das als margin-top geben.

Ce message a été modifié 1 fois. Dernière modification effectuée par "crushcoder" (11 février 2009, 15:59)

Zitat von »Microsoft-Sprecher Thomas Baumgärtner«

Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.

infinite

God

mercredi 11 février 2009, 16:00

11

perfekt, das tut!

Multiswitch Script Generator NG | Aquaero2Multiswitch | Ae Relais | Verkaufe AT Plexi!

TrOuble

God

mercredi 11 février 2009, 19:18

12

Citation de "Y0Gi"

Wenn `margin: 0 auto;` zur horizontalen Zentrierung funktionieren soll, muss das Elternelement (in diesem Fall wohl `body`) `text-align: center;` haben.

Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.

Gruß TrOuble

Ce message a été modifié 3 fois. Dernière modification effectuée par "TrOuble" (11 février 2009, 19:20)

scorpionking

Senior Member

mercredi 11 février 2009, 19:22

13

Citation de "TrOuble"

Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.

Wenn's mit dem IE auch funktionieren soll, ist das sehr wohl nötig. Der IE ignoriert das margin:auto zur Zentrierung nämlich fröhlich...

Ce message a été modifié 1 fois. Dernière modification effectuée par "scorpionking" (11 février 2009, 19:23)

Zitat von »Die Insel (Film)«

"Was ist Gott?"
"Wenn du dir etwas unbedingt wünschst, und du schließt die Augen und bittest darum, ist Gott der Kerl, der dich ignoriert!"

TrOuble

God

mercredi 11 février 2009, 19:34

14

Citation de "scorpionking"

Citation de "TrOuble"

Quatsch. Wie kommst du denn da rauf? Einzige Voraussetzung ist, dass das Element welches zentriert werden soll eine Breitenangabe besitzt.

Wenn's mit dem IE auch funktionieren soll, ist das sehr wohl nötig. Der IE ignoriert das margin:auto zur Zentrierung nämlich fröhlich...

Hier der Beweis:
http://simplyray.de/tmp/

Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet

Gruß TrOuble

scorpionking

Senior Member

mercredi 11 février 2009, 19:53

15

Citation de "TrOuble"

Hier der Beweis:
http://simplyray.de/tmp/

Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet

Gruß TrOuble

Hm, bei selfhtml steht's halt anders drin (http://de.selfhtml.org/css/layouts/mehrspaltige.htm, kurz vor "Dreispaltige Layouts"), aber wenn's auch so funktioniert, passt's ja...

Zitat von »Die Insel (Film)«

"Was ist Gott?"
"Wenn du dir etwas unbedingt wünschst, und du schließt die Augen und bittest darum, ist Gott der Kerl, der dich ignoriert!"

TrOuble

God

mercredi 11 février 2009, 19:55

16

Citation de "scorpionking"

Citation de "TrOuble"

Hier der Beweis:
http://simplyray.de/tmp/

Funktioniert einwandfrei im IE 6, IE 7, IE 8 beta 2 ... und komm mir jetzt NICHT mit dem IE 5.5!
Also wer auf den Browser noch optimiert hat den Schuss nicht mehr gehört. Der wird bei w3schools.com nicht mal mehr gelistet

Gruß TrOuble

Hm, bei selfhtml steht's halt anders drin (http://de.selfhtml.org/css/layouts/mehrspaltige.htm, kurz vor "Dreispaltige Layouts"), aber wenn's auch so funktioniert, passt's ja...

Ja. Stimmt ja auch so _eigentlich_

Also damit der IE 5.5 das korrekt anzeigt wird text-align:center auf dem parent-elemnt benötigt. Aber mal ehrlich: die Zeile kann man sich getrost sparen

Y0Gi

God

jeudi 12 février 2009, 02:09

17

Na sowas, da bin ich wohl etwas oldschool. Und dabei habe ich mich vorhin noch über eine neue Website aufgeregt, die per JavaScript prüft, ob es sich beim Browser um den IE oder Netscape in der Version 4(!!!) handelt!

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)