Проблемы с резиновой блочной шапкой

sig · May 14, 2009

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

Шапка имеет вид все блоки по горизонту

1div(ширина фиксирована) 2div(ширина фиксирована) 3div(ширина тянучка) 4div(ширина фиксирована)

У меня получилось реализовать только объединив 3div и 4div, и поставив 4div в правом углу 3div

Хотел спросить можно как-то реализовать что б "3div" отдельно был тянучкой ?

Edited May 14, 2009 by sig

klierik · May 14, 2009

ам.. ну можно на флотах =)

SelenIT · May 14, 2009

Можно задать для 3div левый и правый padding-и шириной в 1div+2div и 4div соответственно, а остальные за'float'ить и наложить на эти padding-и c помощью отриц. margin-ов и/или position: relative.

Searcher · May 15, 2009

Можно задать для 3div левый и правый padding-и шириной в 1div+2div и 4div соответственно, а остальные за'float'ить и наложить на эти padding-и c помощью отриц. margin-ов и/или position: relative.

Не padding-и, а margin-ы с левой стороны по суммарной ширине двух левых блоков, а с правой по ширине правого блока. А блоки с фиксированной шириной сделать плавающими или позиционировать абсолютно.

psywalker · May 15, 2009

sig Так не пойдёт:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Контент</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}

 div.one { width: 100px; background: red; float: left;}
 div.two { width: 100px; background: #000; float: left;}
 div.three { width: 100px; background: #03F; float: right;}
 div.four { background: #3F3; margin: 0 100px 0 200px;}
</style>
</head>

<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">text text text text text text text text text text textext text text text text text text text text text text text text
text text text text text text text text text text text text texttext text text text text text text text text text text text texttext text text text text text text text text text text text texttext text text text text text text text text text text text texttext text text text text text text text text text text text textt text text</div>

</body>
</html>

Sign In

Проблемы с резиновой блочной шапкой

Question

sig

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information