1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Frage zu CSS // Position, Margin?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von @pollo, 27.07.08.

  1. @pollo

    @pollo Raisin Rouge

    Dabei seit:
    03.08.06
    Beiträge:
    1.171
    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
     
  2. stk

    stk Grünapfel

    Dabei seit:
    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
     
  3. kauan

    kauan Stina Lohmann

    Dabei seit:
    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:

    [​IMG]
     
  4. @pollo

    @pollo Raisin Rouge

    Dabei seit:
    03.08.06
    Beiträge:
    1.171
    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: [​IMG]
     
  5. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
  6. arnekolja

    arnekolja Bismarckapfel

    Dabei seit:
    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.
     
  7. @pollo

    @pollo Raisin Rouge

    Dabei seit:
    03.08.06
    Beiträge:
    1.171
    Klappt super jetzt muss ich nur noch schauen warum der Text aus den Boxen fließt wenn ich mal mehr als ein Wort eingebe.
     
  8. michelb

    michelb Jonagold

    Dabei seit:
    24.07.08
    Beiträge:
    19
    #content braucht auch noch eine width;
     
  9. @pollo

    @pollo Raisin Rouge

    Dabei seit:
    03.08.06
    Beiträge:
    1.171
    merci =)
     
  10. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    mein reden ;) siehe den post #5
    aber ich war auf dem sprung zue einer feier, deine ausführung ist genau die richtige ;)
     

Diese Seite empfehlen