[CSS] - Container positionieren

[_Emperor_]

Hallo,

ich bekomme es einfach nicht hin, die im Bild zu sehenden Container zu realisieren: Mir ist wichtig, dass das Layout sowohl horizontal als auch vertikal zentriert ist.
Was mache ich falsch?

Vielen Dank
_Emperor_


---


@charset "utf-8";
/* CSS Document */

#container
{
width: 800px;
height: 500px;
background-color: #FF0000;

/* Anweisungen zum horizontalen *und* vertikalen zentrieren */
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -250px;
}

#header
{
width: 800px;
height: 250px;
background-color: fuchsia;

/* Anweisungen zum horizontalen *und* vertikalen zentrieren */
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -250px;
}

#navigation
{
width: 590px;
height: 25px;
background-color: green;
float:right;

/* Anweisungen zum horizontalen *und* vertikalen zentrieren */
position: absolute;
top: 50%;
right: 50%;
margin-right: -400px;
margin-top: 0px;
}


#gfx
{
width: 210px;
height: 250px;
background-color:black;
float:left;

/*Anweisungen zum horizontalen *und* vertikalen zentrieren */
position: absolute;
top: 290px;
left: 260px;
margin-left: 0px;
}

[xandros]

wenn du uns jetzt noch verrätst, wie du die Klassen auf der Seite ansprichst, damit man sieht, wie die Container verschachtelt sind, dann kann man auch etwas dazu sagen.

Die reinen CSS-Angaben sind da nicht sehr aussagekräftig, da die Klassen beliebig in verschiedenen Containern ineinander oder separat verschachtelt werden können. Dementsprechend reagieren dann auch die Positionsangaben absolut zum Browserfenster oder zum Elternelement.

Im schlimmsten Fall überdecken sich die Elemente durch die Top 50%/ Left 50% Angaben einfach nur....

[_Emperor_]

Original von xandros
wenn du uns jetzt noch verrätst, wie du die Klassen auf der Seite ansprichst, damit man sieht, wie die Container verschachtelt sind, dann kann man auch etwas dazu sagen.

<div id="container"></div>

<div id="header"></div>

<div id="navigation"></div>

<div id="gfx"></div>

Das angehängte Bild ist ein Photoshop-Werk. *duck*
Zwei Container fehlen also noch.

[Blaxxun]

Mach erst nen großen Container, der zentriert ist und dann positionierst du die anderen Container in diesem Container.


Du zentrierst Vertical und Horizontal und willst dann floaten, wie soll das gehn?
Bring das bitte mal online, als zusammenhängendes Dokument, hab keine Lust mir das lokal abzuspeichern.

[_Emperor_]

Original von Blaxxun
Bring das bitte mal online, als zusammenhängendes Dokument, hab keine Lust mir das lokal abzuspeichern.

Ich habe jetzt mal eine weitere Möglichkeit ausprobiert: Fürchte aber, dass mir wieder alles kaputt geht, wenn ich die anderen Container platziere.
Was darf ich machen und was nicht: Irgendwelche Tipps?

Edit: Ich habe nochmal eine neue Version hoch geladen. Wie Ihr seht, schaffe ich

<div id="navigation">
<div id="pics">
<div id="text">

nicht richtig zu positionieren. Kann doch nicht mehr so schwer sein, oder?

[Blaxxun]

<div id="distance"></div>

Was soll der Div bringen?


Übrigens hab ich dir das schnell mal gemacht, dass der #container sowohl vertikal als auch horizontal zentriert ist:

html, body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container
{
position: absolute;
height: 300px;
width: 500px;
background-color: red;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}

Den anderen Container brauchst du nicht. Und in deinen Haupt Container setzt du dann die anderen Container, die sollten sich dann nur darin bewegen, das ist doch was du wolltest oder?

[_Emperor_]

Original von Blaxxun
<div id="distance"></div>

Was soll der Div bringen?

Das basiert auf diesem Tutorial ist IMHO irgendein Workaround. Ich haue es raus.

Original von Blaxxun
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container
{
position: absolute;
height: 300px;
width: 500px;
background-color: red;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}

Danke Dir.

So wie ich das sehe, kommt es quasi primär auf

html, body
{
height: 100%;
margin: 0px;
padding: 0px;
}

an - das hatte ich als einziges nicht.

Original von Blaxxun
Und in deinen Haupt Container setzt du dann die anderen Container, die sollten sich dann nur darin bewegen, das ist doch was du wolltest oder?

Jein. Mein primäres Problem (siehe auch Edit oben): Ich habe nochmal eine neue Version hoch geladen. Wie Ihr seht, schaffe ich

<div id="navigation">
<div id="pics">
<div id="text">

nicht richtig zu positionieren. Kann doch nicht mehr so schwer sein, oder?

[_Emperor_]

Da, ich habe es!

Fragt jetzt nicht, woran ich gescheitert bin ...

Danke auf jeden Fall!

[b3ast]

ich kann keine einzige datei öffnen, auf die du verlinkt hast. aber schön dass es jetzt funktioniert, glückwunsch.

[_Emperor_]

Original von b3ast
ich kann keine einzige datei öffnen, auf die du verlinkt hast. aber schön dass es jetzt funktioniert, glückwunsch.

Ich musste den GMX-Domain Namen ändern und nachdem es eh funktionierte ...

Allerdings hörte ich, dass man die vertikale Zentrierung eigentlich nicht verwenden sollte!?