Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Выравнивание слоя по центру другого слоя.


Автор: Nik92 16.11.2009, 17:42
Здравствуйте, вот в чем суть проблемы: Имеется резиновая верстка сайта. Есть контент, который разделен на три части левую центральную и правую колонки. Внутри правой и левой колонок нужно разместить по центру еще один слой. потому что в зависимоости от разрешения экрана отступы от центральной колонки должны быть разными. Помогите разобраться. 
Код основного css
Код

#leftcol { /* параметры для левой коллонки */

  margin-top: 3%;

  float: left;

  width: 24.4%; 

  position: relative;

}
 #content { /* параметры для основного содержания */

  float: left;

  margin-top: 3%;


  background:

  url('images/index/fon7.png');

  width: 50%;

}
#rightcol{ /* параметры для правой коллонки */
  width: 24.4%;

  float: left;

  text-align: center;

  margin-top: 3%;

}

Код

.box, .lbox{
width:250px;

background:url('images/rcol/as2.jpg') top repeat-y;

margin-bottom: 5px;
}


и пример html кода блока которого нужно отцентровать внутри rightcol
Код

<div class="lbox">

<h3 class="r"><font class="lcoll">бла бла бла</font></h3>

<div class="in">

<p class="lcolcon">бла бла бла<p><hr></p>

</div>
</div>

Автор: Itsys 16.11.2009, 22:16
Код

<div style="position: relative; width: 25%; height: 400px; z-index: 1; float: left; border: 2px solid #008000" id="layer1">
<div style="border:1px solid #FF0000; position: absolute; top: 50%; left:50%; margin-top:-50; margin-left:-50; width: 100px; height: 100px; z-index: 2" id="layer2">
&nbsp;</div>
&nbsp;</div>
<div style="position: relative; width: 50%; height: 400px; z-index: 1; float: left; border: 2px solid #008000" id="layer1">
&nbsp;</div>
<div style="position: relative; width: 25%; height: 400px; z-index: 1; float: left; border: 2px solid #008000" id="layer1">
&nbsp;</div>

Автор: Nik92 17.11.2009, 17:01
Спасибо) Опробуем)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)