[Layout] Problem bei Positionierung von <div>s
nokill
- css
Hi,
ich mache greade ein Layout für unsere Clanpage (wie ein paar vielleicht wissen). Mein problem ist, dass ich nicht weiß wie ich das <div>-Element für die rechte Navigationsleiste richtig positionieren soll. so sollte es aussehen
------------------------------------ - - - - - head - - - ------------------------------------ -navi- -navi- -left- -righ- - - -t - - - - - - - - - - - body - - - - - - - - - - - - - - - - - - - - - - - - - - ------------------------------------ - Footer - ------------------------------------
Derzeit sieht es so aus: ------------------------------------ - - - - - head - - - ------------------------------------ -navi- - -left- - - - - - - - - - - - - body - - - - - - - - - - - - - - - - ------------------------------------ -navi- - -righ- - -t - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ------------------------------------ - Footer - ------------------------------------
Jetzt mal der entsprechende Quelltext:
<html> <head> <title>Titel der Seite</title> <style type="text/css"> <!-- body { background-color:#C0C0C0; margin:0px; width:100%; height:100%; }
#body { background-color:#FF7F00; margin:0px; width:80%; height:100%; float:none; }
#head { background-color:#99CC66; margin:0px; width:100%; height:20%; }
#navi_left { background-color:#FFBF00; width:20%; float:left; height:75%; }
#site { background-color:##009090; width:60%; height:75%; }
#navi_right { background-color:#999966; width:20%; height:75%; }
#footer { background-color:#99CC66; width:100%; clear:left; } //--> </head> <body> <div id="body"> <div id="head"> --Head-- </div> <div id="navi_left"> --Navi_left-- </div> <div id="site"> --Site-- </div> <div id="navi_right"> --Navi_right </div> <div id="footer"> --Footer-- </div> </div> </body> </html>
Bitte wundert euch nicht wegen den komischen Fraben, die habe ich nur gewählt damit die die Elemente besser auseinander halten kann und nicht erst suchen muss ;)
schon mal danke im vorraus für die Hilfe
cya nokill
Hallo nokill
Schau dir folgende Seite an.
http://www.css4you.de/wslayout1/ex0010.htm
MFG
Detlef