div problem (zentrieren) - Seite 2

Seite 2 von 3 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/div_problem_zentrieren_125317/page_2 - zur Vollversion wechseln!

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>

floats sind dafuer da dass es runter rutscht wenns sich nicht mehr ausgeht

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

Weil du den Sinn von HTML und Semantik verstehst, desshalb.

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 ]     ]

Zitat von Rektal

Weil du den Sinn von HTML und Semantik verstehst, desshalb.

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

Wieso, wie würdest du des machen, wenn du zB zentriert a nav Element haben willst und link und rechts jeweils ganz außen noch irgenda... Büd

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

Zitat von watchout

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

Zitat von Spikx

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

Code:

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

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

Zitat von watchout

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.

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

Zitat von Spikx

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

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026