[HELP] Верстка div

Тема в разделе "Веб-дизайн", создана пользователем rafic, 30 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 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".
     

    Вложения:

  2. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    блокам, в которых планируется свободное расположение контента сделать position:relative, и НЕ указывать ни top ни left. Елементам внутри этих блоков position:absolute;

    + укажи width для левого и правого блока, бо флоат без width будет некоректно отображаться.
     
    rafic нравится это.
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    При проделанных операциях у меня все вышло, но появилась другая проблема - Там где у меня текст, идет фон который у меня задан на боди, а не фон того слоя, на котором я его располагаю. Как исправить?
    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;
    }
    
     

    Вложения:

  4. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    блин, честно говоря даже не могу понять из-за чего это. может у тебя где-топерекрывается css фиг его знает.. кароче пропиши .logo-slovo {background:none;} да и все тут.

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

    и еще кстати элементы с position:absolute; позиционируй с помощью свойств left, top или right, bottom, а не margin.
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Маргином я задаю на сколько мне надо отступить от края в пикселях и тд... а лефт, топ, боттом, райт будут просто лепить слой к краю в зависимости от значения.

    Если я не прав то покажи пример.
     
  6. pozerovnet

    pozerovnet

    Регистр.:
    31 янв 2008
    Сообщения:
    400
    Симпатии:
    11
    Блок с контентом советую выводить в первую очередь - полезно для того, что бы ПС любили
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Всмысле блок с контентом? у меня таких боков много, и они будут ниже. А пока я делаю верхнюю часть сайта.
     
  8. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    вот тебе код - это ответ на два твоих предыдущих вопроса
    (только 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>
    
     
    rafic нравится это.
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    См... интересный ход. Буду практиковать на следующем проекте. Этот переделывать уже влом, да и с кроссбраузерностью здесь все нормально.
     
Статус темы:
Закрыта.