CSS Problem

Daki · Beitrag von **Daki** » 27. Okt 2009, 01:04

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

ShadowFlame · Beitrag von **ShadowFlame** » 27. Okt 2009, 11:45

Verstehe noch nicht ganz was du willst. Kannst du einfach mal das Gerüst, so wie du es möchtest in paint skizzieren?

Po1son · Beitrag von **Po1son** » 27. Okt 2009, 12:40

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>

Daki · Beitrag von **Daki** » 27. Okt 2009, 13:22

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^^

Po1son · Beitrag von **Po1son** » 27. Okt 2009, 13:27

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^^

CountZero · Beitrag von **CountZero** » 27. Okt 2009, 13:31

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

Daki · Beitrag von **Daki** » 27. Okt 2009, 13:54

@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 =(

Sel-lej kemmna · Beitrag von **Sel-lej kemmna** » 27. Okt 2009, 18:48

Hat jemand Lust, ne kleine Cs:s Vereinigung ins Leben zu rufen?

Dimi · Beitrag von **Dimi** » 27. Okt 2009, 18:57

Sel-lej kemmna hat geschrieben:Hat jemand Lust, ne kleine Cs:s Vereinigung ins Leben zu rufen?

hier gehts nicht um counter strike source

www.freewar.de

CSS Problem

CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Re: CSS Problem

Wer ist online?