Перейти к публикации

Позиционирование DIV-ами


Рекомендованные сообщения

Привет всем! Вот пытаюсь разбираться с дивами и их позиционированием, но не совсем получается.. Может кто нибудь подсказать, как сделать правильней?

Вообщем имеется у меня ячейка в табличке, в нее вписаны два дива:

<tr>

<td class="nokia_niz" align="center">

	<div class="yota">

		<div class="wordpad">

		</div>

	</div>

</td>

</tr>
Ячейка высотой например 500 пикслей, рисунок в классе йота 150, а рисунок блокнота 441 и когда я их вставляю и пытаюсь позиционировать друг относительно друга, внизу ячейки появляется белое и пустое место, как я понял это разница расстояний по высоте. То есть ячейка у меня 500, а обе картинки 591 и как раз внизу появляется пустота по высоте 91 пиксель. Как этого избежать? Чтоб не вылезала пустота?! В ИЕ отображается нормально, а вот в мозиле и опере пустота появляется. Вот как прописаны эти два стиля:
.wordpad {background-image:url(../images/wordpad.png); background-repeat:no-repeat; width:706px; height:411px; position:relative; right:-375px; top:-221px;}

.yota {background-image:url(../images/yota.png); background-repeat:no-repeat; width:152px; height:150px; position:relative; right:485px; top:125px;}

Пробывал уже и просто писать

<div class="yota"></div><div class="wordpad"></div>

По всякрму, ну никак не могу вьехать в принцип этихъ дивов... Хелп ми(

Ссылка на сообщение
Поделиться на других сайтах

А что нужно в итоге? Чтобы ячейка была по высоте этих дивов? Тогда нужно убрать фиксированную высоту у ячейки. Или нужно, чтобы один див был прижат к верху ячейки,а второй к низу? Тогда нужно позиционированием прибивать их к верху и низу. Либо задать ячейчке вертикальное выравнивание по верху или по низу, тогда только один див нужно будет позиционированием выравнивать.

Ссылка на сообщение
Поделиться на других сайтах

Вот какая картинка творится

bfa7261852de.jpg

А надо вот так

696765eab43d.jpg

То есть чтоб это полосы белой не было, она только в мозиле появляется((

Ссылка на сообщение
Поделиться на других сайтах

Так, а как же вы хотите, если общая высота дивов больше ячейки. Каждый браузер ведет себя по-своему, т.к. от него требуют непонятного - впихнуть большое в маленькое.

Убирайте фиксированную высоту ячейки 500px или можно сделать так, чтобы картинка нижнего дива обрезалась на 91px.

А лучше покажите живой код, если он есть в сети. Может я опять что-то не понял.

Ссылка на сообщение
Поделиться на других сайтах

Так если убрать фиксированую высоту, то тогда косяк появляется и в опере сразу) Высота не главный фактор! Код в самом первом посте, сайт еще на локале, точнее шаблон!

Ссылка на сообщение
Поделиться на других сайтах

Я человек - и то не понимаю, как вы хотите впихнуть 591 в 500, а движок браузера вообще в панике наверное.

Так мало того - у вас еще wordpad имеет высоту 411, а его родитель yota 150, полный караул :blink:

Ссылка на сообщение
Поделиться на других сайтах

В итоге все делается прощу... Каждый элемент вставил отдельно картинкой тэгом <img> и просто его отпозиционировал и прикинь, браузер также как и я в норме)))

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...