position: fixed; как установить слой по центру окна браузера без отступов сверху и заданного размера?

volonter · September 10, 2009

Доброго всем дня! Уважаемые, возникла проблема.. в одном интересном шаблоне для сайта есть такая тема- серху странички идет цветная полоса с заданной прозрачностью, при вертикальном скроллинге основное содержимое страницы как-бы подлезает под эту полосу.Изначально в шаблоне эта полоса была установлена со 100% шириной. Собственно вопрос- как сделать так, желательно при помощи CSS, чтобы эта полоса находилась по центру окна браузера с заданной шириной в 1256px.... у меня не получилось, полоска полюбому прилипает к левой кромке окна браузера.. подскажите кому не трудно, заранее благодарен!!

Вот часть CSS

#kopf_aussen {
	position: fixed; top: 0px; left: auto; right: auto;
	width: 1256px;
	height: 134px;
	margin: 0 auto;
}

#kopf_innen {
	height: 105px;
	padding: 0 6%;
	background: #00688B;
	opacity: 0.7;
	filter:alpha(opacity=70);
       width: 1256px;
}

в оригинале ширина была 100%

Edited September 10, 2009 by volonter

psywalker · September 10, 2009

Доброго всем дня! Уважаемые, возникла проблема.. в одном интересном шаблоне для сайта есть такая тема- серху странички идет цветная полоса с заданной прозрачностью, при вертикальном скроллинге основное содержимое страницы как-бы подлезает под эту полосу.Изначально в шаблоне эта полоса была установлена со 100% шириной. Собственно вопрос- как сделать так, желательно при помощи CSS, чтобы эта полоса находилась по центру окна браузера с заданной шириной в 1256px.... у меня не получилось, полоска полюбому прилипает к левой кромке окна браузера.. подскажите кому не трудно, заранее благодарен!!
Вот часть CSS
#kopf_aussen {
	position: fixed; top: 0px; left: auto; right: auto;
	width: 1256px;
	height: 134px;
	margin: 0 auto;
}

#kopf_innen {
	height: 105px;
	padding: 0 6%;
	background: #00688B;
	opacity: 0.7;
	filter:alpha(opacity=70);
       width: 1256px;
}
в оригинале ширина была 100%

1) В каком браузере проблема?

2) ИЕ6 нужен?

3) Полоса должна быть всегда, даже если будет скрол по высоте?

4) Покажи скрин того, что хочешь получить с подробным объяснением!

А пока вот тебе. Заполняй текстом и проверяй такой вариант

<!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>test</title>

	<style type="text/css">
		*{ margin: 0; padding: 0;}
			body  { overflow: auto; _height: 100%;}

			div.line {
					width: 1256px;
					height: 134px;
					background:  #F00;
					position: fixed;
					_position: absolute;
					left: 50%;
					margin-left: -628px;

					/* OPACITY */
					filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
					  filter:alpha(opacity=70); /* IE +*/
					  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
					  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
					  opacity: 0.2; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
			}

			div.wrap { width: 1000px; margin: 0 auto;}
	</style>


</head>

<body>
	<div class="line">Полоса</div>
<div class="wrap">
Доброго всем дня! Уважаемые, возникла проблема.. в одном интересном шаблоне для сайта есть такая тема- серху странички идет цветная полоса с заданной прозрачностью, при вертикальном скроллинге основное содержимое страницы как-бы подлезает под эту полосу.Изначально в шаблоне эта полоса была установлена со 100% шириной. Собственно вопрос- как сделать так, желательно при помощи CSS, чтобы эта полоса находилась по центру окна браузера с заданной шириной в 1256px.... у меня не получилось, полоска полюбому прилипает к левой кромке окна браузера.. подскажите кому не трудно, заранее благодарен!!
Вот часть CSS Доброго всем дня! Уважаемые, возникла проблема.. в одном интересном шаблоне для сайта есть такая тема- серху странички идет цветная полоса с заданной прозрачностью, при вертикальном скроллинге основное содержимое страницы как-бы подлезает под эту полосу.Изначально в шаблоне эта полоса была установлена со 100% шириной. Собственно вопрос- как сделать так, желательно примке окна браузера.. подскажите кому не трудно, заранее благодарен!!
Вот часть CSS 
</div>


</body>
</html>

Это то, что ты хотел? Если нет, то поясни чё не так!

Или попробуй ещё замени CSS на этот, мне он больше даже по душе, в ИЕ6 как то лучше смотрится

	<style type="text/css">
		*{ margin: 0; padding: 0;}


			div.line {
					width: 1256px;
					height: 134px;
					background:  #F00;
					position: fixed;
					_position: absolute;
					_top:expression(eval(document.documentElement.scrollTop));

					left: 50%;
					margin-left: -628px;

					/* OPACITY */
					filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
					  filter:alpha(opacity=70); /* IE +*/
					  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
					  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
					  opacity: 0.2; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
			}

			div.wrap { width: 1000px; margin: 0 auto;}
	</style>

Edited September 10, 2009 by psywalker

Flare · September 12, 2009

Лучше бы, конечно, видеть полный код страницы, чтобы дать ответ.

Но, исходя из имеющегося,

volonter, попробуйте убрать блок #kopf_innen, а его свойства: padding, background, opacity, filter прописать блоку #kopf_aussen.

Возможно, вы добъетесь нужного результата.

Если же ничего не получится, дайте ссылку на ваш шаблон.

Sign In

position: fixed; как установить слой по центру окна браузера без отступов сверху и заданного размера?

Question

volonter

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Flare

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information