✔ Bitte um Hilfe bei CSS Positionierung

Status
Nicht offen für weitere Antworten.
J

julchen

Erfahrenes Mitglied
Hallo,
ich möchte ein Layout per css erstellen ohne Tabellen. Ich habe allerdings ein Verständnis Problem.

Meine Idee ist es 3 Div Container zu erstellen. Der mittlere soll eine bestimmte Breite und Höhe einnehmen und mittig auf der Seite positioniert werden. Oberhalb und unterhalb soll dann im Prinzip, je nach Auflösung, der entstehende Bereich mit einer Hintergrundfarbe definiert werden. Das gleiche soll auch für den Bereich rechts und links des eigentlichen Inhalts gelten, da dieser Inhalt ja auch eine bestimmte Breite und Höhe hat.

Kann mir eventuell jemand kurz den groben Code posten für die Div´s?


---------------------------------------------------------------------------------
Div in der Höhe automatisch anpassen und 100% breit
---------------------------------------------------------------------------------
Div mit bestimmter Breite und Höhe mittig positioniert
---------------------------------------------------------------------------------
Div in der Höhe automatisch anpassen und 100% breit
---------------------------------------------------------------------------------

Dankeschön
Julchen
 
Hi,

zwei Sätze vorne weg.
Beim zentrieren von Blockelementen gehen die Möglichkeiten auseinander.
Konform wäre eine Zentrierung mittels margin-left: auto und margin-right: auto.
Wie so häufig spielen hier ältere IE-Versionen nicht mit. Sie verwenden zum Zentrieren
text-align, das im Elternelement angegeben werden muss. Um eine Zentrierung
gewährleisten zu können, müssen beide Variationen kombiniert werden.

Als Elternelement für die text-align-Eigenschaft wird der BODY verwendet.

Hier mein Vorschlag:
Code: 
BODY{ height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;    /*Zentrierung im Elternelement*/}

.oben{ height: 100px;
    margin: 0px auto 5px auto;    /* Abstände zu den anderen Elementen */
    border: 1px solid black;}

.mitte{ height: 400px;
    width: 600px;
    margin: auto;
    text-align: left;    /* Zentrierung aus dem Elternelement wieder aufheben */
    border: 1px solid black;}

.unten{ height: 100px;
    margin: 5px auto 0px auto; border: 1px solid black;}

Die border-Eigenschaften kannst Du wieder entfernen. Sie dienen nur der Anschauung.

Im HTML-Dokument würde es folgendermassen aufgerufen werden:

Code: 
<div class="oben"></div>
<div class="mitte">hallo welt</div>
<div class="unten"></div>

Hoffentlich hilft Dir das weiter.

Ciao
Quaese
 
Original geschrieben von SilentWarrior
Dann musst du jetzt aber erklären, was du gegen Tabellen hast. Mit Tabellen hast du das nämlich in zwei Minuten erledigt.
Zum Vergrößern anklicken....
drei ernsthafte Gründe:
- Bei aufwendigen Layouts wird der Quellcode mit Tabellen um ein vielfaches größer
- Ein bischen resultierend aus dem ersten: Änderungen sind leichter vorzunehmen
- In anbetracht von semantischem Web und Co sollte man Tabellen nicht unbedingt zum Layout nutzen.

der Grund der wohl viele Leute dazu treibt
- Es ist nunmal grade so verdammt hip und cool ;)
 
Hätte es gerne anders

Code: 
BODY{ height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;    /*Zentrierung im Elternelement*/}

.oben{ height: 100px;
    margin: 0px auto 5px auto;    /* Abstände zu den anderen Elementen */
    border: 1px solid black;}

.mitte{ height: 400px;
    width: 600px;
    margin: auto;
    text-align: left;    /* Zentrierung aus dem Elternelement wieder aufheben */
    border: 1px solid black;}

.unten{ height: 100px;
    margin: 5px auto 0px auto; border: 1px solid black;}

Code: 
<div class="oben"></div>
<div class="mitte">hallo welt</div>
<div class="unten"></div>

>> Der obere und untere Layer sollen aber nicht eine feste Höhe haben, sondern so das der mittlere Bereich immer Mittig positioniert wird. Wenn ich anstatt 100px dann 100% eingebe klappts aber auch nicht.

Kannst Du mir bitte nochmal helfen.

Gruss
Julchen
 
Hi,

mir ist eine Lösung nur mit CSS nicht bekannt. Meiner Meinung nach ist das
nur mit ScriptSprachen wie zum Beispiel JavaScript möglich (ich lasse mich
allerdings gerne eines besseren belehren). Hierbei ist jedoch zu beachten, dass
Besucher JS deaktiviert haben könnten.

Ich habe Dir in den Anhang einen Lösungsvorschlag mit JS gepackt. Funktioniert
mit IE 5.01, 5.5 und 6, sowie mit Mozilla 1.6, Opera 7.22 und Netscape 7.1.
Schau's Dir einfach mal an.

Gute Nacht
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück