Christian: Relative Position funktioniert nicht

So, ausgehend der Resonanz auf mein gestriges Posting, versuche ich jetzt den Tabellen abzuschwören. Deshalb habe ich ein kleinen Testaufbau für ein Layout gemacht. Dabei verwende ich relative Positionsangaben für die Layer. Leider funktioniert das nicht so wie ich mir das gedacht habe. Ich hatte mir vorgestellt dass der TopRight- Layer, rechts neben dem Logolayer erscheinen sollte, dabei erscheint er darunter.

Hier der Code :

HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS - Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mainlayer">
 <div class="logoayer">logo</div>
 <div class="toprightlayer">modus</div>
</div>
</body>
</html>

CSS :

body {
 font-family: Arial, Helvetica, sans-serif;
 background-color: #092653;
 padding: 0px;
 margin: 0px;
}
.mainlayer {
 background-color: #FFFFFF;
 height: 200px;
 width: 750px;
 border: 1px solid #000000;

}
.logolayer {
 position: relative;
 left: 0px;
 top: 0px;
 height: 90px;
 width: 250px;
 border-bottom-width: 1px;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-width: 0px;
 border-right-width: 0px;
 border-left-width: 0px;
 text-align: center;

}
.toprightlayer {
 background-color: #FF0000;
 height: 90px;
 width: 400px;
 position: relative;
 top: 0px;
 right: 0px;
 border-top-width: 1px;
 border-right-width: 0px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}

  1. Hi, Christian

    Da ich annehme, die Logogröße wird auf allen Seiten gleich sein, empfehle ich eher die Positionierung mit 'absolute'. Relative Positionierung wird IMHO bei Verschachtelung relativ schnell unübersichtlich, das ist aber Geschmacksache. Du änderst eine Eigenschaft und alle anderen wandern mit. Ich finde das umständlich.

    Was mir sonst noch aufgefallen ist: Bei der Angabe von Hintergrundfarben wird der Validator http://jigsaw.w3.org/css-validator/ bemängeln, dass keine Vordergrundfarbe angegeben ist.

    Einige Dinge lassen sich vereinfachen:

    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;

    = border-color: #000;

    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;

    = border-style: solid;

    border-bottom-width: 1px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;

    =  border-width: 0 0 1px 0;

    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;

    =  border-width: 1px 0 1px 1px;

    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;

    s. oben

    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;

    s. oben

    Viel Spaß beim Basteln.

    LG Orlando

  2. Tag auch

    ... Ich hatte mir vorgestellt dass der TopRight- Layer, rechts neben dem Logolayer erscheinen sollte, dabei erscheint er darunter.

    Du hast da etwas gründlich mißverstanden.
    Nur mit position:absolute wird ein Block aus dem "normalen" Fluß herausgelöst. Mit position:relativ dagegen bleibt ein Block Teil des normalen Elementflusses.

    Ein Beispiel:
    <div style="width:100px;height:100px">bla</div>
    <div style="width:100px;height:100px">blubb</div>
    sieht in etwa so aus:

    +--------+
    |bla     |
    |        |
    |        |
    +--------+
    +--------+
    |blubb   |
    |        |
    |        |
    +--------+

    Völlig logisch, nicht wahr?

    Wenn Du nun für den Blub-Div zusätzlich eine Angabe für position:relative verwendest, wird das daraus:

    <div style="width:100px;height:100px">bla</div>
    <div style="position:relative; top:5px; left:5px; width:100px; height:100px">blubb</div>

    +--------+
    |bla     |
    |        |
    |        |
    +--------+

    +--------+
      |blubb   |
      |        |
      |        |
      +--------+

    Was ist passiert?
    Der Blub-Div rutscht nicht etwa nach left:5px und top:5px, sondern er wird um jeweils 5px _relativ_ zu seiner _normalen Position_ verschoben.

    Für Dein Problem müßtest Du für den zweiten Layer z.B. <div style="position:relative; top:-90px; left:250px>Inhalt</div> notieren. Damit würden beide Layer direkt nebeneinander stehen, denn der zweite wurde relativ zur Normalposition um 90 Pixel nach oben und 250 Pixel nach links verschoben.

    Und was lernen wir daraus?

    Verwende besser position:absolute, das schont Zeit und Nerven.

    Thomas J.

    1. Ups

      ...denn der zweite wurde relativ zur Normalposition um 90 Pixel nach oben und 250 Pixel nach links verschoben.

      Das muß natürlich "250 Pixel nach rechts" heißen.

      Thomas J.

    2. Danke für deine Hilfe. Der einzige Grund warum ich das relativ ausgerichtet benutzen wollte, war dass ich dachte damit flexibler zu sein.

      Was würde ich denn z.B. jetzt machen wenn ich mich entscheide die Seite nicht beginnend am linken Rand sondern zentriert, oder am rechten Rand darzustellen? Müsste ich dann alle Pixelangaben ändern?
      Mit der relativen Ausrichtung dachte ich, dass ich nur den Mutterlayer zu verschieben bräuchte in so einem Fall und gut ist.

      1. Nachtrag und neue Frage :

        Gibt es eine Möglichkeit z.B. innerhalb eines Layers
        mit absoluten Zahlen zu positionieren?

        Dass ich z.B. sage : Layer PART ist Bestandteil von Layer MAIN und dann sage ich dass PART z.B. gemessen vom rechten oberen Rand von MAIN 50px nach links und 50px nach unten positioniert werden soll?

        1. Nachtrag und neue Frage :

          Gibt es eine Möglichkeit z.B. innerhalb eines Layers
          mit absoluten Zahlen zu positionieren?

          Dass ich z.B. sage : Layer PART ist Bestandteil von Layer MAIN und dann sage ich dass PART z.B. gemessen vom rechten oberen Rand von MAIN 50px nach links und 50px nach unten positioniert werden soll?

          Positionierte Layer innerhalb positionierter Layer sind relativ zu diesen angeordnet. Siehe auch http://selfhtml.teamone.de/css/eigenschaften/anzeige/position.htm (Beispiel zu http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position)

          - Sven Rautenberg