✔ DIV-Element relativ zu anderem positionieren

[sp_ChefKoch]

Tach allerseits,

da ich mich erst seit Kurzem mit CSS beschäftige hab ich ein Problem, bei dem Ihr mir sicherlich mit Leichtigkeit helfen könnt.

Ich habe ein Element mit

    margin: 0 auto;
    width: 1010px;

mittig positioniert.

Nun möchte ich ein weiteres Element relativ zu diesem positionieren, sodass ich Beispielsweise den Abstand zum oberen und rechten Rand des Elements angebe.

Wie mache ich das am besten?

thx schonmal für eure Hilfe.

 

[Maik]

Hi,

beispielsweise so:

#wrapper {
margin:0 auto;
width:1010px;
border:1px solid red;
}

div#box {
position:relative;
margin-left:50px;
margin-top:100px;
background:yellow;
}

<div id="wrapper">
     <div id="box">box</div>
</div>

 

[sp_ChefKoch]

ok, verstehen tue ich was du meinst, find ich schonma klasse

Allerdings hab ich das Problem, dass es sich um die Anpassung eines Baukastens handelt und ich in den letztendlichen Seiten nichts rumändern möchte (weil ich sonst den Look nicht in nachfolgende Versionen übernehmen kann), sondern nur in der css-Datei.

Gibt es dafür auch eine Möglichkeit?

 

[Maik]

Die absolute Positionierung eines Elements innerhalb seines relativ oder absolut positionierten Elternelements ist ebenfalls relativ.

Siehe hierzu auch das SELFHTML-Kapitel position (Positionsart) mit dem angehängten Beispiel http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm, sowie den Artikel Learn CSS Positioning in Ten Steps von Patrick Fitzgerald.

 

[sp_ChefKoch]

zu früh gefreut

 

[sp_ChefKoch]

ok ich ändere nun doch nicht nur die css-datei.
von daher würde das funktionieren.

Allerdings benutze ich folgenden Code:

}
div#Logo {
	margin: 0 auto;
	width: 1010px;
	z-index: 10;
}
div#Banner {
	position: absolute;
	top: 20px;
	z-index: 1;
	right: 40px;
}

damit das Logo auf der Seite zentriert (egal bei welcher Auflösung und Fensterbreite) wird. Das funktioniert allerdings nur, wenn ich die Positionierung nicht auf absolute stelle. Was wiederum eine Voraussetzung dafür zu sein scheint, dass ich den Banner am Logo orientieren lasse.

Kann ich die Zentrierung irgenwdie trotz einer absoluten Position erreichen, bzw die relative Orientierung des Banners ohne die Positionierung?

 

[Maik]

Positionier mal das DIV #Logo relativ:

div#Logo {
        position:relative;
	margin: 0 auto;
	width: 1010px;
	z-index: 10;
}

Auf diese Weise wird es weiterhin im Viewport horizontal zentriert und die absoluten Positionsangaben des DIVs #Banner beziehen sich auf die Boxengrenzen des Elternelements.

Wenn du das DIV #Logo absolut positionieren möchtest, müssten ein paar Regeländerungen vorgenommen werden, damit es horizontal zentriert wird:

div#Logo {
        position:absolute;
        left:50%;
	margin-left:-505px; /* negative Hälfte von width:1010px */
	width: 1010px;
	z-index: 10;
}

 

[sp_ChefKoch]

Wunderbar, vielen Dank!