Привет всем. Значит такое дело: верстал шаблон и столкнулся с такой маленькой задачкой. А точнее 2умя маленькими задачками (: 1-ая проблема: Есть шаблон. В нем есть главный див (.maindiv), в котором находится все содержимое. Длинна этого дива 995px. С помощью margin: auto; он располагается по центру страницы. Однако есть ещё один элемент дизайна - .provod . Этот элемент должен располагаться в верхней части страницы и вплотную прилегать к правой стороне главного дива (.maindiv) . Так же, дабы не увеличивать ширину сайта ( и смотреть его без скрола на маленьких разрешениях), надо что бы этот див (.provod) был как бэкграунд - при нехватке места на мониторе он прятался бы за его пределы, не оставляя при этом полосы прокрутки. Тоесть по сути, что б его было видно только на более высоких разрешениях. и он никак не должен "сдвигать" главный див (.maindiv) с центра. Собственно с ним и проблема, не знаю, как реализовать. помогите, плз )) 2-ая проблема: Не могу понять почему, но элемент .slideshow, при разрешении в 1280х800, налазит на .topshadow и закрывает половину логотипа. А он должен быть под ним и ни в коем случае не налазить, должны появится полосы прокрутки, которых, почему-то, нет. Я уже перепробовал все доступные мне способы позиционирования, но как-то безрезультатно. =\ Заранее благодарен за помощь. Код и схему дивов цепляю. index.tpl <html> <head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="all"> @import url({THEME}/css/style.css); </style> </head> <body> <div class="maindiv"> <div class="leftside"> <div class="topshadow"> <img src="/templates/Web-Studio/images/logo.jpg" alt="Web-Studio Creative" class="logo" /> </div> <div class="slideshow"> <a href=""> <img src="/templates/Web-Studio/images/buttonleft.jpg" class="buttonleft"> </a> <div class="preview"> </div> <div class="more"> blah-blah-blah </div> <!-- <a href=""> <img src="/templates/Web-Studio/images/buttonright.jpg" class="buttonright"> </a> --> </div> <div class="downshadow"> </div> </div> <div class="rightside" > <div class="light"> <div class="menu"> <ul id="topnav"> <li><a href="#"><strong>Main</strong></a></li> <li><a href="#"><strong>Portfolio</strong></a></li> <li><a href="#"><strong>Yslugi</strong></a></li> <li><a href="#"><strong>Zakazat'</strong></a></li> <li><a href="#"><strong>Contact's</strong></a></li> </ul> </div> </div> <div class="content"> CONTENT </div> <div class="copyrights"> <hr> COPYRIGHTS </div> </div> </div> <div class="provod"> </div> </body> </html> style.css body { background-color: #de4d0c; margin: 0px; padding: 0px; } hr { background-image: url(../images/hr.jpg); width: 439px; height: 2px; border: 0px; } .maindiv { background-color: #de4d0c; margin: auto; height: 100%; width: 994px; } .leftside { background-color: #ddd324; background-image: url(../images/leftbg.jpg); background-repeat: repeat-y; width: 516px; height: 100%; float: left; } .rightside { background-image: url(../images/rightbg.gif); background-repeat: repeat-y; width: 478px; height: 100%; float: right; } .topshadow { background-image: url(../images/topshadow.jpg); background-repeat: no-repeat; background-position: left top; height: 325px; width: 516px; text-align: right; } .content { width: 439px; margin-top: 170px } .slideshow { background-image: url(../images/slideshowbg.jpg); width: 423px; height: 228px; margin-left: 93px; position: absolute; bottom: 156px; } .buttonleft { margin-top: 77px; margin-left: 2px; float: left; } .buttonright { float: right; margin-top: 57px; } .preview { background-image: url(../images/preview.jpg); width: 342px; height: 168px; margin: 20 0 0 41; } .more { width: 342px; height: 40px; margin-left: 41px; } .downshadow { background-image: url(../images/downshadow.jpg); background-repeat: no-repeat; background-position: left bottom; height: 156px; width: 516px; position: absolute; bottom: 0px; } .light { background-image: url(../images/light.jpg); background-repeat: no-repeat; background-position: left top; position: absolute; top: 0px; height: 166px; width: 478px; } .menu { background-image: url(../images/menu.jpg); background-repeat: no-repeat; background-position: left top; height: 93px; width: 539px; position: relative; right: 60px; top: 57px; } .logo { padding-top: 93px; } .copyrights { height: 60px; width: 439px; position: absolute; bottom: 0px; } ul#topnav li { float: left; margin-top: 23px; padding-right: 15px; } ul#topnav li a { text-decoration: none; padding-top: 12px; text-align: center; color: #111; display: block; width: 81px; height: 46px; } ul#topnav li a:hover { background: url(../images/activebg.png) no-repeat; color: #FFF; width: 81px; height: 46px; text-decoration: none; } Схема расположения дивов: Вот, что должно получится:
