Добрый день, я сделал небольшой макет шаблона, но из-за нехватки опыта не могу (или это не возможно) побороть некоторые проблемы. - блок “bot_content”-там будет СЕО текст выходит за пределы блока “content” - блок class="footer" может отображаться поверх блока id=”container” при маленькой высоте окна браузера. И он всегда лежит за пределами видимого окна браузера(но я думаю это можно побороть просто сделав footer такой же ширины как и весь сайт и перенести его в блок class=”main”, но все равно при этом остается первая проблема) Необходимо поправить шаблон, так что бы он работал в большинстве браузеров, возможно применение js (но очень не желательно!) IE6+ FF3+ Opera9+ Chrome Ниже привожу код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin:0; padding:0; } #container { width:980px; /*trip haslayout */ position:relative; margin: 0 auto; } .main { position:absolute; top:100%; width:100%; background:#EEF; border: 1px solid; } .menu { background:#FEE; } .menu ul li { display:inline; width:30px; } .header { background:#EFE; width: 980px; margin: 0 auto; } .header ul li{ display:inline; width:300px; } .header ul li div{ position:relative; display:inline; } .search { bottom: 0; position: absolute; right: 0; background-color: lightgreen; width:150px; } .left { float: left; width: 200px; } .inside { float: right; width: 500px; } .footer { border: 1px solid; background:#EFE; height: 100px; position: absolute; top: 100%; width: 100%; } .right { float: right; } .content { float: left; position: relative; } .bot_content { position:absolute; top:100%; } </style> </script> </head><body> <div id="container"> <div class="main"> <div class="container"> <div class="inside"> <div class="picture">picture</div> <div class="bradcrumbs">breadcrumbs</div> <div class="content"> <div class="bot_content"> <p>main bot</p> <p>main bot</p> <p>main bot</p> <p>main bot</p> <p>main bot</p> </div> <div class="top_content"> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <p>main top</p> <div class="module"> some module</div> </div> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> <div class="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> </div> </div> <div class="header" style="height:25px;"> <div style="float: left;width:150px;"> logo </div> <div style="float: left;width:350px;"> login </div> <div style="float: right;width:150px;"> cart </div> </div> <div class="menu"> <ul> <li><span>menu 1</span></li> <li><span>menu 2</span></li> <li><span>menu 3</span></li> <li><span>menu 4</span></li> </ul> <div class="search">Search</div> </div> </div><!-- #container --> <div class="footer">footer</div> </body></html>
