Абсолютное и статическое позиционирование

otmoroz095 · October 20, 2010

Доброе время суток.

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

Пример:

<body>
<div id='весь сайт'>
весь контент
</div>
<div id='menu'>абсолютно позиционированно так, чтобы оно было слева от контента
</div>
</body>

Абсолютное позиционированние нужно для СЕО. То есть контент должен быть выше менюшки.

Помогите разобраться, пожалуйста! В поиске не нашел

Great Rash · October 20, 2010

Абсолютное позиционирование тут не нужно.

http://brunildo.org/test/lf100r.html

otmoroz095 · October 20, 2010

Спасибо за пример!

то есть блоку с меню нужно выставить отрицательный маргин на величину его ширины (во выдал!), при условии, если правая часть резиновая?

А что делает .clear?

Great Rash · October 20, 2010

clear - возвращает float-элемент в поток.

otmoroz095 · October 20, 2010

не работает у меня. к сожалению ссылку не могу дать, вот скрин:

Great Rash · October 20, 2010

У вас макет 2 колонки или 3?

psywalker · October 20, 2010

А такой вариант не прокатит?

http://psywalker.ru/Forum/Column/Untitled-2.html

otmoroz095 · October 20, 2010

1 или 2 или 3 - рисую шаблон для Друпала 6-го

Great Rash · October 20, 2010

Постом выше нормальный пример

otmoroz095 · October 20, 2010

эммм... прокатит, но я ничего не понял - запутался в отступах. сейчас скопипастю, закомментирую для себя и отпишусь Спасибо!

А такой вариант не прокатит?
http://psywalker.ru/Forum/Column/Untitled-2.html

Постом выше нормальный пример

спасибо, отпишусь попозже!

	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}

как так получилось, что везде float:left и при этом пример работает?

понял примерно. каждый блок обтекает друг друга (кроме футера). а отступами они ставятся на свои места. круто!

а это правильно? то есть валидно и кроссбраузерно?

в любом случае спасибо за помощь!

З.Ы.: как я понял никто не использует абсолютное позиционирование7 а почему?

Edited October 20, 2010 by otmoroz095

Great Rash · October 20, 2010

З.Ы.: как я понял никто не использует абсолютное позиционирование7 а почему?

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

otmoroz095 · October 20, 2010

ух ты! вы только посмотрите каким я был умным всего лишь 1,5 часа назад!

с примером у меня не получается, левая колонка у меня справа, а правая справа в контенте

думаю передохнуть надо до завтра...

otmoroz095 · October 22, 2010

не могу найти ошибку! помогите, плиз

http://citydog.radiushosting.ru/index.html

Great Rash · October 22, 2010

Вы неправильно подходите к делу.

1) Для начала сотрите весь ваш код и начните с чистого листа.

2) Потом сохраните документ в нужной кодировке (если уж вы прописываете, что у вас UTF-8, то и сохраняйте документ в кодировке UTF-8, сейчас у вас документ сохранен в ANSI)

3) Создайте только не обходимые для основного каркаса блоки (хедер, футер, левую и правую колонки, центральную колонку и обертки (wrapper))

4) Когда ваш каркас будет нормально выглядеть во всех браузерах приступайте к наполнению (меню, заголовки, внутренние блоки и текст и т.п.).

Сейчас у вас мешанина из блоков, в которой вы тычетесь как слепой котенок.

otmoroz095 · October 22, 2010

ничего не получается (( плавающие элементы - это жесть.

я бы взял уже готовый макет, но мне главное вникнуть!

Great Rash · October 22, 2010

Вам psywalker уже давал готовый макет. Что вам в нем не понятно?

otmoroz095 · October 22, 2010

как работает это все. точнее как и зачем выставлять отрицательные отступы и как отцентрировать сайт в таком макете (( Вы извините, я сам понимаю, что туплю =(

otmoroz095 · October 22, 2010

вот код psywalker :

	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}

вот мой:

* {
	margin:0px;
	padding:0px;
	border:2px solid gray;
	}
.right {
	float:left;
	width:150px;
	margin-left:-150px;
	display:inline;
	}
.wrapper {
	width:100%;
	float:left;
	background:#ccc;
	}
.content {
	margin: 0px 200px;
	}
.left {
	float:left;
	width:150px;
	margin-left:-100%;
	display:inline;
	background:#fff;
	}
.footer {
	clear:both;
	width:100%;
	height:100px;
	background:blue;
	}
	p {padding:10px}

его работает, а мой нет - где ошибка?

все!!! уррра!!!! из-за бордеров все я их удалил с особым цинизмом!

но все-равно не понял как это работает. ведь margin-left - 100% должен бы увести блок далеко влево?

Great Rash · October 22, 2010

Ок, постараюсь объяснить (хотя на пальцах это сделать сложно).

1) создаем блок-обертку для основного контента (wrap) ему говорим float: left;, чтобы он был плавающим и width: 100%;, чтобы он занимал всю ширину окна (т.к. по умолчанию плавающие блоки принимают ширину контента)

2) далее создаем левый блок (sidebar) ему тоже говорим float: left;, тогда он перенесется на следующую строку, т.к. если два float-блока не влазят по ширине контейнера (в нашем случае контейнером является <body>), то один из блоков переносится на следующую строку.

3) чтобы левый блок встал на место ему нужно назначить margin-left: -100%;, т.к. у нас все блоки плавающие значит они выведены из контекста форматирования и сдвиг одного блока (sidebar) никак не повлияет на положение другого (wrap)

4) теперь займемся правым блоком, ему аналогично задаем float: left;, но сдвигаем его влево не на 100%, а на ширину (200px), т.е. говорим ему margin-left: -200px;, тогда и правый блок встанет на место.

5) если на данном этапе начать писать текст прямо во wrap, то он не будет виден, т.к. наши сайдбары по сути плавают поверх основного блока

6) для этого мы создаем внутри блока wrap еще один контейнер (content), которому назначаем отступы справа и слева равные ширине наших правой и левой колонок соответственно (margin: 0 200px; - сверху и снизу по нулям, справа и слева по 200)

7) все, теперь можно писать текст в content и его будет прекрасно видно.

Чтобы оцентровать все скажите <body> width: 1000px; margin: 0 auto;

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html {
			font-size: 100.1%;
		}

		body {
			width: 1000px;
			margin: 0 auto;
			font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
			color: #000;
			background: #fff;
		}

		div {
			height: 300px;
		}

		.wrap {
			float: left;
			width: 100%;
			background: lightblue;
		}

		.sidebar {
			float: left;
			width: 300px;
			margin-left: -100%;
			background: red;
		}

		.right {
			float: left;
			width: 200px;
			margin-left: -200px;
			background: red;
		}

		.content {
			margin: 0 200px 0 300px;
		}
	</style>
</head>

<body>

	<div class="wrap">
		<div class="content">
			content
		</div>
	</div>
	<div class="sidebar">left</div>
	<div class="right">right</div>

</body>
</html>

otmoroz095 · October 22, 2010

а чтобы отцентрировать, нужно к диву content стили накладывать?

Ок, постараюсь объяснить (хотя на пальцах это сделать сложно).
...............
Чтобы оцентровать все скажите <body> width: 1000px; margin: 0 auto;

Спасибо Вам большое! Вот теперь все понятно! Сложная все-таки логика у плавающих элементов)

а чтобы вывести блоки по краям, а остальное отцентрировать, нужно content переименовать в inner, а внутри иннера добавить еще див content и ему назначить margin:0px auto

тогда сайт будет в центре, а сайдблоки по краям окна!

З.Ы. желательно всегда приписывать px, иначе случаются проблемы (во втором файерфоксе помоему)

баг: длинные слова в сайдблоках НЕ переносятся, а тянут окно по горизонтали...

Great Rash · October 22, 2010

З.Ы. желательно всегда приписывать px, иначе случаются проблемы (во втором файерфоксе помоему)

По спецификации CSS при нулевом значении единицы измерения приписывать не обязательно. FF2 уже давно никто не пользуется и на него можно забить.

баг: длинные слова в сайдблоках НЕ переносятся, а тянут окно по горизонтали...

Длинные слова нигде не переносятся и никогда не переносились, так что это не баг.

otmoroz095 · October 22, 2010

2-й Файерфокс сейчас есть еще во многих дистрибутивах Линукса и будет еще полгода минимум, пока они все не обновятся) но это уже другая тема! Спасибо всем за помощь! У меня експы +3

Great Rash · October 22, 2010

А я тогда эльф 80 уровня

otmoroz095 · October 22, 2010

А я тогда эльф 80 уровня

это точно хорошо, что не тролль, а то с первых 5-ти вопросов дубиной меня опустил бы

otmoroz095 · March 21, 2011

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

код:


	<div id="wrapper">
			<?php if ( $mission ): ?>
				<div id="mission"> 
			<?php print $mission ; ?>
				</div>
			<?php endif; ?>
			<div  id="content" <?php print phptemplate_body_class($left, $right); ?>>
				<div class="content_inner">
					<?php print $breadcrumb ; ?>
					<?php if ( $tabs ): ?> 
						<div class="tabs"> 
					<?php print $tabs ; ?> 
						</div> 
					<?php endif; ?>
					<?php if ( $title ): ?>
						<h2 class="title">
					<?php print $title ; ?>
						</h2>
					<?php endif; ?>
					<?php if ( $show_messages ): print $messages ; endif; ?>
					<?php print $help ; ?>
					<?php print $content ; ?>
				</div>
			</div>
		</div><!--wrapper-->
		<div id="left" class="left">
			<?php if ( $secondary_links ): ?>
				<div id="secondary">
			<?php  print theme ( 'links' , $secondary_links ); ?>
				</div> 
			<?php endif; ?> <!-- /#secondary -->
			<?php  print $left ; ?>
		</div>
			<?php if ($right): ?>
				<div id="right" class="right">
			<?php print $right; ?>
				</div>
			<?php endif ; ?>

Стили


div#right {
	float:left;
	width:200px;
	margin-left:-202px;
	margin-right:0px;
	display:inline;
	}

div#wrapper {
	float:left;
	width:100%;
	margin-top:20px;
	}

div#content  {
	border:0px solid black;
	margin-left:202px;
	margin-right:202px;
	min-width:400px;
	padding:10px;
	}
div#left {
	float:left;
	width:190px;
	margin-left:-100%;
	border-right:4px solid #da2919;
	display:inline;
	}

В каком из дивов нужно менять классы и как менять стили?

Если в #content меняю отступы - контент расплывается на 100%, перекрывая оставшийся сайдбар

otmoroz095 · March 21, 2011

осилил! если кому-то пригодится:

css:


 div#content   {
	border:0px solid black;
	min-width:400px;
	padding:10px;

	}
.sideboth{
margin-left:202px;
margin-right:202px;
}

.sideleft {
margin-left:202px;
margin-right:10px;
}

.sideright {
margin-left:10px;
margin-right:202px;
}

через php присваиваем классы диву content.

видимо у меня где-то с друпаловскими классами стили конфликтовали!

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