Matti Mäkitalo: Ausrichtung von Elementen

SELF-Forum

Ausrichtung von Elementen

Matti Mäkitalo
– Informationen zu den Bewertungsregeln

Hy Leute,

ich hab da ein kleines Problem mit css.
Ich will drei verschiedene Divs anordnen. Eins am linken Rand, eins in der Mitte und eins am rechten Rand.
Sie sollten auch auf einer Höhe (horizontal)sein.
Ich habe sie nun also ausgerichtet:
position:absolute
linkes div: linker abstand 2cm, oberer abstand 1cm
mitte div: align=center oberer abstand 1cm
rechter div: rechter abstand 2cm, oberer abstand 1cm

nun ist aber das rechte div ganz falsch.
Hier zu sehen: http://www.scglashuetten.de/test
Warum funzt das nicht. Ich bin sicher, ich habe irgendwo einen kleinen dummen Fehler gemacht, aber wo?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ausrichtung von Elementen

    Oliver
    – Informationen zu den Bewertungsregeln

    Hy Leute,

    ich hab da ein kleines Problem mit css.
    Ich will drei verschiedene Divs anordnen. Eins am linken Rand, eins in der Mitte und eins am rechten Rand.
    Sie sollten auch auf einer Höhe (horizontal)sein.
    Ich habe sie nun also ausgerichtet:
    position:absolute
    linkes div: linker abstand 2cm, oberer abstand 1cm
    mitte div: align=center oberer abstand 1cm
    rechter div: rechter abstand 2cm, oberer abstand 1cm

    nun ist aber das rechte div ganz falsch.
    Hier zu sehen: http://www.scglashuetten.de/test
    Warum funzt das nicht. Ich bin sicher, ich habe irgendwo einen kleinen dummen Fehler gemacht, aber wo?

    Also, mich macht ja die Kombination von position und margin etwas stutzig. Mit position:absolute;top:XX;left:XX kann man die divs exakt positionieren. Mit Margin werden nur die Ränder um ein Blockelement festgelegt (in eigentlichen Sinne keine Positionierung).

    Oliver

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Ausrichtung von Elementen

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo Matti!

    ich hab da ein kleines Problem mit css.

    Ich will drei verschiedene Divs anordnen. Eins am linken Rand, eins in der Mitte und eins am rechten Rand.

    Sie sollten auch auf einer Höhe (horizontal)sein.

    Also du Möchtest 3 Kolumnen.

    Hier zu sehen: http://www.scglashuetten.de/test

    Tja...Seite nicht gefunden auf dem Server.

    Aber hiermit sollte es gehen (mal ohne absolutes Positionieren):
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    #links {
    width:33%;
    height:400px;
    float:left;
    background-color:blue;
    }
    #mitte {
    width:35%;
    height:400px;
    float:left;
    background-color:navy;
    }
    #rechts {
    width:33%;
    height:400px;
    float:right;
    background-color:seagreen;
    text-align:left;
    }
    #nachher { clear:both; }
    -->
    </style>
    </head>

    <body>
    <div id="links">links</div>
    <div id="mitte">mitte</div>
    <div id="rechts">rechts</div>
    <div id="nachher">
    sehr viel text unter die 3 anderen divs!
    </div>
    </body>
    </html>

    1. Die BG-Farbe habe ich nur für bessere sichtbarkeit eingegeben.
    2. NS ignoriert braw wie immer die 'height'.
    3. im #rechts  der text-align:left; ist für den IE4 sonst richtet der den text rechtsbündig aus.
    4. Alle 3 Browser (NS4.5 IE4/5 ) stellen die div's anders dar, aber wenn du auf hintergrundfarbe verzichtest und ein wenig mit padding-left; in allen 3 div's herumprobierst, bekommst du ein relative gutes Ergebnis.

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln