nicht angemeldet
Div in Div positionieren
Hallo,
ich bin ein absoluter Anfänger in css und mein Problem ist, dass ich es nicht schaffen in einem "hauptdiv" 3 andere divs so zu positionieren, das eines rechts eines in der mitte und eines links ist. Ich hatte es schon soweit, das es ohne das in der mitte klappt aber wenn ich das in der mitte einfüge wird mein rechtes nach unten geschoben. Ich habe auch bereits bei euch im Forum gesucht aber konnte nichts finden was meine Fehler enthällt. Habe trotzdem ein paar Tipps ausprobiert aber es klappt nicht. ^^ Ich wäre wirklich sehr froh wenn sich das mal jemand bitte kurz anschauen kann. ^^
HTML:
body {
background-image: url(images/Background.jpg);
background-color: #274FA4;
background-repeat: repeat-x;
}
-->
</style>
<link href="css/GIS.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="Wrapper">
<div id="Banner"></div>
<div id="Bodyarea">
<div id="leftbar"></div>
<div id="content"></div>
<div id="rigtbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0px;
padding: 0px;
}
#Wrapper {
width: 998px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
#Wrapper #Banner {
height: 178px;
background-image: url(../images/Banner2.jpg);
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Wrapper #Bodyarea #leftbar {
height: 535px;
width: 195px;
float: left;
margin-left: auto;
background-color: #006666;
}
#Wrapper #Bodyarea #rigtbar {
height: 535px;
width: 201px;
float: right;
background-color: #0099FF;
}
#Wrapper #Bodyarea #content {
background-color: #00FF00;
height: 400px;
width: 300px;
margin-left: auto;
margin-right: auto;
}
#Wrapper #footer {
height: 40px;
clear: both;
background-color: #FFFFFF;
}
Content soll in die Mitte der "Bodyarea" und leftbar links und rightbar rechts
-
Hallo,
na aber das Beispiel hier in der Doku kennst du, "dreispaltenlayout"?
Gruß
jobo
-
Ja schon aber ich schaffe es nicht das mein mittleres Element das macht was ich will ;)
-
Ich bin nun soweit, dass das rechte Div da bleibt wo es sein soll. Aber mein mittleres DIV muss ich mit margin in zentrieren. Also es ist so, dass das mittlere DIV immer hinter dem ersten linken Div ist.... wie kann ich das ändern? das es erst danach kommt?
Kannst mir vllt bitte jemand nen Tipp geben? ^^CSS:
#Wrapper #Bodyarea #leftbar {
float: left;
margin-left: auto;
background-color: #000000;
height: 500px;
width: 100px;
}
#Wrapper #Bodyarea #rigtbar {
float: right;
background-color: #000000;
width: 100px;
height: 500px;
}
#Wrapper #Bodyarea #content {
background-color: #00FF00;
height: 500px;
width: 10px;
}
#Wrapper #footer {
height: 20px;
clear: both;
background-color: #000000;
}HTML:
<body>
<div id="Wrapper">
<div id="Banner"></div>
<div id="Bodyarea"><div id="leftbar"></div>
<div id="rigtbar"></div>
<div id="content"></div></div>
<div id="footer"></div>
</div>
</body>-
Hallo,
also meiner Ansicht nach sind die Beispiele funktionierend. Man sollte sie exakt nachbauen. Ggf. liegt beim Floaten das auch an der Reihenfolge der Div-Elemente, wie sie im body auftauchen.
Hast Du denn das Beispiel mal von Selfhtml nachgebaut? Genau so, wie es ist?
Gruß
jobo
-
-