PDA

Zobacz pełną wersję : Rozmieszczenie modułów na stronie



alibaba_81
09-05-2013, 22:38
Witam,
mam problem z rozmieszczeniem modułów na stronie.
Rozmieszczenie ich na stronie wygląda tak:
patrz zalacznik1: jak_jest.jpg
a chcę aby wyglądał tak:
patrz zalacznik2: jak_ma_byc.jpg
czyli chodzi o to aby div top-extend był rozciągnięty na całej długości strony, natomiast pozostałe div'y, powyżej i poniżej jego, miały krótszą długość i były wyśrodkowane na stronie.
Poniżej okrojony kod strony html:


<!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="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body#ot-body{

font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
}
.clr {
clear:both;
height:0;
line-height:0;
display:block;
float:none;
}
div.ot-wrap{
float: left;
width: 100%;
padding-bottom: 55px;
}
div.ot-widthTemp{
margin: 0 auto;
width: 960px;
}
.ot-widthTemp-i{

}
.ot-widthTemp-i{
float: left;
background-color: red;

}
form div {
margin: 0;
}
div.ot-wrap-i,
div.ot-widthTemp-i,
div.ot-header,
div.ot-headertop,
div.ot-logo-menu,

div.ot-topboxes,
div.ot-mainbody,
div.ot-top-content,
div.ot-bottom-content,
div.ot-bottomboxes,
div.ot-bottom-extends,
div.ot-footer{
float: left;
width: 100%;
}
div.ot-top-extend{
float: left;
width: 100%;

}
/* +++++++++++++++ STYLE HEADER +++++++++++++++ */
div.ot-header{
position: relative;
z-index: 999;
margin-bottom: 10px;
padding-bottom:20px;
border-bottom: 2px solid #800000;
background-color:yellow;
}
.ot-headertop{
padding-top: 10px;
}
div.ot-headertop-1{

}
div.ot-headertop-1-i{

}
div.ot-headertop-1-i .otModule {
line-height: 24px;
}
div.ot-headertop-1 a{
color: #666666;
}
div.ot-headertop-1 ul{
float: left;
margin: 0 10px;
padding: 0;
}
div.ot-headertop-1 ul li{
background: none;
display: inline;
padding: 0 10px 0 0;
line-height: 24px;
}
div.ot-headertop-1 ul li.last{
padding: 0;
}
div.ot-headertop-1 ul li a{
margin: 0;
}
div.ot-headertop-1 div #ot-login-popup-link,
div.ot-headertop-1 .ot-login-button span,
div.ot-headertop-1 .ot-login-button span span{
background: none;
color: #666666;
}
div.ot-headertop-1 .ot-login-button span span span:hover{
text-decoration: underline;
}
div.ot-logo{
float: left;
width: 33%;
margin-left:7px;
margin-top:5px;
}
div.ot-logo a.logo{
width: 340px;
height: 110px;
display: block;
background: url("../images/logo.png") no-repeat scroll 0 0 transparent;
}
.ot-mainmenu{
float: right;
width: 66%;
position: relative;
margin-top: 10px;
}
.ot-headertop-2{
float: right;
width:44%;
text-align: right;
}
.ot-headertop-2 .otModule{

}
form.default-search{

}
div.ot-mainmenu{
position: relative;
z-index: 9999;
}
div.mainmenu-midbg{
height: 40px;
position: relative;
}
.ot-banner{
position: relative;
margin-bottom: 20px;
background: url(../images/banner-bg.png) center left repeat-x;
}
.ot-banner-i{
float: left;
width: 100%;
}
.ot-banner .otModule H3{
font-size: 34px;
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0px 0px 30px;
line-height: 34px;
}

/* +++++++++++++++ END HEADER +++++++++++++++ */
.ot-top-extend{
margin-bottom: 20px;
border-bottom: 2px solid #800000;
}
.ot-top-extend-i{
padding: 0;
margin: 0;
}
.ot-top-extend-i .otModule-i{

}
.ot-top-extend .otModule{
margin-bottom: 10px;
}
.ot-top-extend .otModule table tr td{
padding: 0;
}
.ot-top-extend .otModule p{
margin: 0;
}

</style>
</head>
<body id="ot-body" >
<div class="ot-wrap">
<div class="ot-wrap-i">
<div class="ot-widthTemp">
<div class="ot-widthTemp-i">
<!--******************** START HEADER ********************-->
<div class="ot-header">
<div class="ot-header-i">OT-HEADER
<div class="ot-headertop">
<div class="ot-headertop-i">
<div class="ot-headertop-1">
<div class="ot-headertop-1-i">
</div>
</div>
<div class="ot-headertop-2">
<div class="ot-headertop-2-i">
</div>
</div>
</div>
</div>
<div class="ot-logo-menu">
<div class="ot-logo-menu-i">
<div class="ot-logo">
</div>
<div class="ot-mainmenu">
<div class="mainmenu-midbg">
<div class="mainmenu-midbg-i">
<div id="ot-mainmenu" class="ot-mainmenu-i">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--******************** END HEADER ********************-->

<!--******************** START TOP EXTEND ********************-->
<div class="ot-top-extend">
<div class="ot-top-extend-i"> TOPEXTEND - powinien byc na cala dlugosc strony
</div>
</div>

<!--******************** END TOP EXTEND ********************-->

<!--******************** START TOPBOXES ********************-->
<div class="ot-topboxes" id="ot-topboxes">
<div class="ot-topboxes-i" id="ot-topboxes-i">TOPBOXES
</div>
</div>
<!--******************** END TOPBOXES ********************-->
</div>
</div>
</div>
</div>

</body>
</html>



dzięki wielkie z góry za pomoc, bo się z tym gryzę http://www.forumweb.pl/images/smiles/icon_mad.gif

Bazyl
09-05-2013, 23:51
Hej,

Zamknąłeś go w wąskim divie, więc jak ma być na całą szerokość?
Nad nim i pod nim daj 960px czy ile tam masz, a ten 100%

alibaba_81
10-05-2013, 00:26
hej,
on jest na 100%
z kodu:

div.ot-top-extend{ float: left; width: 100%; }
tylko ze znajduje sie w zagnieżdżonym dive i dla niego 100% to 100% dla 960px a nie dla całej szerokości strony.960px ma jego rodzic.

Bazyl
10-05-2013, 00:30
Czytałeś, co napisałem wyżej?!