2
My problem is that to fix the top banner (div), I get some strange side effects with the letf_div and the c_div (central area) - the vertical scroll bar dosen't respect the size ove the window (grows past it). With the browser maximized I manage to get a nice look using:
height:83%;
The problem is that as soon as the browser is resized it all falls apart! Any clues on how to make this work properly?
here's my page:
[HTML]
<html>
<style type="text/css">
* { margin:0; padding:0; font-family:Tahoma,Geneva,Arial,Helvetica,sans-serif; font-size:12px; text-decoration:none; }
a { color: #000000; text-decoration: none; }
a:hover { color: #f98f01; }
#main { overflow:hidden; }
#div_top { position:fixed; width:100%; height:104px; background-color:#ddc4c2; }
/* top div contents */
#top_menu { position:absolute; left:1.7em; top:33px; }
#logo { position:absolute; float:right; top:30px; right:30px; }
#section_name { position:absolute; font-size:3em; color:white; top:52px; left:0.8em; }
/* end of top div contents */
#container { position:absolute; top:104px; width:100%; height:100%; overflow:hidden; }
#left_div { visibility:hidden; position:relative; float:left; width:20%; height:83%; background-color:#ffcc44; overflow:hidden; }
#c_div { position:relative; float:left; width:80%; top:104px; height:83%; overflow:auto; }
</style>
<body id="main">
<div id="div_top">
<div id="top_menu">{{for menu in [('Index', 'index'),
('About the company', 'about'), ('Sports','sporting'),\
('News', 'novelties'), ('Pictures', 'pictures'), ('Contact', 'contact')]:}}
{{=A(menu[0], _href=menu[1])}}
{{if menu[0] != 'Contact':}} |
{{pass}}
{{pass}}
</div>
<div id="logo"><img src="/{{=request.application}}/static/companylogo.gif" alt="The company"></div>
<div id="sectionname">{{=sectionName}}</div>
</div>
<div id="container">
<div id="left_div">left area menu<br/>
</div>
<div id="c_div">central area - contents<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>
</div>
</body>
</html>
[/HTML]
txs for all the help,
The web Malik
