0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 4164 Просмотров
*

Sulpher

  • Живу я здесь
  • 2057
  • 393 / 15
  • Шаблоны и расширения Joomla
Сразу хотел бы сказать, что верстаю <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 и пр. нет)

Помогите, пожалуйста...  !!!???!!!








[вложение удалено Администратором]
*

raduga

  • Захожу иногда
  • 70
  • 75 / 2
Sulpher, если хочешь сделать стабильный и кроссбраузерный шаблон на дивах, используй вот эту технику: http://www.cssplay.co.uk/layouts/3cols.html

Эту технику с небольшими изменениями (для лучшей кроссбраузерности) я применял в шаблоне bizuniverse для joomla 1.5, можешь посмотреть на демке, там нет никаких проблем с модулями, футером и хэдером, ничто не обрезается и не заползает друг на друга.
*

Sulpher

  • Живу я здесь
  • 2057
  • 393 / 15
  • Шаблоны и расширения Joomla
raduga, рецепт с cssplay подходит лишь в том случае, если используется чистая заливка цветом. Необходим другой способ, позволяющий использовать background. Мой макет подразумевает использование узоров в качестве backgr, приведенный Вами метод, к сожалению, не подходит...
Как выйти из ситуации?
*

raduga

  • Захожу иногда
  • 70
  • 75 / 2
Мой макет подразумевает использование узоров в качестве backgr, приведенный Вами метод, к сожалению, не подходит...
Как выйти из ситуации?

Посмотреть код моего шаблона bizuniverse, там есть и заливка и background, может это то, что нужно.
*

Sulpher

  • Живу я здесь
  • 2057
  • 393 / 15
  • Шаблоны и расширения Joomla
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать?

Автор Twins

Ответов: 1
Просмотров: 57
Последний ответ 12.02.2021, 10:13:54
от AlexB
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 1
Просмотров: 75
Последний ответ 02.02.2021, 15:18:20
от vitzer
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 448
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Как сделать плавающий блок/модуль. Пример есть!

Автор Good_user

Ответов: 8
Просмотров: 10599
Последний ответ 04.04.2020, 13:49:11
от jan_dax
Как сделать отступ от абсолютного элемента?

Автор wishlight

Ответов: 6
Просмотров: 617
Последний ответ 20.04.2019, 00:06:28
от dmitry_stas