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

Mei

  • Новичок
  • 3
  • 0 / 0
Возможно вопрос нубский, но Google конкретно по этому поводу ничего не подсказал.

При создании шаблона возникла проблема: для дизайна шапки сделал ее в шесть дивов, один из них, где-то посередине, должен заполнять все свободное пространство для "резиновости" шаблона в целом. Но он ни в какую не хочет этого делать!  >:(

Код шапки php
Код: php
<div id="main">
   <div id="left-bg">1</div>
       <div id="header">
     <div id="logo"><a href="index.php"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/_logo.gif" alt=""></a></div>
                 <div id="center-bg">|________resize center______|</div>
                     <div id="right-bg">1</div>
                          <div id="search">
                               <div class="module-search">
    <jdoc:include type="modules" name="user4" /></div>
                               </div>    
                           <div id="map">|____map_____|</div>
    </div>
</div>

Код CSS для этих элементов
Код: css
#main {
text-align:center;
width:100%;
height:60px;
}

#header{
text-align:center;
width:auto;
height:60px;
overflow:hidden;

}

#left-bg {
float:left;
width:25px;
height:60px;
background:url(../images/_leftup-bg.gif);
background-repeat:no-repeat;
}

#logo {
float:left;
width:50px;
height:60px;
vertical-align:middle;
background:url(../images/_box3-bg.gif);
background-repeat:repeat-x;
}


#center-bg {
float:left;
width:auto;
height:60px;
background:url(../images/_box3-bg.gif);
background-repeat:repeat-x;
}

#search {
float:right;
width:250px;
height:60px;
background:url(../images/_box3-bg.gif);
background-repeat:repeat-x;
}

#map {
float:right;
width:150px;
height:60px;
background:url(../images/_box3-bg.gif);
background-repeat:repeat-x;
}


#right-bg {
float:right;
width:25px;
height:60px;
background:url(../images/_rightup-bg.gif);
background-repeat:no-repeat;
}

Именно id="center-bg" и не даёт покоя. width 100% дает растяжку на всё пространство окна, margin-left и margin-right действуют внутри блока. Вынести наружу у меня как-то не получилось (

Огромная просьба, подскажите, как решить эту проблему! Заранее спасибо!
« Последнее редактирование: 03.03.2010, 04:49:55 от Mei »
*

Russfox

  • Захожу иногда
  • 169
  • 34 / 0
покажи картинку - чего в итоге получить хочешь. тут я думаю по другому divы расположить надо.
Что то вроде того:
  <div id="header">
     <div id="left-bg">
     <div id="right-bg">
   
     </div>
   </div>
  </div>
если делаешь резиновую верстку - то #left-bg и #right-bg наверно лучше в процентах указать
логотип в div не надо оборачивать, что мешает написать  <a id="logo" ... >
search и map в один div, сделать его абсолютным и выровнять по правому краю
*

Mei

  • Новичок
  • 3
  • 0 / 0
Вот нечто такое получалось. banner - это уже следующий div.




Сейчас попробую предложенный вариант.
*

Mei

  • Новичок
  • 3
  • 0 / 0
Russfox, спасибо! Особенно за предложение с логотипом) Жаль, что карму поставить не могу (
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кривая верстка в опере

Автор Kami

Ответов: 3
Просмотров: 2453
Последний ответ 09.06.2011, 06:38:16
от Kami
Как сделать шапку резиновой?

Автор Simon27

Ответов: 2
Просмотров: 2457
Последний ответ 18.12.2010, 15:36:09
от Simon27
Изменение ширины позиций модулей

Автор sava36

Ответов: 2
Просмотров: 5272
Последний ответ 03.02.2010, 17:00:08
от sava36