div container positionieren!

CroweHammer

Sers Leute, ich sitz hier neu im Boot und hoffe mich mit Hilfe dieses Forums noch ein Stück hocharbeiten zu können!

Mein Problem: Ich habe einen Cointainer (#banner) der 780 pixel breit und 100 pixel hoch ist als Banner der Page. Dieser soll mittig auf der Page zentriert sein.
An der linken unteren Seite des Banners soll die Navigitionsleiste (#inhalt) platziert werden. Diese heften mir jegliche Browser nach dem jetzigen Stand meines Quellcodes an die linke Seite des Browser und nicht an die linke Seite des Banners.

Schaut auch meinen Quellcode an, dann versteht ihr bestimmt mein Problem! Was mache ich falsch?

#body {
margin: 0;
padding: 0;
background: #ffffff;
height: 100%; }

#banner { margin:auto;
height:100px;
width:780px;
background-color:#999999;
border:double;
border-color:#0066CC;}

#inhalt { background-color:#993300;
position:absolute; left:0px; top:5px;
height:500;
width:140; }

</style>

</head>
<body id="body">
<div id="banner"> </div>
<div id="inhalt" > </div>
</body>
</html>

Über eine baldige Antwort würde ich mich sehr freuen!

Mit freundlichem Gruß
CroweHammer

K.Y.L.T.

Hi CroweHammer, dein Problem ist, dass du das Attribut position für deine Zwecke nicht richtig ausnutzt.

Du musst natürlich Postionen erstmal korrekt angeben, schau dich schlau, würd dir ja nix bringen wenn ich dir hier den fertigen code Posten würde

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

CroweHammer

Alles klar ich hab mich schon auf anderen Seiten versucht und bisher irgendwie noch nicht ganz den Überblick bekommen

Du meinst, dass es nur an der Positionierung liegt?

K.Y.L.T.

Die Anordnung ist auch etwas seltsam, du gehst ja immer vom größeren Vorgängerelement aus, wieso machst du dann nicht noch ein Element für die Navi?

[ navi ] [bild ]

[inhalt ]

CroweHammer

Also meine Page sollte folgendermaßen aussehen am Ende!

[ Banner ]
[Navi1] [ Inhalt ] [Navi2]

K.Y.L.T.

du meinst wohl eher so oder?

[ Banner ]
[Navi1] [ Inhalt ] [Navi2]

also das Banner in die Mitte...

CroweHammer

jop genau, ist bei mir auch nach links gesprungen wie bei dir

K.Y.L.T.

hm, also dann kannste es so lassen, wie gesagt, dies hier musst du noch überarbeiten und bei den anderen dementsprechend ändern

position:absolute; left:0px; top:5px;

würds vielleicht mal zur Probe mit Prozentwerten probieren

z.B. position:absolute; left:20%; top:5px;

CroweHammer

Jop mein Problem ist im Moment das ich die Positionierung nicht hinkriege, dass sich die Navi an dem Banner orientiert und nicht am Body, seit über 2-3 stunden

K.Y.L.T.

Zeig mal bitte gerade nen link, vielleicht versteh ich dich auch falsch

CroweHammer

http://www.pictureupload.de/pictures/220607004416_bisher.JPG

Hier hab ich mal ein screenshot gemacht wie das Ergebnis meines bisherigen Quellcodes aussieht.
Die Navi mit der Positionierung: position:absolute; left:0px; top:5px; orientiert sich wie es scheint am Body und nicht an dem Banner!

K.Y.L.T.

kann sie ja auch nicht ! weil position : absolute sich am nächsten Vorgängerelement orientiert, was nicht stätic ist!

bau bei dem Header mal ein

postion : absolute;
left : 50%;
heigth: 0px;

CroweHammer

gleiches Ergebnis!

K.Y.L.T.

oh man du NUDEL !!!

so ändern und dann noch die höhe von INHALT etwas nach unten setzen....!

</body>

CroweHammer

rofl immer noch dasselbe auch wenn du mir jetzt den Kopf abreißen willst

K.Y.L.T.

Quellcode zeigen ... Edit: bitte...

CroweHammer

#body { margin: 0;
padding: 0;
background: #ffffff;
height: 100%; }

#banner { margin:auto;
postion:absolute;left :50%; heigth:0px;
height:100px;
width:780px;
background-color:#999999;
border:double;
border-color:#0066CC;}

#inhalt { background-color:#993300;
position:absolute; left:0px; top:5px;
height:500;
width:140; }

</style>

</head>
<body id="body">

K.Y.L.T.

EDIT : ok, dann muss ich doch mal kurz mit dir über ICQ reden ....

CroweHammer

hier der neueste stand wie versprochen, aber passt immer noch net leider

#body { margin: 0;
padding: 0;
background: #ffffff;
height: 100%; }

#banner { margin-left:-15em;
position:absolute;left :50%; top:0px;
height:100px;
width:780px;
background-color:#999999;
border:double;
border-color:#0066CC;}

#inhalt { background-color:#993300;
position:absolute; left:0px; top:260px;
height:500;
width:140; }

</style>

</head>
<body id="body">

sejuma

Pack alles in einen horizontal zentrierten wrapper. Außerdem fehlen da teilweise noch Pixelangaben.

CSS:

Code

body
{margin: 0;
padding: 0;
width: 100%;
height: 100%;
}


#wrapper
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
backgropund-color: #f00;
}


#banner { 
height:100px; 
width:780px; 
background-color:#999999; 
border:double; 
border-color:#0066CC;} 


#inhalt { background-color:#993300; 
float: left;
margin-top:5px; 
height:500px; 
width:140px; }

Alles anzeigen

HTML:

Code

<body> 


<div id="wrapper">


<div id="banner">banner</div>
<div id="inhalt">inhalt</div>
</div>


</body>

Alles anzeigen

Wegen der weiteren Vorgehensweise sieh dir mal die Links zu den Layout-beispielen in den FAQ's an.

Tags