Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: div в другом div по центру  (Прочитано 35666 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Mfcer__
Команда клуба

ru
Offline Offline

« : 12-01-2007 20:17 » 

есть код

<div id="container">
<div id="inner">
</div>
</div>

Как сделать чтобы div с id равным "inner" находился по середине по горизонтали и вертикали внутри div'а container?
« Последнее редактирование: 14-12-2007 15:40 от Алексей1153++ » Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 12-01-2007 20:28 » 

Нечто вроде:

Код: (CSS)
.inner
{
  position: relative;
  left: 50%;
  width: xxx;
  margin-left: -xxx /* половину ширины */
  top: 50%;
  height: yyy;
  margin-top: -yyy /* половину высоты */
}

Это предположение - может сработать не так, как хотелось.


Я на практике получил такое:

Код: (CSS)
#login_dialog
{
    position: relative;
    width: 400px;
    margin-left: -200px;
    left: 50%;
    margin-top: 50px;
}

IE очень некрасиво отрабатывает top и left с процентами и пришлось отказаться от такого подхода. В моем случае ширина предка - 100%, посему left я оставил.
« Последнее редактирование: 12-01-2007 20:38 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 12-01-2007 20:59 » 

Еще: http://xhtml.ru/2005/05/24/vertical_centerbox/
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Mfcer__
Команда клуба

ru
Offline Offline

« Ответ #3 : 15-01-2007 07:57 » 

А как сделать так чтобы DIV находился строго поцентру страницы не зависимо что под ним находится

Необходимо также чтобы он был по вертикальной оси был сдвинут на 220px вниз

DIV находится на BODY

все перепробовал: relative, block, ...

не помогает...
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 15-01-2007 08:07 » 

position: absolute; - Это позиционирование от верхнего левого угла страницы. Далее также - left и top через проценты, z-index больше нуля, margin-left и margin-top - отрицательные, в половину ширины и высоты.

Есть еще position: fixed - относительно отображения в окне, но в IE не поддерживается.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Mfcer__
Команда клуба

ru
Offline Offline

« Ответ #5 : 15-01-2007 12:25 » 

Вся проблема свелась к написанию фунции, которая DIV с указанным id показывает рядом с картинкой при нажатии на ее

id DIV'a это contentobjstr

id IMG'a это targetobjstr

никак не могу понять что делать с targetobj...


function showOverlay(contentobjstr, targetobjstr){
if (document.getElementById){

var contentobj=document.getElementById(contentobjstr);
var targetobj=document.getElementById(targetobjstr);

contentobj.style.display=(contentobj.style.display!="block")? "block" : "none";

// ЧТО ДЕЛАТЬ С targetobj?

return false
}
else
return true
}
« Последнее редактирование: 14-12-2007 15:41 от Алексей1153++ » Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 15-01-2007 14:38 » 

Mfcer__, лично я ничего не понял из написанного... Ты чужой код правишь?


Почему у тебя идентификаторы не взяты в кавычки?

Цитата
Код: (Javascript)
contentobj.style.display!="block"
Тут есть хитрая ситуация: это свойство изначально пустое (независимо от реальности), пока ему не сделано присвоение.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #7 : 11-10-2007 09:46 » 

есть ещё способ хитрый:
      ul.c_partners li .imgbox {
         display: table-cell;
         height: 97px;
         width: 143px;
         text-align: center;
         vertical-align: middle;
      }
всё прекрасно работает. Центрируется на ура. Но если теперь туда добавить float: left; то центрирование пропадает.
И как быть?
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 11-10-2007 13:10 » 

Шильгия, а зачем float, если ты его позиционируешь по центру? Float можно задать другому блоку, который будет вложен в вышеописанный.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #9 : 12-10-2007 12:10 » 

очень не хочется дивный суп. Но именно так и пришлось сделать.
А хочется-то семантическую вёрстку.
Записан
Chuda
Гость
« Ответ #10 : 12-10-2007 16:09 » 

люди добрые, поможите!
оказывается, способ с display: table-cell и vertical-align: middle не работает в ИЕ6.
Как вот быть тут?
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 13-10-2007 15:49 » 

IE6 не поддерживает большинство значений display, а из табличных - ничего вообще.
Следует использовать таблицы, а не их иммитацию.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #12 : 14-10-2007 20:50 » 

к сожалению (а можт и к счастью), некоторые варианты раскладки таблицами реализовать невозможно никак.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines