Резиновая дивная

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

Статус темы:
Закрыта.
Модераторы: zek24
  1. rafic

    rafic

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

    есть хеадер, средняя часть и фоотер.

    хеадер высотой 300px
    средняя часть 100%
    фоотер 200px
    Ну и по ширине и высоте 100% все выходит. Отступы всего сайта с лева и с права составляет 26px. В общем все смотрите в приложении. Подскажите как это осуществить?
     

    Вложения:

  2. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    337
    Симпатии:
    45
    с шириной проблем не будет. просто проставь всем елементам ширину. а для проставления 100% высоты дивов используй javascript.

    если возникают трудности с проставлением 100% ширины и 26px полей, то используй враперы:

    Код:
    <div class="wrapper01">
    <div id="top">
    </div>
    </div>
    <style>
    .wrapper01 {padding:0 26px;}
    </style>
    
     
  3. farm

    farm

    Регистр.:
    8 июн 2006
    Сообщения:
    537
    Симпатии:
    106
    А вот и необязательно ;)
    Юзай сервис, только отступ 26px свой впишеш для каждого слоя.

    http://csstemplater.com/
     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    в хедере и футере просто используй width: 100%
    а по средней части есть 2 варианта

    1. делаешь у меню (ведь слева колонка меню, я верно понял?) width: 20% а у контента width: 80%

    2. делаешь у меню жесткую ширину в пикселях, например width: 200px а у контента указываешь ширину 100% но обязательно укажи отступ слева 210px
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    В общем постарался следовать советам, но у меня все равно много чего не получается.
    HTML:
    <div class="block">
    	<div class="header">Header</div>
    	<div class="center">
    		<div class="menu">Menu</div>
    		<div class="content">Content</div>
    		<i class="clear"></i>
    	</div>
    	<div class="footer">Footer</div>
    </div>
    Код:
    .clear{clear:both; height:0; display:block; overflow:hidden;}
    .block{
    	margin:0 26px 0 26px;
    }
    .header{
    	background:#ff0000;
    	height:224px;
    	width:100%;
    }
    .center{
    	margin:26px 0 26px 0;
    }
    	.menu{
    		background:#aa0000;
    		width:222px;
    	}
    	.content{
    		background:#aa0000;
    		width:100%;
    		margin-left:232px;
    }
    .footer{
    	background:#abcd00;
    	height:72px;
    	width:100%;
    }
     

    Вложения:

  6. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    для menu добавь
    Код:
    .menu {
    float:left
    }
    
    а width:100%; убери, поскольку ты указал отступы для общего контейнера .block
     
  7. Shpek

    Shpek Создатель

    Регистр.:
    21 июл 2009
    Сообщения:
    21
    Симпатии:
    0
    для фуутера тоже
    .footer {
    float:left
    }
    а то он с wrappera вылетать будет (у меня постоянна такое)

    и

    .block {
    width:100%;
    heght:100%;
    }
     
Статус темы:
Закрыта.