Jump to content

ale-kc

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Everything posted by ale-kc

  1. Добрый день, я сделал небольшой макет шаблона, но из-за нехватки опыта не могу (или это не возможно) побороть некоторые проблемы. - блок “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>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy