Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Позиционирование diva

#1 Алексей19076

Алексей19076
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 01 Май 2013 - 15:42

Для наглядности я по быстрому нарисовал в пайнте. Страница сайта состоит из шапки во всю длину, левой колонки где выводятся меню и некоторая инфа, центральной колонки с основным текстом, который я могу редактировать не залезая в панель управления прямо со страницы, правого блока с информерами и банерами, а так же подвала во всю длину снизу.

Идея в том, что мне нужно вывести в левую колонку дополнительную информацию об основном тексте. Сделать это через ПУ и глобальные блок левый не получиться, так как информация эта будет для каждой страницы своя. Выход вижу только один.

Через центральную колонку открываю редактирование и вставляю в HTML такой код div class="olenblok" - УРА ТОВАРИЩИ - /div (див само собой открываю и закрываю.

В CSS прописываю для класса (продублировал на рисунке вдруг не отобразиться здесь)
.olenblok {position: relative;width:200px;
bottom: 1830px;
right: 220px;
line-height: 1px;}

Замечательно вставленная информация допустим по высоте растянула этот блок на 500px. Блок переместился влево и встал как нужно мне.

И черт все бы хорошо, НО под основным текстом в центральной колонке осталось пустое место равное этим же 500 пикселям и футер не подтягивается к концу текста.

Подскажите пож. в чем загвоздка. Не особенно критикуйте. CSS я начал познавать недавно и прежде чем обратиться полтора дня искал ответ в инете.

Изображение
Изображение
ИзображениеИзображение

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 01 Май 2013 - 18:17

Алексей19076,
Так, как вы хотите, делать нельзя. Надо в левый блок выводить, иначе начинка левого блока может перекрываться с вот этим вашим olenblok-ом.

Но, как известно, если нельзя, но очень хочется, то можно.
Потому вот вам стиль, который задвинет ваш olenblok, буквально, куда угодно:
.olenblok{
  position: absolute;
  top: 400px;
  left: 0;
  width: 200px;
}
Меняя значение свойства top подберите подходящее вам его положение по вертикали.
Следует понимать, что в левом столбце должно быть достаточно _свободного_ места для размещения этого блока, иначе он может наложиться и на левый блок и на подвал.
  • 1

#3 Алексей19076

Алексей19076
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 02 Май 2013 - 09:13

yury, Спасибо Юра большое, я вчера уже понял, что нужно заменить на
position: absolute; и плясать отсюда, но на практике не успел проверить. Админам форума могу сказать спасибо за ресурс. Из более 10 аналогично заданных вопросах, только здесь мне удалось получить ответ.

Сейчас все работает нормально остается только протестировать под разное разрешение браузеров. т.к у меня ширина боди задана 1240px
  • 0


Оформление форума – IPBSkins.ru