div блок по центру

[AndreyT]

как сделать этот блок по центру

CSS:

* {
	margin:0;
	padding:0;
}
#form_comment {
	border:2px solid #333;
	color:#333;
	font:14px bold Verdana;
	position:absolute;
	padding:5px 10px;
	margin:20px;
}
#form_comment * {
	margin:4px auto;
}
.enter_email {
	width:200px;
	border:1px solid #707070;
}
.enter_message {
	width:400px;
	border:1px solid #707070;
}
.enter {
	width:150px;
	height:30px;
	float:right;
	text-transform:uppercase;
}

HTML:

<div id="form_comment">
  <form action="#" method="post" name="addcom">
    <p>Ваш email:</p>
    <p><input name="email" type="text" class="enter_email" /></p>
    <p>Ваше сообщение:</p>
    <p><textarea name="context" class="enter_message" rows="5"></textarea></p>
    <p><input name="go" type="submit" value="Отправить" class="enter" /></p>
  </form>
</div>

[slavok47]

<div align="center">

[psywalker]

<div align="center">

Ты что советуешь, срочно забудь этот ужас.

По-сабжу

Нужному блоку ширину и margin: 0 auto;

[AndreyT]

<div align="center">

этот параметр делает все содержимое блока по центру

[psywalker]

этот параметр делает все содержимое блока по центру

Этот параметр использовала моя бабушка, когда деду сайт верстала в 1946-ом году.

[AndreyT]

psywalker

это не помагает

Нужному блоку ширину и margin: 0 auto;

[psywalker]

psywalker

это не помагает

Нужному блоку ширину и margin: 0 auto;

Вопросы:

1) Ты вот этот блок выравнивать хочешь? #form_comment

2) А ты как его хочешь выровнить, по горизонтали или так и так?

3) А нахрена ты используешь position:absolute; ?

[slavok47]

Ты что советуешь, срочно забудь этот ужас.

а вопрос не подразумевает стилистику периода времени, предложил как вариант, согласен что метод зависит от места назначения, простите нуба...

[psywalker]

а вопрос не подразумевает стилистику периода времени, предложил как вариант, согласен что метод зависит от места назначения, простите нуба...

Этот метод не от чего уже зависеть не может. Нет его и всё!

[slavok47]

Этот метод не от чего уже зависеть не может. Нет его и всё!

ммм как? учту по другому, и интерсно, почему этот метод похерен

[AndreyT]

Вопросы:

1) Ты вот этот блок выравнивать хочешь? #form_comment

2) А ты как его хочешь выровнить, по горизонтали или так и так?

3) А нахрена ты используешь position:absolute; ?

1) да этот

2) по горизонтали

3) чтоб ширина блока была чучуть больше от ширины содержимого блока

[psywalker]

1) да этот

2) по горизонтали

3) чтоб ширина блока была чучуть больше от ширины содержимого блока

3) Убери абсолют и сделай как я тебе сказал.

Вот это замени не забудь margin:20px;

ммм как? учту по другому, и интерсно, почему этот метод похерен

Потому-что он старый, что тут странного.

[slavok47]

Потому-что он старый, что тут странного.

да нет странного ни чего понятно что когда то все устаревает, какой новый то?

[psywalker]

да нет странного ни чего понятно что когда то все устаревает, какой новый то?

Который я выше привёл)

[slavok47]

Ты что советуешь, срочно забудь этот ужас.

По-сабжу

Нужному блоку ширину и margin: 0 auto;

???? Это?

[AndreyT]

3) Убери абсолют и сделай как я тебе сказал.

Вот это замени не забудь margin:20px;

Потому-что он старый, что тут странного.

#form_comment {
	border:2px solid #333;
	color:#333;
	font:14px bold Verdana;
	width:auto;
	padding:5px 10px;
	margin:0px auto;
}

[slavok47]

а если диву задать класс, и в CSS использовать как .class и тд

[Infist]

#form_comment {
border:2px solid #333;
color:#333;
font:14px bold Verdana;
margin:0 auto;
width:440px;
height:220px;
}
#form_comment p{
	margin:0 20px 0 20px;
}

В IE выравнивается только если заменить Transitional на Strict, пусть спецы объяснят почему

[psywalker]

#form_comment {
border:2px solid #333;
color:#333;
font:14px bold Verdana;
margin:0 auto;
width:440px;
height:220px;
}
#form_comment p{
	margin:0 20px 0 20px;
}

В IE выравнивается только если заменить Transitional на Strict, пусть спецы объяснят почему

Не может такого быть, давай ссылку.

[Infist]

Strict

Transitional

[psywalker]

Strict

Transitional

Странная тема, наверное где-то у тебя косяк.

В общем вот тебе точно работающий код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#form_comment {
border:2px solid #333;
color:#333;
font:14px bold Verdana;
margin:0 auto;
width:440px;
height:220px;
}
#form_comment p{
	margin:0 20px 0 20px;
}
#form_comment * {
margin:4px auto;
}
.enter_email {
width:200px;
border:1px solid #707070;
}
.enter_message {
width:400px;
border:1px solid #707070;
}
.enter {
width:150px;
height:30px;
float:right;
text-transform:uppercase;
}

</style>
</head>

<body>
<div id="form_comment">
<form name="addcom" method="post" action="#">
<p>Ваш email:</p>
<p><input type="text" class="enter_email" name="email"/></p>
<p>Ваше сообщение:</p>
<p><textarea rows="5" class="enter_message" name="context"/></p>
<p><input type="submit" class="enter" value="Отправить" name="go"/></p>
</form>
</div>
</body>
</html>

[Infist]

Никаких косяков. Замени в своем коде:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

на

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

и в IE блок блок прижмется влево.

Ну точнее это и есть косяк, просто не пойму почему так.

[psywalker]

Тогда вариант такой:

Спец. для ИЕ сделай

body {text-align: center;}

#form_comment {text-align: left;}

[mishka]

Все правильно работает если доктайп правильно задавать!

Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>

</body>
</html>

Transitional:

<!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">
<head>

</head>
<body>

</body>
</html>

[psywalker]

Погоди медведь, чувак спрашивает про старый переходный доктайп, именно HTML, а ты ХHTML ему даёшь.

[mishka]

Недосмотрел

strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>

</body>
</html>

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

</head>
<body>

</body>
</html>

Edited February 14, 2010 by mishka2