|
Lex
|
 |
« : 26-10-2004 21:06 » |
|
столкнулся тут с проблемкой. Не знаю как решить правильно. Суть вот в чем. есть html код
<style>
#id1|
width{ 600px;
height{ 100%;
"
</style>
<body>
<div id="id1">
Некоторое наполнение.
</div?
</body>
Как разместить этот div посередине экрана Если добавить в стили что-то типа этого:
body|text-align{ center;"
то в IE div становится посередине. (Если не указан DOCTYPE) Если ставишь полный и правильный DOCTYPE TRANSITIONAL или STRICT или же открываешь в опере, то div отображается слева. Как это сделать правильно? |
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
|
Skubent
Гость
|
|
« Ответ #1 : 27-10-2004 08:38 » |
|
Таблицей, вероятнее всего. Или в стиле div'а определить положение.
|
|
|
|
|
Записан
|
|
|
|
|
Lex
|
|
« Ответ #2 : 27-10-2004 09:04 » |
|
Хочется уйти от таблицы.
Или в стиле div'а определить положение.
Как именно? |
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
|
npak
|
|
« Ответ #3 : 27-10-2004 11:39 » |
|
Lex, воспользоваться свойством "text-align" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" contents="text/html; charset=koi8-r">
<title>Centering DIV</title>
</head>
<body>
<div style="text-align{ center">Hello!</div>
</body>
</html>
|
|
|
|
|
Записан
|
|
|
|
|
Lex
|
|
« Ответ #4 : 27-10-2004 16:54 » |
|
npak, Это даст то, что текст в диве будет отцентрирован.
А мне нужно, чтобы сам див находился посередине.
|
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
MOPO3
Ай да дэдушка! Вах...
Команда клуба
 Offline
Пол: 
Холадна аднака!
|
|
« Ответ #5 : 28-10-2004 04:28 » |
|
А что, <div align="center"> не работает ? Если нет, тогда таблица с одним целом.
|
|
|
|
|
Записан
|
MCP, MCAD, MCTS:Win, MCTS:Web
|
|
|
|
Lex
|
|
« Ответ #6 : 28-10-2004 08:40 » |
|
MOPO3, попробую(не помню делал я это или нет), но кажется это работает в IE, а опера отказывается.
|
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
MOPO3
Ай да дэдушка! Вах...
Команда клуба
Offline
Пол:
Холадна аднака!
|
|
« Ответ #7 : 28-10-2004 08:57 » |
|
Lex, если не сработает, значит тогда делай таблицей, ничего страшного в этом нет 
<table width="100%" border="0"><tr><td width="100%" align="center" valign="middle">
<div>Hello!</div></td></tr></table>
|
|
|
|
|
Записан
|
MCP, MCAD, MCTS:Win, MCTS:Web
|
|
|
|
npak
|
|
« Ответ #8 : 28-10-2004 09:04 » |
|
Lex, странная программа "опера". Если обернуть div в div, то в IE внутренний div центрируется, а в опере нет. <div style="text-align{ center">
<div style="width{ 100px"><p>Centered?</p></div>
</div>В опере текст во внутреннем div отцентрирован, но сам div выравнен влево. Попробуй такой хак, может быть тебе подойдёт. Надо выставить левое и правое поле для div равными. Такой div центрируется и в опере, и в ИЕ: <div style="margin-left{ 30%; margin-right{ 30%"><p>centered div</p></div>
|
|
|
|
|
Записан
|
|
|
|
|
Lex
|
|
« Ответ #9 : 28-10-2004 10:00 » |
|
Lex, странная программа "опера". Если обернуть div в div, то в IE внутренний div центрируется, а в опере нет. <div style="text-align{ center">
<div style="width{ 100px"><p>Centered?</p></div>
</div>В опере текст во внутреннем div отцентрирован, но сам div выравнен влево. Если бы опары была простая, то я бы и не спрашивал.  Попробуй такой хак, может быть тебе подойдёт. Надо выставить левое и правое поле для div равными. Такой div центрируется и в опере, и в ИЕ: <div style="margin-left{ 30%; margin-right{ 30%"><p>centered div</p></div>Что при этом будет с шириной div'а? мне нужен фиксированный размер в пикселях. |
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
|
npak
|
|
« Ответ #10 : 28-10-2004 11:36 » |
|
О! стандарты читать надо, однако http://www.w3.org/TR/CSS1.html#horizontal-formattingОказывается, если margin-right и margin-left выставить в auto, то броузер должен установить их равными и отцентрировать элемент. <div style="margin-left{ auto; margin-right{ auto; width{ 100px;
border-width{ thin; border-color{ green; border-style{ solid">
<p>Centered!</p>
</div>Рисует зелёный прямоугольник по центру страницы. Проверил в опере и ИЕ. |
|
|
|
|
Записан
|
|
|
|
|
Lex
|
|
« Ответ #11 : 28-10-2004 11:54 » |
|
О!, то что нужно  |
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
|
npak
|
|
« Ответ #12 : 28-10-2004 12:24 » |
|
Это очень правильная мысль Поддерживаю. |
|
|
|
|
Записан
|
|
|
|
|
Lex
|
|
« Ответ #13 : 31-10-2004 10:53 » |
|
Кстати, тут обнаружил, что если указать <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> То див не центрируется в IE6. А если сделать правильную запись <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http{//www.w3.org/TR/html4/loose.dtd">то все работает |
|
|
|
|
Записан
|
Megabyte be with you!
|
|
|
|
ilhan
Гость
|
|
« Ответ #14 : 23-07-2008 14:29 »  |
|
А в IE7 не работает,можь кто подскажет как быть?
|
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #15 : 23-07-2008 14:46 » |
|
ilhan, шо не работает?
код в студию
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
ilhan
Гость
|
|
« Ответ #16 : 23-07-2008 15:03 » |
|
вот такой класс:
#AC_mainContentRow {
position: absolute;
right: 0;
left: 0;
top: 129px;
bottom: 140px;
padding: 0;
width: 900px;
margin-left: auto;
margin-right: auto;
}
в firefox все норм, а в 7 IE пипец,неговоря уже про 6=)
|
|
|
|
|
Записан
|
|
|
|
|
ilhan
Гость
|
|
« Ответ #17 : 23-07-2008 15:14 » |
|
все решил проблему
тот же класс,только для ie7:
#AC_mainContentRow {
position: absolute;
right: 0;
left: 50%;
top: 129px;
bottom: 140px;
padding: 0;
width: 900px;
margin-left: -450px;
}
|
|
|
|
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #18 : 23-07-2008 15:59 » |
|
ilhan, это не класс, это - id.
Документацию полезно читать и знать, чем они отличаются и как их можно использовать. Например, в xhml, как в xml-документе, каждый id может быть назначен только одному элементу, хотя браузеры и переваривают множественные назначения.
С точки зрения CSS, классы и идентификаторы различаются приоритетом селектора: класс - 10, id - 100.
В IE есть трабла с процентными величинами марджина при абсолютном позиционировании.
|
|
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Chuda
Гость
|
|
« Ответ #19 : 26-07-2008 21:33 » |
|
ого! удивило!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
на календарь посмотрите, вроде как уже 21 век.
а вообще, просто делаете margin: 0 auto; — и всё, элемент посередине.
|
|
|
|
|
Записан
|
|
|
|
Aveic
Постоялец
Offline
Пол:
Yellow
|
|
« Ответ #20 : 03-08-2008 23:05 » |
|
Шильгия права =) Ну или можно воспользоваться другим вариантом: использовать отрицательные поля и абсолютое позиционирование. Допустим вот так: div.centered {
position:absolute;
left:50%;
width:1000px;
margin-left:-500px; /* левое поле по модулю должно равняться половине ширины div'а */
background:black;
}
|
|
|
|
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #21 : 04-08-2008 03:52 » |
|
Aveic, не забывай про IE - с ним будут трудности. Попробуй протестить код хотя бы в минимуме самых ходовых на сегодня браузеров: IE6, FF2 и Opera9.
|
|
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Chuda
Гость
|
|
« Ответ #22 : 04-08-2008 08:39 » |
|
те трудности, которые только в IE6, в этом случае побороть легко. Реальные трудности с абсолютным позиционированием вполне кроссбраузерные Вот как быть, если количество текста в блоке заранее неизвестно? |
|
|
|
|
Записан
|
|
|
|
Aveic
Постоялец
Offline
Пол:
Yellow
|
|
« Ответ #23 : 04-08-2008 14:08 » |
|
Aveic, не забывай про IE - с ним будут трудности. Попробуй протестить код хотя бы в минимуме самых ходовых на сегодня браузеров: IE6, FF2 и Opera9.
С этим вообще проблем нет. Opera9, FF2, IE5.5—IE8, Safari одинаково рендерят картину. те трудности, которые только в IE6, в этом случае побороть легко. Реальные трудности с абсолютным позиционированием вполне кроссбраузерные Вот как быть, если количество текста в блоке заранее неизвестно? Юзать JS. |
|
|
|
|
Записан
|
|
|
|
|
Chuda
Гость
|
|
« Ответ #24 : 04-08-2008 19:46 » |
|
|
|
|
|
|
Записан
|
|
|
|
|
