Невидимый див посередине страницы

vvsh · May 4, 2009

Всем хай, как можно сделать невидимый див, который будет лежать поверх всех других дивов, и будет по середине страницы независимо от разрешения экрана, заранее спасибо

Edited May 4, 2009 by vvsh

Nekromancer · May 4, 2009

visiblity: hidden; z-index: 999; width: 500px; margin: 0 auto;

не вариант?

vvsh · May 4, 2009

не работает

Nekromancer · May 4, 2009

как это не работает? а ну да.. там позишн добавить нужно.. %)

или так можно

visiblity: hidden; z-index: 999; width: 500px; position: absolute; top: 0; left: 50%; margin-left: -250px;

давай лучше расскажи по подробнее для чего тебе это надо, а то так не интересно <_<

psywalker · May 4, 2009

vvsh

1) Добавь Position: relative;

2) А можно на код посмотреть? <_<

Edited May 4, 2009 by psywalker

vvsh · May 4, 2009

так такой же результат, как и с первым.

мне надо сделать форму входа посередине страницы, которая при нажатии на ссылку бут появлятся...

2) А можно на код посмотреть? ph34r.gif

на код чего?

у мя чисто белая страница с дивом и всё!

Nekromancer · May 4, 2009

<div id="centerForm"></div>
<a href="#" onClick="document.getElementById('centerForm') = function(){this.style.visibility='visible'; this.style.zIndex='999'}"></a>
<style type="text/css">
 #centerForm {position: absolute; top: 150px; left: 50%; width: 500px; margin-left: -250px; height: auto; z-index: -999; visibility: hidden;}
</style>

как то так <_< должно работать!

upd: в первых двух я прогнал, там опечатка была в visibility %)

Edited May 4, 2009 by Nekromancer

vvsh · May 4, 2009

спасибо, но js у мя есть, я просто дивы плохо знаю, поэтому не могу норм сделать, и твой вариант не пашет!

смотри, тут до центра буквам "as" еще очень далеко

Nekromancer · May 4, 2009

<!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>
<style type="text/css">
#centerForm {position: absolute; top: 150px; left: 50%; width: 500px; margin-left: -250px; height: auto; z-index: -999; visibility: hidden;}
</style>

</head>
 <body>
<div id="centerForm">fsadf</div>
<a href="#">dasda</a>
</body>
</html>

работает.. хз что с твоим компом

upd: а js я то кривой написал <_<

Edited May 4, 2009 by Nekromancer

vvsh · May 4, 2009

http://floomby.com/content/VxpT7MIhSU/ - вот твой последний пример, не вижу центра)

Nekromancer · May 4, 2009

ну ппц.. поставь text-align: center;

просто выравнивание в блоке авто по левому краю.. а так как он 500 пикселей, кажется что текст не по центру

vvsh · May 4, 2009

ну я на код не смотрел, тока на результ, а еще, блок по-высоте должен быть тоже по центру!

Nekromancer · May 4, 2009

если его высота не определена то сложнее.. а если определена то также..

#centerForm {position: absolute; top: 150px; left: 50%; top: 50%; width: 500px; margin-left: -250px; margin-top: -250px; height: 500px; text-align: center; visibility: hidden; z-index: -999;}

</style>

vvsh · May 4, 2009

высоту блока я задам, я не знаю высоту экрана, и твой пример опять не пашет!

psywalker · May 4, 2009

Замутил такой Не валидный пример, не пойдёт? <_<

<!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>Div seredina</title>
<style type="text/css">
  *{ margin: 0; padding: 0;}
	 div.one, div.two, div.three { height: 50px; border: 1px solid #00F; margin-bottom: 10px;}
	 div.one { background: #900;}
	 div.two { background: #903;}
	 div.three { background: #906;}

		div#form { 
			  width: 300px; 
			  position: absolute; 
			  top: 30px; left: 50%;
			  margin-left: -150px;
			  visibility: hidden;

	   }
		  div#form form { visibility: hidden;}
		  div#form input { display: block; width: 90%; margin: 10px auto;}
		  div#form a { 
				color: #000; 
				font: bold 16px Verdana, Geneva, sans-serif; 
				display: block; 
				text-align: center; 
				visibility: visible;
		  }

		  div#form a:hover form { visibility: visible;}
</style>
</head>

<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div id="form">

	<a href="#">Ссылка для формы
	   <form action="">
		  <input type="text" />
		  <input type="password" />
		  <input type="submit" />
		  </form>
	</a>

</div>
</body>
</html>

Nekromancer · May 4, 2009

что не пашет? наверно текст находится вверху блока, а блок сам по центру экрана.. так как для див не работает vertical-align придётся либо набивать его контентом и высоту ставить не больше, либо ставить display: table-cell; токо последнее не везде работает

vvsh · May 4, 2009

нет, не пойдет

еще вариант, можно сделать таблицей, это не принципиально!

Nekromancer · May 4, 2009

upd: скачай фаер баг, говорят помогает, он тебе и покажет сразу что блок по центру, и не надо будет определять по тексту

блин, ну у меня работает,а у тебя не работает <_< таблицей?

засунь в нутрь дива таблицу по 100% вышина и ширены.. сделай 1 ячейку и поставь выравнивание по вертикале и горизонтали по центру..

Edited May 4, 2009 by Nekromancer

vvsh · May 4, 2009

блин, я забыл основы html, помоги, потом если надо что-нить на пхп (любое), помогу тебе.

Nekromancer · May 4, 2009

<!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>
<style type="text/css">
#centerForm {
position: absolute; /*Абсолютное позиционирование*/
left: 50%; /*с верху 50%*/
top: 50%; /*с низу 50%*/
width: 500px; /*ширина 500 пикселей*/
height: 300px; /*высота 300 пикселей*/
margin-left: -250px; /*отнять половину ширины*/
margin-top: -150px; /*отнять половину высоты*/
text-align: center; /*текст внутри по центру*/

}
</style>
</head>
 <body>
<div id="centerForm">fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf 
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf мм
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf м
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf 
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf мм
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf м
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf 
fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf fsadf ммfsadf </div>
</body>
</html>

вариант без таблиц с кучей контента, ща сделаю с тбалицами

<!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>
<style type="text/css">
body, html {margin: 0; padding: 0;}
#centerForm {
position: absolute; /*Абсолютное позиционирование*/
left: 50%; /*с верху 50%*/
top: 50%; /*с низу 50%*/
width: 500px; /*ширина 500 пикселей*/
height: 300px; /*высота 300 пикселей*/
margin-left: -250px; /*отнять половину ширины*/
margin-top: -150px; /*отнять половину высоты*/
text-align: center; /*текст внутри по центру*/
}
#centerForm table {width: 100%;height: 100%; text-align: center;vertical-align: middle;border-collapse: collapse;table-layout: fixed; border: 0; padding: 0; border-spacing:0; text-align: center; margin: 0; border: none;}
#centerForm td {width: 100%;height: 100%; }
</style>
</head>
 <body>
<div id="centerForm">
<table >
<tr>
<td>dasdasdas
</td>
</tr>
</table>
</div>
</body>
</html>

вот таблицей

Edited May 4, 2009 by Nekromancer

vvsh · May 4, 2009

То что надо, спасибо огромное, чуть что, обращайся!

Nekromancer · May 4, 2009

да всегда пожалуйста <_<

vvsh · May 4, 2009

http://vvsh.ru/ind.html - вот видишь какая еще проблема, нажми на Вход. перед формой слева фигня

psywalker · May 5, 2009

vvsh

Слушай, а попробуй как вариант сделать выравнивание не по центру, а по левому краю text-align: left;

Nekromancer · May 5, 2009

токо пришёл, сейчас всё норм? или надо поправить?

psywalker · May 5, 2009

Nekromancer слушай, а может он имеет ввиду тот косяк на картинке, там видишь, Импуты выравниваются по центру, получается некрасиво, может он это имеет ввиду?

Sign In

Невидимый див посередине страницы

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information