Нужна помощь в верстке.

140

somick

18 декабря 2007, 18:29

566

Столкнулся с такой проблемой:

нужно подвесить абсолютно позиционированный блок с заданным размером на середине страницы. Не получается :confused:

Слой висит в <body>, который имеет ширину 100%. Вот код:


#center_box {

	position:absolute;

             width: 402px;

	margin-left:30%;

	margin-right: 30%;

	top:30px;

	height:45px;

	white-space:nowrap;

}

При разрешении 1024х768 висит посредине. А при разрешении 1280х1024 30% от левого края уже далеко от середины и блок смещается влево. Правый margin, само собой игнорируется.

Подскажите пожалуйста, как выровнять посредине.

95

Ткач

18 декабря 2007, 18:36

#1

естесственно слева, вы же 30% задали от левого края

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

204

deepslam

18 декабря 2007, 18:52

#2

Попробуйте так:

#center_box {
margin:0 auto;
width: 402px;
top:30px;
height:45px;
white-space:nowrap;
}

Удаление вирусов на сайте (http://www.virusonsite.ru) | Scripto CMS - бесплатная система управления сайтом (http://www.scripto-cms.ru) |Профессиональный скрипт каталога ссылок , статей, фирм и объявлений! (http://www.scripto.ru) | Уникальный скрипт для публикации контента (http://publisher.scripto.ru)

S

140

somick

18 декабря 2007, 18:58

#3

deepslam:
Попробуйте так:

Уплывает влево =(

Эх, раньше было время - указал align=center и никаких проблем...

67

Topcrust

18 декабря 2007, 19:01

#4

а если так:


#center_box {
	border: 1px solid #c00;
	position:absolute;
	width: 402px;
	margin-left: -201px;
	left: 50%;
	margin-right: 30%;
	top:30px;
	height:45px;
	white-space:nowrap;
}

дополнение: margin-right и border есесно можно убрать... В мозилле 2.0.0.7 и ИЕ6 работает.

T4

25

tt4

18 декабря 2007, 19:01

#5

Внешний блок (пусть даже body) должен иметь атрибут text-align:center;

Внутренний блок должен иметь атрибут width:XXpx и margin:0 auto;

Ширина внутреннего блока может быть в процентах. margin может иметь отступы сверху и снизу, но справа и слева - auto. Например, корректна такая конструкция: margin:10px auto 100px auto;

S

140

somick

18 декабря 2007, 19:16

#6

Спасибо большое всем откликнувшимся! Вариант Topcrust вполне рабочий. Хотя я так и не понял, честно говоря, механизм.

tt4, Вам тоже большое спасибо, но после text-align:center; в боди я впоследствии очень замучаюсь бороться с текстом на всем сайте.

194

BrokenBrake

18 декабря 2007, 19:24

#7

Да и text-align всё равно вообще не при чем :)

127

a.fatman

19 декабря 2007, 00:15

#8

tt4:
Внешний блок (пусть даже body) должен иметь атрибут text-align:center;

Это нужно только для IE5 или IE6 в quirks mode.

***

С фиксированной шириной -- это просто:


#center_box {

	position:absolute;

           width: 402px;

	left:50%;

	top:30px;

	height:45px;

	margin-left: -201px;

}

Работает в IE5.01-IE7, Opera, FF, Safari.

Ой, не заметил пост Topcrust.

Переиграть и победить: как анализировать конкурентов для продвижения сайта

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах