Seite 1 von 1
CSS Problem
Verfasst: 27. Okt 2009, 01:04
von Daki
Hi Community,
ich habe ein großes CSS Problem bei einem Grundgerüst einer Homepage aus Div's. Ich habe es am Anfang eigentlich wunderbar hinbekommen, aber erst als ich es im IE6 getestet habe und es daraufhin neu machen musste (-.-*), führte das zu meinem Problem:
Klick
Der div mit der ID Body geht über die 100% des Bildschirms. Es wird einfach die Höhe des Menü + Housepic Divs hinzuaddiert.
Die Höhe soll sich immer der Bildschirmhöhe anpassen. Hab schon wahnsinnig viel probiert, aber komme nicht dahinter.
Das einfachste wäre:
#body{position:absolute;width:100%;
bottom:0px;top:0px;left:0px;overflow:auto;}
aber das geht natürlich nicht =(.
Hoffe jemand kann mir helfen..
<html>
<head>
<style type="text/css">
body{margin:0px;}
#ebene{position:relative;width:900px;height:100%;margin:auto;}
#sideleft{position:absolute;width:20px;height:100%;top:0px;left:-20px;background-color:green}
#sideright{position:absolute;width:20px;height:100%;top:0px;right:-20px;background-color:green}
#housepic{position:relative;width:100%;height:150px;top:0px;left:0px;background-color:darkgreen}
#menu{position:relative;width:100%;height:22px;top:0px;left:0px;z-index:1;text-align:center;background-color:red}
#body{position:relative;width:100%;height:100%;bottom:0px;left:0px;overflow:auto;background-color:lightgreen}
#info{position:absolute;width:150px;height:100%;top:0px;left:0px;text-align:left;padding-left:2px;font-size:13px;overflow:auto;z-index:2;font-family:Verdana; font-size:11px;background-color:yellow}
#bodycontent{position:absolute;width:748px;height:100%;bottom:20px;right:0px;padding-bottom:20px;padding-top:10px;overflow:auto;background:white;font-family:Verdana; font-size:13px;background-color:blue}
#last{position:absolute;width:748px;height:21px;bottom:-1px;right:0px;font-size:12px;color:grey;font-family:Verdana;font-size:10px;background-color:orange;}
</style>
</head>
<body>
<div style="text-align:center;height:100%;">
<div id="ebene">
<div id="housepic">
</div>
<div id="sideleft">
</div>
<div id="sideright">
</div>
<div id="menu">
</div>
<div id="body">
<div id="info">
</div>
<div id="bodycontent">
</div>
<div id="last">
</div>
</div>
</div>
</div>
</body>
</html>
lg Daki
Re: CSS Problem
Verfasst: 27. Okt 2009, 11:45
von ShadowFlame
Verstehe noch nicht ganz was du willst. Kannst du einfach mal das Gerüst, so wie du es möchtest in paint skizzieren?
Re: CSS Problem
Verfasst: 27. Okt 2009, 12:40
von Po1son
Ich hab´s mal versucht also das diese Lösung keinesfalls optimal ist ist mir durchaus klar aber hab das leider nicht anders hinbekommen.
So denke das du es so wolltest, vielleicht hilft es dir ja schonmal
Link
Code: Alles auswählen
<html>
<head>
<style type="text/css">
body{margin:0px;}
#ebene{position:relative;width:900px;height:100%;margin:auto;}
#sideleft{position:absolute;width:20px;height:100%;top:0px;left:-20px;background-color:green}
#sideright{position:absolute;width:20px;height:100%;top:0px;right:-20px;background-color:green}
#housepic{position:relative;width:100%;height:150px;top:0px;left:0px;background-color:darkgreen;z-index:4}
#menu{position:relative;width:100%;height:22px;top:0px;left:0px;padding-left:1px;z-index:3;text-align:center;background-color:red}
#info{position:absolute;width:150px;height:100%;top:0px;left:0px;text-align:left;padding-left:2px;font-size:13px;overflow:auto;z-index:2;font-family:Verdana; font-size:11px;background-color:yellow}
#bodycontent{position:absolute;width:748px;height:100%;bottom:20px;right:0px;padding-bottom:150px;padding-top:10px;overflow:auto;background:white;font-family:Verdana; font-size:13px;background-color:blue}
#last{position:absolute;width:748px;height:21px;bottom:0px;right:0px;font-size:12px;color:grey;font-family:Verdana;font-size:10px;background-color:orange;}
</style>
</head>
<body>
<div style="text-align:center;height:100%;">
<div id="ebene">
<div id="housepic"></div>
<div id="sideleft"></div>
<div id="sideright"></div>
<div id="menu"></div>
<div id="body"></div>
<div id="info">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Test2
</div>
<div id="bodycontent">gh
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Test
</div>
<div id="last"></div>
</div>
</div>
</div>
</body>
</html>
Re: CSS Problem
Verfasst: 27. Okt 2009, 13:22
von Daki
Es sollte eigentlich genau so angezeigt werden wie in Po1sons code. Aber seine Lösung ist leider suboptimal, da er das Ding ganz nach oben schiebt und es in den Hintergrund von Menü und Housepic schiebt...
Danke für deinen Versuch^^
Re: CSS Problem
Verfasst: 27. Okt 2009, 13:27
von Po1son
Code: Alles auswählen
#housepic{position:relative;width:100%;height:150px;top:0px;left:0px;background-color:darkgreen}
kannste hier den wert von Height nich einfach auch in % setzen oder muss es unbedingt 150px ausmachen? dann wäre alles viel einfacher^^
Re: CSS Problem
Verfasst: 27. Okt 2009, 13:31
von CountZero
Also mal ohne genaue Lösung und testen was mir am CSS aufgefallen ist und evtl. als Lösungsansatz behilflich sein könnte.
1. Absolute (px) und relative (%) Größenangeben sind gemischt, das führt oft insbesondere bei älteren Browsern zu Problemen
2. Damit ein 100% height funktioniert muss dies soweit ich mich entsinne auch auf body und oder html angewendet werden
siehe bspw hier:
http://www.tutorials.de/forum/css-tutor ... hoehe.html
Re: CSS Problem
Verfasst: 27. Okt 2009, 13:54
von Daki
@Po1son: Wenn ich das mache passt sich die Größe des Houspic - Divs an die Bildschirmgröße des Users an und das ist ganz und gar nicht gut ^^.
@CountZero:
1 - Es geht auch im neusten Firefox nicht und wird dort genauso angezeigt wie im IE6.
2 - Getestet, funktioniert nicht =(
Re: CSS Problem
Verfasst: 27. Okt 2009, 18:48
von Sel-lej kemmna
Hat jemand Lust, ne kleine Cs:s Vereinigung ins Leben zu rufen?
Re: CSS Problem
Verfasst: 27. Okt 2009, 18:57
von Dimi
Sel-lej kemmna hat geschrieben:Hat jemand Lust, ne kleine Cs:s Vereinigung ins Leben zu rufen?
hier gehts nicht um counter strike source
