[HELP] Верстка div

Статус
В этой теме нельзя размещать новые ответы.
rafic

rafic

Местный житель
Регистрация
14 Май 2008
Сообщения
477
Реакции
24
HTML: 
	<div class="content">

		<div class="content-top">
		content top
		</div>

		<div class="block-left">			
		block left
		</div>
		
		<div class="block-right">
		block right
		</div>
		
	</div>

Код: 
/* Content */
.content{
	background: #fff;
	width: 100%;
	height: 800px;

}
.content-top{
	background: url(../images/content-top-bg.jpg) repeat-x;
	width:100%;
	height:156px;
}
.block-left{
	background: #fff;
	float:left;
	padding-left: 10px;
	padding-right: 10px;
}
.block-right{
	background: #fff;
	float:right;
	padding-left: 10px;
	padding-right: 10px;
}
/* End Content */
Задача состоит в том, чтобы добиться расположение которое показано на вложении. Но сделать это так. Что бы внутри разноцветных блоков (слой 2,3,4) я мог свободно управлять контентом, размещением в них логотипов, кнопок и тд. И чтобы это размещение не влияло на контент в других блоках. Подскажите как сделать, а то мучаюсь с позициаями абсолютными и реальными, но не получается.

Пробовал сделать "слою 1" позицию абсолютную, а слоям которые в нем - реальную. Но тогда если я делаю паддинг-топ в "слое 4", то у меня сдвигаются в низ "слои 2,3".
 

Вложения

  • Безымянный.JPG
    Безымянный.JPG
    20,7 KB · Просмотры: 6
блокам, в которых планируется свободное расположение контента сделать position:relative, и НЕ указывать ни top ни left. Елементам внутри этих блоков position:absolute;

+ укажи width для левого и правого блока, бо флоат без width будет некоректно отображаться.
 
При проделанных операциях у меня все вышло, но появилась другая проблема - Там где у меня текст, идет фон который у меня задан на боди, а не фон того слоя, на котором я его располагаю. Как исправить?
HTML: 
	<div class="content">
		<div class="content-top">
		     <div class="logo-slovo"> eee csdvcsdfvs </div>
		</div>
		<div class="block-left">			
		block left
		</div>
		<div class="block-right">
		block right
		</div>
	</div>
Код: 
.logo-slovo{
	margin-top:29px;	
	position: absolute;
}
.content{
	background: #fff;
	width: 100%;
	height: 800px;
	padding-top: 20px;
}
.content-top{
	background: url(../images/content-top-bg.jpg) repeat-x;
	width: 100%;
	height: 156px;
	position: relative;
}
.block-left{
	background: #fff;
	float: left;
	width: 535px;
	padding-left: 10px;
	padding-right: 5px;
	position: relative;
}
.block-right{
	background: #fff;
	float: right;
	width: 535px;
	padding-left: 5px;
	padding-right: 10px;
	position: relative;
}
 

Вложения

  • Безымянный.JPG
    Безымянный.JPG
    7 KB · Просмотры: 4
блин, честно говоря даже не могу понять из-за чего это. может у тебя где-топерекрывается css фиг его знает.. кароче пропиши .logo-slovo {background:none;} да и все тут.

но скорее всего что-то с цсс не так, потому как свойство background не наследуется ведь.

и еще кстати элементы с position:absolute; позиционируй с помощью свойств left, top или right, bottom, а не margin.
 
Маргином я задаю на сколько мне надо отступить от края в пикселях и тд... а лефт, топ, боттом, райт будут просто лепить слой к краю в зависимости от значения.

Если я не прав то покажи пример.
 
Блок с контентом советую выводить в первую очередь - полезно для того, что бы ПС любили
 
pozerovnet написал(а):
Блок с контентом советую выводить в первую очередь - полезно для того, что бы ПС любили
Нажмите для раскрытия...
Всмысле блок с контентом? у меня таких боков много, и они будут ниже. А пока я делаю верхнюю часть сайта.
 
вот тебе код - это ответ на два твоих предыдущих вопроса
(только Css надо конечно же в один файл выносить)
Код: 
<html>
<style>
body {background:white; text-align:center;}
#conteiner {width:750px; margin:0 auto; text-align:left;}
#content {position:relative; width:450px; margin:150px 150px 100px}
#content h1 {position:absolute; top:30px; left:45px; background:red}
#top {position:absolute; height:150px; width:750px; background-color:#ddd; top:-150px; left:-150px;}
#sidebar1 {position:absolute; height:auto; width:150px; background-color:#bbb; top:0; left:-150px; padding:0 0 100px 0;}
#sidebar2 {position:absolute; height:auto; width:150px; background-color:#bbb; top:0; right:-150px; padding:0 0 130px 0;}
#bottom {position:absolute; height:100px; width:750px; background-color:#999; bottom:-100px; left:-150px;}
</style>
<body>
<div id="conteiner">
<div id="content">
<h1>H1</h1>
изъян атомарный символик безродных
всосала в двенадцать утопшая хворь!
да здравствует преданный пробкой бесплодной
жестокий, скрипучий, убогий ковёр!
конец аритмичный традиций лупастых
взбугрила к обеду сиамская слизь!
да сгинет пусть стриженный книгой брюхастой
остывший, ходячий, гремучий эскиз!
изъян атомарный символик безродных
всосала в двенадцать утопшая хворь!
да здравствует преданный пробкой бесплодной
жестокий, скрипучий, убогий ковёр!
конец аритмичный традиций лупастых
взбугрила к обеду сиамская слизь!
да сгинет пусть стриженный книгой брюхастой
остывший, ходячий, гремучий эскиз!
изъян атомарный символик безродных
всосала в двенадцать утопшая хворь!
<div id="top">top</div>
<div id="sidebar1">sidebar1 (left)</div>
<div id="sidebar2">sidebar2 (right)</div>
<div id="bottom">borrom</div>
</div>
</div>
</body>
</html>
 
См... интересный ход. Буду практиковать на следующем проекте. Этот переделывать уже влом, да и с кроссбраузерностью здесь все нормально.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху