Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2011, 15:03
Интересующийся
Отправить личное сообщение для София Посмотреть профиль Найти все сообщения от София
 
Регистрация: 17.04.2011
Сообщений: 12

Размещение 2 блоков по центру
Здравствуйте.
Задача следующая: есть 2 дива и их надо разместить симметрично по отношению друг к другу (как бы по центру).
Не могу доходчиво объяснить, так что привожу код.
Слева у меня див с меню, остальное - див с контентом. В этом диве уже я размещаю 2 блока.
<html>
<head>
</head>
<body>
<div id="menu" style="width:240px">
</div>
<div id="content" style="margin-left:241px">
<div id="col">
<img src="..." width="240px" style="float:left">
</div>
<div id="jew">
<img src="..." width="240px">
</div>
</div>
</body>
</html>

Насколько я поняла, в пхп нет возможности узнать ширину окна браузера, а только в JavaScript.
Добавляю после отображения дивов такой код
<script language="javascript">
/*определяю размер отступа*/
var width=Math.round((document.documentElement.clientW idth-240-240*2)/3);
document.getElementById('col').style.paddingLeft=w idth;
document.getElementById('jew').style.paddingLeft=w idth;
</script>

Отступов нет.

Возможно как-то можно через css сделать типа блок контента ширина 100%, а эти 2 блока по 50% и выровнять рисунок по центру. Но как тогда определить для блока контента, что он 100%?
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2011, 15:10
Интересующийся
Отправить личное сообщение для София Посмотреть профиль Найти все сообщения от София
 
Регистрация: 17.04.2011
Сообщений: 12

И даже когда я определила, что эти 2 блока занимают 50% от ширины блока контента и разместила их по центру, то получается, чтол отступы слева и справа от изображений в 2 раза меньше, чем между изображениями.
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2011, 15:46
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

<html><head>
<style type="text/css">
*{
  padding:0;
  margin:0}

#menu{
  width:240px;
  height:400px;
  float:left;
  background:#fcc}

#content{
  height:400px;
  margin-left:240px;
  background:#cfc}
#col, #jew{
  width:240px;
  height:240px;
  position:relative}

#col{
  left:33.3%;
  margin-left:-160px}

#jew{
  left:66.7%;
  margin-left:-160px}
</style>
</head><body>
  <div id="menu"></div>
  <div id="content">
    <img src="i1.jpg" id="col">
    <img src="i2.jpg" id="jew">
  </div>
</body></html>


Демо.
Ответить с цитированием
  #4 (permalink)  
Старый 12.05.2011, 16:10
Интересующийся
Отправить личное сообщение для София Посмотреть профиль Найти все сообщения от София
 
Регистрация: 17.04.2011
Сообщений: 12

Большое спасибо. Заработало.
Один вопрос по теории: как так получилось, что пришлось прописывать margin-left:-160px;?
Ответить с цитированием
  #5 (permalink)  
Старый 12.05.2011, 16:29
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

2/3 (или 66,6%) от размера изображения.
240 / 3 * 2 = 160
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается по щелчку на ссылке вывести div по центру экрана! Триви jQuery 6 11.03.2011 10:35
Окошко по центру OlegSmirnov Элементы интерфейса 6 01.11.2010 11:14
Как расположить элемент по центру? Cosworth (X)HTML/CSS 16 10.06.2009 16:44
Печать невидимых блоков mixeeff Events/DOM/Window 7 11.03.2009 11:41
Слой по центру окна sasyk Events/DOM/Window 2 26.01.2009 09:52