Помогите разобратся. Шаблон на CSS, Осталось чуть-чуть, а как сделать - не придумаю = | PHP, JS, MySQL | Форум

Форум -> PHP, JS, MySQL -> Помогите разобратся. Шаблон на CSS, Осталось чуть-чуть, а как сделать - не придумаю =\

Помогите разобратся. Шаблон на CSS, Осталось чуть-чуть, а как сделать - не придумаю =\

FriZZ

Дата: 25.12.2009, в 20:30 | Сообщение №1

Активный участникПользователь №: 92
Сообщений: 156

Привет всем.
Значит такое дело: верстал шаблон и столкнулся с такой маленькой задачкой.
Есть шаблон. В нем есть главный див (.maindiv), в котором находится все содержимое. Длинна этого дива 995px. С помощью margin: auto; он располагается по центру страницы. Однако есть ещё один элемент дизайна - .provod . Этот элемент должен располагаться в верхней части страницы и вплотную прилегать к правой стороне главного дива (.maindiv) . Так же, дабы не увеличивать ширину сайта ( и смотреть его без скрола на маленьких разрешениях), надо что бы этот див (.provod) был как бэкграунд - при нехватке места на мониторе он прятался бы за его пределы, не оставляя при этом полосы прокрутки. Тоесть по сути, что б его было видно только на более высоких разрешениях. и он никак не должен "сдвигать" главный див (.maindiv) с центра.
Собственно с ним и проблема, не знаю, как реализовать. помогите, плз ))
Заранее благодарен за помощь.
Код и схему дивов цепляю.
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">
            <----SLIDESHOW----- />
         </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>
</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 {

}
.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;
}

Вы не можете ответить в тему анонимно, пожалуйста, войдите или зарегистрируйтесь!