nicht angemeldet
Positionierung im zentrierten div
Mahlzeit!
Ich habe ein Problem mit der Positionierung von divs in einem zentrierten div. Ich bin quasi ein Anfänger.
Mein html Code:
<div id="all">
<div id="banner"></div>
<div id="breadcrumbs"></div>
<div id="content"></div>
<div id="menu"></div>
</div>
Mein css Code:
html, body {
font-family: arial;
font-size:11pt;
margin: 0;
text-align: center;
}
#all {
text-align:left;
margin: 0 auto;
width: 900px;
}
Also ist der div "all" zentriert. Jetzt will ich die child-divs (zb menu) in diesem div frei positionieren. Diese sollen sich auch teilweise überlappen.
position:absolute lässt child-divs aber nicht relativ zum "all"-div postionieren, da dieser selber auch nicht mit position:absolute formatiert ist.
Eine Lösung wäre ja z.B. den div "all" mittels
#all {
left:50%;
margin: -450px;
width: 900px;
}
zu zentrieren. Allerdings wird dann der div links abgeschnitten, wenn das Fenster eine geringere Breite als der div besitzt.
Ich hoffe einer von euch kann mir weiterhelfen :)
-
Hi,
position:absolute lässt child-divs aber nicht relativ zum "all"-div postionieren, da dieser selber auch nicht mit position:absolute formatiert ist.
Braucht er dafuer ja auch nicht.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Vielen Dank erstmal für eure schnellen Antworten. Allerdings scheine ich mich schlecht ausgedrückt zu haben.
Denn ich will, dass der all-div zentriert auf der Seite ist und die child-divs relativ zu ihm (bzw seiner linken oberen Ecke) positioniert werden. Hier mal ein komplettes Code-Beispiel.
[code lang=html
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
html, body {
font-family: arial;
font-size:11pt;
margin: 0;
text-align: center;
}#all {
text-align:left;
margin: 0 auto;
width: 900px;
background-color:red;
height:500px;
}#banner {
height:100px;
width:900px;
left:100px;
right:100px;
background-color:yellow;
}
#menu {
position:absolute;
height:100px;
width:200px;
left:700px;
top:50px;
background-color:green;
}</style>
</head><body>
<div id="all">
<div id="banner"></div>
<div id="menu"></div>
</div>
</body></html>
[/code]
Ich weiß, dass das nicht besonders schön aussieht :) Aber das Problem ist jetzt, dass die grüne Box (div:menu) beim Ändern der Fensterbreite nicht mit dem div:all verschoben wird.
Hoffentlich wisst ihr jetzt was für ein Problem ich habe ;)
-
Hi,
Allerdings scheine ich mich schlecht ausgedrückt zu haben.
Noch schlechter scheinst du uns verstanden zu haben.
Aber das Problem ist jetzt, dass die grüne Box (div:menu) beim Ändern der Fensterbreite nicht mit dem div:all verschoben wird.
Natuerlich nicht - du hast ja auch nichts unternommen, dass ihre absolute Positionierung auf die Position von #all beziehen wuerde.
Ich wuerde vorschlagen, du gehst jetzt endlich mal in SELFHTML zum Thema absolute Positionierung nachlesen - da steht naemlich, wie's geht.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Ok danke! Jetzt hab ichs kapiert. Ich wusste nicht, dass static ein Wert für position ist. Ich dachte es ein Anglizismus *g*
Jetzt funktionierts mit position:relative :)
-
-
-
-
position:absolute lässt child-divs aber nicht relativ zum "all"-div postionieren, da dieser selber auch nicht mit position:absolute formatiert ist.
Doch doch. position:absolute ist keine Voraussetzung, damit Children absolut positioniert werden können.
absolute positioning meint drei von static verschiedene Wert-Zustände, die dann relevant sind, sobald du Children via top, left, bottom, oder right relativ zum Parent positionieren willst.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o