div problem (zentrieren)

So, i post jetzt noch meine Erkenntnisse

1) Also, die pure Variante |variabel|fix|variabel| kann ma gleich mal vergessen. Es is ja auch logisch, dass des net funktioniert, wie da funka scho erwähnt hat. Außer, man verwendet im CSS JavaScript, um die aktuelle Fensterbreite zu bekommen. Aber wer weiß ob man über haupt JS verwenden will

2) Es ging darum, dass ich in den äußeren divs ein background-image wiederholen lassen wollte. Dafür reicht aber auch ein div, wenn man zb nur imgs hat, die man mit text-align:center zentrieren kann. Will man aber außen jeweils noch ein anderes Bild unterbringen reicht das natürlich nicht mehr.

3) Mit 5 divs erreicht man das ergebnis auch. 3 divs mit zB 25%,50%,25% und im 50% div dann noch 2 weitere divs, die zentriert werden (2, da IE fix benötigt wird).

Code: PHP

<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div>
<div style="float:left; width:50%; height:50px; background-color:#FF0000; text-align:center">
	<div style="text-align:center">
		<div style="text-align:left; width:400px; height:50px; margin-left:auto; margin-right:auto; background-color:#0000FF"></div>
	</div>
</div>
<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div>

Eigentlich is die Lösung ja sogar relativ elegant

Aber hier kommen wir gleich zu Punkt
4) IE is ******e... die Leut die Lösung 3) ausprobieren, werden bemerken, dass sie eigentlich doch nicht funktioniert im IE. Des letzte div rutscht runter. Aber jetzt kommts, verändert ma die Browsergröße dann passts abwechselnd und dann mal wieder nicht. zB passts in 1024 aber in 1280 nicht mehr. Aaaber, wenn man jetzt im body a margin-right:2px macht, dann passts (bei 1px scho wieda nimma, oda bei 3px).

So, i hoff i hob nix vergessen

Ja, es geht ja darum, dass es sich normalerweise ausgehen sollte (25%+25%+50% = 100%) und im IE tut es das manchmal nicht, aufgrund eines Rundungsfehlers, hab i ma sagen lassen.

Btw., ich bin ja kein Verfechter von Tabellen, aber ich würde jetzt endlich gern mal wissen, aus welchen Grund ich mich solange mit den divs spiele, damit es funktioniert, obwohl es mit tables prinzipiell ja viel einfacher geht

warum sollte man jemanden etwas erklaeren wenn es simpler ist ihn einfach die fehler machen zu lassen

duerften in diesem fall wirklich rundungsfehler sein
normalerweise sind hier die typischen fehler das man border + margin + padding vergisst mitzurechnen

warum machst du nicht einfach eine box und in dieser box die andere box zentriert
was du da machst ist eignetlich umstaendlichstes table design mit divs nachbauen

Code:

[    [ box ]     ]

so ca

die loesung muss dem problem natuerlich angemessen sein
aber k.a. was das problem ist
dieses div monster ist definitiv nicht notwendig

Zitat von Spikx

So, i post jetzt noch meine Erkenntnisse

1) Also, die pure Variante |variabel|fix|variabel| kann ma gleich mal vergessen. Es is ja auch logisch, dass des net funktioniert, wie da funka scho erwähnt hat. Außer, man verwendet im CSS JavaScript, um die aktuelle Fensterbreite zu bekommen. Aber wer weiß ob man über haupt JS verwenden will

2) Es ging darum, dass ich in den äußeren divs ein background-image wiederholen lassen wollte. Dafür reicht aber auch ein div, wenn man zb nur imgs hat, die man mit text-align:center zentrieren kann. Will man aber außen jeweils noch ein anderes Bild unterbringen reicht das natürlich nicht mehr.

3) Mit 5 divs erreicht man das ergebnis auch. 3 divs mit zB 25%,50%,25% und im 50% div dann noch 2 weitere divs, die zentriert werden (2, da IE fix benötigt wird).

Code: PHP

<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div>
<div style="float:left; width:50%; height:50px; background-color:#FF0000; text-align:center;">
	<div style="text-align:center">
		<div style="text-align:left; width:400px; height:50px; margin-left:auto; margin-right:auto; background-color:#0000FF;"></div>
	</div>
</div>
<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div>

Eigentlich is die Lösung ja sogar relativ elegant

Aber hier kommen wir gleich zu Punkt
4) IE is ******e... die Leut die Lösung 3) ausprobieren, werden bemerken, dass sie eigentlich doch nicht funktioniert im IE. Des letzte div rutscht runter. Aber jetzt kommts, verändert ma die Browsergröße dann passts abwechselnd und dann mal wieder nicht. zB passts in 1024 aber in 1280 nicht mehr. Aaaber, wenn man jetzt im body a margin-right:2px macht, dann passts (bei 1px scho wieda nimma, oda bei 3px).

So, i hoff i hob nix vergessen

hmm, ist dir eigentlich klar dass man dem body-tag auch hintergrund-bilder zuweisen kannß

edit: die lösung deiner probleme heisst absolute positionierung
mit der richtigen codestruktur zerreisst du auch nicht die struktur für non-css-browser...

Zitat von Spikx

ja natürlich... aber was hat das jetzt mit dem hier zu tun?

ohne abolutes positioning - mit background-positioning:

Code:

<body id="overall-background">
  <div id="linkesbild">
    <div id="rechtesbild">
      [content_zentrierungs_divs]
    </div>
  </div>
</body>

http://de.selfhtml.org/css/eigensch...ground_position

ps: ich hab erst nachher bemerkt dass ich dich flasch verstanden hab'

edit: <mod> mach bei deinem post oben die lange css-zeile bissi kürzer - bzw. füg nach den ; leerzeichen ein, damit der brower umbrechen kann

Zitat von Spikx

Ah, des klingt guat (de div Lösung) Da sollte es ja dann auch keine Probleme mehr mitn IE geben.

ka, von der struktur her tät glaubich absolutes positionieren besser sein, leider hat das wieder andere bugs...

ps: <mod> danke

Zitat von Spikx

naja, aber wie soll ma mit absoluter Positionierung irgendein Element immer am rechten Rand ausrichten lassen?

right:0px;