Разместить часть слоя под другим слоем

intcorp

Захожу иногда
456
12 / 0

Разместить часть слоя под другим слоем

« : 08.03.2011, 13:38:33 »

Пытался сделать сам, но не очень получается:
имеем блоки left center right
нужно чтобы блок center заходил под left на 10 пикс, а блок right под center на те же 10 пикс.
Пытался сделать что-то типа

Код

#left {
	float: left;
	width: 215px;
	background-color: #FFFFCC;
	height: 45px;
	z-index: 3;
	position: relative;
}
#center {
	float: left;
	height: 45px;
	width: 575px;
	z-index: 2;
	background-color: #FFCCCC;
	margin-left: -5px;
	position: relative;
}
#right {
	background-color: #99FFCC;
	float: left;
	height: 45px;
	width: 225px;
	z-index: 1;
	clip: rect(auto,auto,auto,auto);
	margin-left: -5px;
	position: relative;
}

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

« Последнее редактирование: 08.03.2011, 15:52:48 от intcorp »

Записан

kolu4iy

Захожу иногда
162
22 / 4

Re: Разместить часть слоя под другим слоем

« Ответ #1 : 08.03.2011, 16:54:58 »

Код

<div id="left">
   <div id="center">
   </div>
</div>
<div id="right"></div>

Код

#center {
  float: right;
}

а так не покатит?

Записан

http://юрист.in.ua

gdX

Глобальный модератор
995
128 / 0
Открыт к заказам по дизайну

Re: Разместить часть слоя под другим слоем

« Ответ #2 : 08.03.2011, 19:43:31 »

Получилось так:

Код: html4strict

<!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" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
	*{margin:0;padding:0;color:white;}
	#left{background:teal;z-index:100;}
	#center{background:olive;z-index:50;}
	#right{background:green;z-index:200;}
	#left,#right{width:35%;}
	#center{width:40%;}
	#left,#center,#right{float:left;position:relative;}
	#center{margin-left:-5%;}
	#right{margin-left:-5%;}
--></style>
</head>
<body>

	<div id="left">
		<h1>left</h1>
		<p>Анонс канала ITV: «Юзабилити — наука, которая была востребована еще тогда, когда такого термина даже не существовало. Сегодня же каждый второй веб-дизайнер объявляет себя специалистом по юзабилити. О том, что представляет собой эта наука на самом деле, где таятся ее корни и чего ожидать от нее в перспективе — в рассказе от первого лица.»</p>
	</div>
	<div id="center">
		<h2>center</h2>
		<p>Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный.</p>
		<p>Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный.</p>
		<p>Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный.</p>
	</div>
	<div id="right">
		<h3>right</h3>
		<p>Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный.</p>
	</div>

</body>
</html>

Записан

Источник нашей мудрости — наш опыт. Источник нашего опыта — наша глупость.
Long train running

intcorp

Захожу иногда
456
12 / 0

Re: Разместить часть слоя под другим слоем

« Ответ #3 : 08.03.2011, 20:10:15 »

То ли я что-то не замечаю, то ли туплю, но по сути стили мои и gdX одинаковы (кроме размеров в процентах), но у меня косячит, а у gdX ОК...
Понял в чем прикол. Если делать пакость типа (аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааапппппппппппппппппппппппппаааааааааппппппппппппппппппппппппппппппппппппппппппппппппппппппппппппппппппппааааааааааааааааааааа) то разрыва символов не происходит и на новую строку по высоте не переходит, если же с пробелами, то нормально.

« Последнее редактирование: 08.03.2011, 20:23:15 от intcorp »

Записан

Не работает transition для определенных элементов Автор Bozhkov2	Ответов: 5 Просмотров: 4037	12.10.2016, 17:07:41 от Bozhkov2
Как сделать такой заголовок модуля? Автор Ilhom666	Ответов: 9 Просмотров: 1768	22.03.2016, 11:55:33 от darkghost
Выставить относительно фона пункты меню ? Автор warlocksp	Ответов: 6 Просмотров: 1460	01.02.2016, 10:58:26 от warlocksp
Вставка шрифта? Автор warlocksp	Ответов: 16 Просмотров: 1632	18.01.2016, 19:04:11 от warlocksp
Удалить маркеры? Автор warlocksp	Ответов: 4 Просмотров: 2168	09.01.2016, 17:07:35 от warlocksp

Разместить часть слоя под другим слоем - Вопросы по CSS

Новости Joomla

IWS.BY VK app widget - Виджет приложения ВКонтакте для Joomla

SW JProjects v.2.5.0 - компонент каталога цифровых проектов на Joomla

Обновление Nevigen Audit v.1.3.2 для JoomShopping 5

intcorp

Разместить часть слоя под другим слоем

kolu4iy

Re: Разместить часть слоя под другим слоем

gdX

Re: Разместить часть слоя под другим слоем

intcorp

Re: Разместить часть слоя под другим слоем

Похожие темы