Blockelement zwischen Div und Seitenrand horizontal zentrieren?

[crizon]

Vorerst: Ich bin ein blutiger Anfänger.

Dementsprechend hab ich genau das gemacht, was Anfänger wohl zuerst machen werden: Ein billiges Layout mit Kopf, Menü und Inhalt.

Nun hat auch erstmal alles gut geklappt, nur hab ich eine Sache einfach nicht hinbekommen:

Oben soll ja der Kopf sein.. spielt eigentlich keine Rolle.
Nun will ich links ein Menü haben und rechts daneben den Inhalt, der zwischen Menü und rechten Seitenrand zentriert ist. Die vertikale Ausrichtung ist erstmal egal.

Ich hab natürlich auch gleich in diversen Tutorials, die ich überflogen habe, eingebläut bekommen, dass ich auch gleich mit daran denken soll, dass unterschiedliche Leute unterschiedliche Auflösungen und Monitore benutzen. Gelesen, getan.. also alles schön versucht mit Float und relativen Größen hinzukriegen, aber ich hab partout keine praktikable Lösung für das Zentrieren zwischen einem Blockelement und Seitenrand (oder zwischen 2 Blockelementen) gefunden.

Ich habe auch versucht praktisch alles in Prozentangaben zu halten, aber das ist ja eine Fizelei ohne gleichen und am Ende rutscht der Inhalt doch oder das Menü.. bitte helft mir auf die Sprünge.

mfg

 

[prm]

Wenn ich dich richtig verstanden habe, dann sollte es so funktionieren:

<div style="float: left; background: magenta; width: 25%;">
Navi
</div><!--Ende #navi-->

<div style="width: 74%; margin-left: 25%; background: yellow;">

<div style="width: 60%; margin: 0 auto; background: red;">
Container
</div><!--Ende #container-->
</div><!--Ende wrapper (gelb)-->
<div style="clear: both;"></div><!--Clear für gefloatete Navi-->

Den Div's gibst du sinnvollerweise Bezeichnungen und schreibst die Styleangaben in eine CSS-Datei oder in den Headbereich.

74 % und keine 75, falls evtl. noch Rahmen dazu kommen.
Beachte: Wenn du noch padding und margin verwendest möglichst auch in Prozent und dann die Breitenaufteilung unter deren Berücksichtigung neu berechnen.

 

[Efchen]

Ich hab natürlich auch gleich in diversen Tutorials, die ich überflogen habe, eingebläut bekommen, dass ich auch gleich mit daran denken soll, dass unterschiedliche Leute unterschiedliche Auflösungen und Monitore benutzen.

Gemeint ist zwar das richtige, aber tatsächlich spielt es natürlich keine Rolle, wie groß die Auflösung ist oder ob es ein Citroen- oder Porsche-Monitor ist :-)
Wichtig zu wissen ist, dass - bedingt auch durch unterschiedlich große Monitore - der verfügbare Platz im Browserfenster (das nichtmal maximiert sein muss!), verringert noch durch Menübalken und Sidebars, das entscheidende ist.

Selbst bei einer Auflösung von 1600x1200 kann ein Nutzer nur ein Browserfenster von 772x981px Größe haben (wobei das Fenster dann sogar höher als breit ist) und darin hat er dann, bedingt durch Leisten, womöglich nur 700x850px Platz.

Der verfügbare Platz ist der "Viewport". Dass die Auflösung irrelevant ist, kann man auch daran erkennen, dass CSS keine Einheit kennt, die sich auf die Auflösung bezieht.

Gruß,
-Efchen

 

[crizon]

ALso erstmal vielen Dank für eure Antworten, aber ich hab zwischenzeitlich im IRC eine schöne Lösung bekommen.

Ganz simpel:
Einen Container Div machen, der links ne margin hat, die genauso breit ist wie das menü. Der nimmt dann die Fläche zwischen Seitenrand und Menü ein.
In diesen Container dann einfach den Inhalt per margin:0 auto; zentrieren und fertig :)
Passt sich auch wunderbar an unterschiedliche Auflösungen und Fenstergrößen an.

Glaube dass prm das gleiche prinzip verwendet, nur hat sich bei mir ein width:auto für den container ganz gut bewährt.

 

[Efchen]

In diesen Container dann einfach den Inhalt per margin:0 auto; zentrieren und fertig

Gilt natürlich nur für BLock-Elemente.

Passt sich auch wunderbar an unterschiedliche Auflösungen und Fenstergrößen an.

Das mit der Auflösung ist Einbildung. Die hat immer noch nichts damit zu tun.

Grüße,
-Efchen