Новости Joomla

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

wolfhound512

  • Новичок
  • 4
  • 0 / 0
position: relative
« : 09.07.2008, 13:44:20 »
Всем привет.
Пытался сделатьсвой шаблон и столкнулся с пробелмой: не работает стиль position:relative;
Долго не мог понять почему, в итоге пришел к выводу что это из-за !DOCTYPE
Ниже приведен пример, если убрать строку с !DOCTYPE, то relative работает
Где ошибка? Как заставить relative работать?
Код
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE">
<head>
<style>
.asd{
position: relative;
top: 300;
left: 100
}
</style>
</head>
<body>
<div class="asd">tes</div>
</body>
</html>
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: position: relative
« Ответ #1 : 09.07.2008, 13:53:05 »
position:relative; задается для родительского слоя, в который будут помещаться слои с position:absolute; так, чтобы они находились строго внутри первого
*

wolfhound512

  • Новичок
  • 4
  • 0 / 0
Re: position: relative
« Ответ #2 : 09.07.2008, 14:48:29 »
Сделал пример где я хочу сдвинуть содежимое крайних колонок в центральную колонку и чуть вниз, но они сдвигаюсться только вертикально, а в сторону никак...
Может я неправильно понял?
Код
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE">
<head>
</head>
<body>
<table border="1">
<tr>
<td width="200">
<div style="position: relative;">
<div style="position: absolute; top: 10; left: 200;">Left</div>
</div></td>
<td width="200" align="center">Center</td>
<td width="200">
<div style="position: relative;">
<div style="position: absolute; top: 10; right: 200;">Right</div>
</div></td>
</tr>
</table>
</body>
</html>
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: position: relative
« Ответ #3 : 09.07.2008, 14:52:48 »
а Вы top:10px; пишите и не забывайте про px или %
*

wolfhound512

  • Новичок
  • 4
  • 0 / 0
Re: position: relative
« Ответ #4 : 09.07.2008, 15:39:43 »
Спасибо!
Просто сколько пересмотрел всяких примеров, почти нигде px не указывается
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: position: relative
« Ответ #5 : 09.07.2008, 15:45:32 »
относительно слоев указывать px или % нужно. Таблицы не требуют этого.
*

asomnia

  • Захожу иногда
  • 183
  • 12 / 0
Re: position: relative
« Ответ #6 : 17.04.2009, 12:12:02 »
тук-стук...Тема для меня очень актуальная...Помогите советом! Все с тем же position! У меня верстка довольно таки сложного макета с дизайном.
На вложенной картинке -схематически изложено. Шапка сайта - порезанная картинка лежит в таблице, дальше вроде бы все легко - mainbody, footer...... но у меня проблемка с левыми блоками, они должны размещаться в том уголке, где в шапке есть выемка (верхний левый угол= чуть ниже). Блокам- div-ам - задано position: absolute; top 100px; - и все ok в FireFox, а вот IE требует left.... При добавлении left  - блоки смещаются, но вот ширина экрана и все ползет..и т.д. 

 Как спастись с помощью position:relative  ???
Может есть другой способ? ... плиз...уже голову сломала, как это реализовать....Заранее спасибки! Извините за тупой вопрос!

[вложение удалено Администратором]
Re: position: relative
« Ответ #7 : 08.05.2009, 19:49:20 »
Блокам- div-ам - задано position: absolute; top 100px; - и все ok в FireFox, а вот IE требует left.... При добавлении left  - блоки смещаются, но вот ширина экрана и все ползет..и т.д. 

 Как спастись с помощью position:relative  ???
Может есть другой способ? ... плиз...уже голову сломала, как это реализовать....Заранее спасибки! Извините за тупой вопрос!
может попробовать для разных браузеров разные .css подключать?
*

asomnia

  • Захожу иногда
  • 183
  • 12 / 0
Re: position: relative
« Ответ #8 : 08.05.2009, 21:38:05 »
решила свою проблему с помощью margin:-значение; .. то есть с отрицательным значением...все работает!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться