Сразу хотел бы сказать, что верстаю <DIV>'ами недавно, поэтому прошу не удивляться, если приведенный ниже метод является странным.
Думаю, сравнение с табличной версткой поможет пояснить суть задачи.
Например, в html можно задать фиксированный размер по вертикали, например, height=600px, и таким образом, содержимое будет растягивать табличку сколько нужно, с другой стороны, мы имеем фиксированную ширину, что позволяет выводить даже небольшие сообщения.
С Div'aми все сложнее - табличка заканчивается там, где заканчивается контент. И выходит, что
такие штуки, как поиск по сайту, будут "обрезать" дизайн.
Я ломал голову, и решил найти вот такой выход:
Сделать т.н. "подкладку". Т.е. я вывожу div'ом пустое поле с background'ом, например, height: 600px
А следующим div'ом накладываю со смещением контент: padding-top:-600px.
И таким образом, у меня сохраняется искомая ширина в 600 пикселей по вертикали, что держит дизайн.
Но проблема возникла с bottom'ом сайта, который привязывается под content, а также с модулями , завязанными под leftcol. Прилагаю шаблон. На выпадающее меню не обращайте внимания, сделано на скорую руку.
На всякий случай, вот css силь:
body {
background: url(../images/background.png) repeat-x;
margin-top:0;
margin-bottom:0;
}
#top {
width:980px;
}
#top1 {
width:953px;
height:267px;
background:blue;
}
#navarea {
width:953px;
height:67px;
background:green;
}
#separator {
width:953px;
height:600px;
background:magenta;
}
#maifield {
margin-top:-600px;
width:953px;
background:magenta;
}
#leftcolumn {
float:left;
margin-left:10px;
width:5px;
background:red;
}
#bottom {
width:953px;
height:122px;
background:green;
}
#padd {
float:right;
padding-right:1px;
}
#logo {
float:left;
margin-left:34px;
margin-top:10px;
width:240px;
height:106px;
background:yellow;
}
#home {
float:left;
margin-left:105px;
margin-top:6px;
width:25px;
height:25px;
background:yellow;
}
#mail {
float:left;
margin-left:12px;
margin-top:6px;
width:25px;
height:25px;
background:yellow;
}
#search1 {
float:left;
margin-left:14px;
margin-top:6px;
width:25px;
height:25px;
background:yellow;
}
#bottomtext1 {
float:left;
margin-top:86px;
margin-left:25px;
}
И сам код:
<body>
<center>
<div id="top">
<div id="top1">
<div id="logo"></div><a href="index.php" id="home"></a>
<a href="#" id="mail"></a>
<a href="index.php?option=com_search" id="search1"></a>
</div>
<div id="navarea">
<div id="padd">
<a href="#" onMouseOver="popup('about','about')" onMouseOut="popdown()"><img src="templates/mservice/images/nav_1.gif" width="165" border="0" id="about"></a>
<a href="#" onMouseOver="popup('shop','shop')" onMouseOut="popdown()"><img src="templates/mservice/images/nav_2.gif" width="165" border="0" id="shop"></a>
<a href="#" onMouseOver="popup('photoalbum','photoalbum')" onMouseOut="popdown()"><img src="templates/mservice/images/nav_3.gif" width="165" border="0" id="photoalbum"></a>
<a href="#" onMouseOver="popup('contacts','contacts')" onMouseOut="popdown()"><img src="templates/mservice/images/nav_4.gif" width="165" border="0" id="contacts"></a></div>
</div>
<div id="separator"></div>
<div id="top">
<div id="maifield">
<div id="leftcol"><a name="menu"></a>
<?php
if (mosCountModules( "left" )) {
mosLoadModules ( 'left',-3);
}
?>
</div>
<div class="content">
<a name="content"></a>
<?php mosMainBody(); ?>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="bottomtext1">xxx</div>
</div>
</center>
</body>
Но лучше, конечно, посмотреть шаблон с графикой.
Ломаю голову, как исправить. (как ни странно, все работает в IE7, но в Opera, FF и пр. нет)
Помогите, пожалуйста...
[вложение удалено Администратором]
01.07.2021, 13:11:51