Frage zu CSS // Position, Margin?

@pollo

Raisin Rouge
Registriert
03.08.06
Beiträge
1.181
Einen wundervollen Sonntag Nachmittag. Nachdem ich in meinem alten Thread so "sanft" auf CSS hingewiesen wurde - nun die nächste Frage.

Wenn ich meine Seite zentrieren möchte kann ich das ja nicht mehr über dem HTML Tag <center></center> machen, sondern muss meine einzelnen Elemente relativ in % zum Browser setzen (richtig?). Das habe ich bislang bei meiner Navigation auch so gemacht (Code siehe unten).

Code:
#nav {
margin-left: 20%;
border: solid;
border-width: 1;
width: 250px; 
height: 100px;
padding: 5px 5px 5px 5px;
text-align: center;
}
(bis jetzt überhaupt richtig?)

Daneben (rechts) möchte ich eine Content Box mit beliebigen Inhalt setzten, welche einen festen Abstand zur Navigation (links) hat. Meine Idee - ich benutze die Navigation damit die Seite dynamisch in der Mitte bleibt und richte an ihr die anderen Elemente aus. Macht man das überhaupt so? Wenn ja wie setzte ich meinen Content rechts daneben und wenn nein - wie richte ich die Seite anders in die Mitte zentriert ein.

In diesem Zusammenhang ist mir der Unterschied zwischen Margin und Position auch noch nicht recht klar. Meine Tutorials verschweigen mir bislang den Zusammenhang, vielleicht lässt sich hier einiges klären.

lg Jan
 

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
Moin,

Um ein Block-Level Element zu zentrieren nimmst das Konstrukt:
Code:
#divname {
   margin: 0 auto;
   width: 300px;
   }

Über den margin (Rand der Box nach außen) 0 auto erreichst, das die Ränder unten und oben auf 0 stehen, rechts und links automatisch gleichgroß gesetzt werden. Die Größe wird dann in Relation von der Größe der Box - hier 300px, kann aber auch %, em, … sein - und der Größe des Browserfensters (Viewport) bestimmt.

Im Gegensatz zum Außenabstand (margin) bezeichnet padding den Abstand innerhalb der Box.

Gruß Stefan
 

kauan

Stina Lohmann
Registriert
31.12.05
Beiträge
1.043
text-align: center ersetzt das center-Tag.
position (left/top/bottom/right) ist die position eines Elements vom Elternelement aus gesehen (z.B. body), wobei margin der Aussen- und padding der Innenabstand ist.

Hier eine Illustration:

box_modell.png
 

@pollo

Raisin Rouge
Registriert
03.08.06
Beiträge
1.181
Okay meine Nav Box ist jetzt zentriert und wie kann ich bei einer zentrierten Box rechts daneben eine Box hängen, welche mitwandert? Wenn ich die Content Box zentriere liegt sie ja Deckungsgleich.

Beispiel:
beispiel.png
 

arnekolja

Bismarckapfel
Registriert
25.02.08
Beiträge
141
Hallo,

an Deiner Stelle würde ich einen Wrapper um die beiden Konstrukte legen, der zentriert wird, und dann die Navigation links floaten lassen und ihr einen margin nach rechts geben.

Also etwas in der Art:

Code:
<div id="wrapper">
    <div id="navigation">Navigation</div>
    <div id="content">Content</div>
</div>

und dann per CSS:

Code:
#wrapper { width: 900px; margin: 0 auto; }
#navigation { width:300px; float:left; margin-right:20px; }
#content {}

So in der Art müsste es eigentlich gehen.

Edit: Das Attribut "position" (Werte: absolute, relativ, static, fixed) stellt "nur" ein, wie das Element und seine Kinder die top/left/bottom/right-Angaben auswerten. Also bspw. ob es vom Dokumentrand oder vom Rand des Elternelements gerechnet wird etc.
 

@pollo

Raisin Rouge
Registriert
03.08.06
Beiträge
1.181
Klappt super jetzt muss ich nur noch schauen warum der Text aus den Boxen fließt wenn ich mal mehr als ein Wort eingebe.
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
Hallo,

an Deiner Stelle würde ich einen Wrapper um die beiden Konstrukte legen, der zentriert wird, und dann die Navigation links floaten lassen und ihr einen margin nach rechts geben.

Also etwas in der Art:

Code:
<div id="wrapper">
    <div id="navigation">Navigation</div>
    <div id="content">Content</div>
</div>
und dann per CSS:

Code:
#wrapper { width: 900px; margin: 0 auto; }
#navigation { width:300px; float:left; margin-right:20px; }
#content {}
So in der Art müsste es eigentlich gehen.

Edit: Das Attribut "position" (Werte: absolute, relativ, static, fixed) stellt "nur" ein, wie das Element und seine Kinder die top/left/bottom/right-Angaben auswerten. Also bspw. ob es vom Dokumentrand oder vom Rand des Elternelements gerechnet wird etc.

mein reden ;) siehe den post #5
aber ich war auf dem sprung zue einer feier, deine ausführung ist genau die richtige ;)