✔ Innerhalb eines <DIV> mit LEFT & TOP arbeiten

[SilverVegeto]

Hallo Leute,
bin gerade dabei mein Layout zu erstellen und da es recht komplex ist meine frage ob es eine Möglichkeit gibt in einem <DIV> mit LEFT & TOP zu arbeiten. Weil normal ist das bei mir so das LEFT & TOP für die gesamte Oberfläche ist.

In diesem Bsp. wäre es jetzt der Bereich "header" wo ich mit LEFT & TOP arbeiten möchte.

<div id="layout">
  <div id="header">
    <div id="box-001"></div>
    <div id="box-002"></div>
    <div id="box-003"></div>
    <div id="box-004"></div>
  </div>
</div>

 

[Maik]

Hi,

verstehst du unter "TOP" und "LEFT" die gleichnamigen CSS-Eigenschaften

• top (Startposition von oben)
• left (Startposition von links)

zum Positionieren eines Elements?

Und worauf zielt deine Frage konkret ab?

mfg Maik

 

[SilverVegeto]

Ja genau diese Eigenschaften meine ich.
Das Problem ist das mein Design immer zentriert im Browser angezeigt werden soll. Ist mir nur leider nicht möglich wenn ich einfach top & left benutze.

 

[Maik]

Ohne jetzt das Stylesheet zu dem vorgestellten Markup näher zu kennen, besteht grundsätzlich sehr wohl mit den beiden CSS-Eigenschaften die Möglichkeit, ein Element im Browserfenster zu zentrieren.

Hierfür müsste es dann eine fixe Breite besitzen, um folgende Regel darauf anzuwenden:

#header {
width:600px; /* von mir hier frei gewählt */
position:absolute;
top:10px; /* Startposition von oben, der Wert ist von mir frei gewählt */
left:50%; /* Der linke Boxenrand sitzt in der Fenstermitte, die Box also außermittig nach rechts verschoben */
margin-left:-300px; /* und wird um die negative Hälfte von width:600px nach links geschoben, und so im Viewport horizontal zentriert */
}

mfg Maik