Меню
Что нового?

4 колонки div'ами

Asar

Новичок
4 колонки div'ами

Задачка сверстать 4-х колоночный макетик дивами.
1-й и 4-й дивы фиксированной ширины. 2-й и 3-й - резиновые.
В случае с 3-мя колонками леплю резиновый див под всеми (z-index) и делаю отступы для его содержимого - все Ок. Но как сделать, чтобы оба средних дива были резиновыми, заполняя все оставшееся пространстов после отображения дивов фиксированной величины - не знаю.
Может, кто-нить подскажет?
 

Asar

Новичок
Пробовал. Только мне нужно, к примеру, чтобы из оставшегося после абсолютно позиционированных дивов места (ширины) у меня первый был 40%, а второй 60%. Если так и назначить - то будет отсчитываться от всей ширины, без вычета ширины фиксированных блоков. Это решается?
 
crocodile2u

crocodile2u

http://vbolshov.org.ru
в техногрете у лебедева было что-то на эту тему - конечно, не конкретное решение, но все же.

google по запросу CSS design выдал много интересного. в частности, вот эти ссылки мне показались интересными:

http://www.mardiros.net/liquid-css-layouts.html
http://www.alistapart.com/stories/journey/
 

Vital_N

Новичок
Asar
надо пробовать
вот еще неплохой ресурс
http://glish.com/css/
может нароешь чего полезного
 

Кром

Новичок
На самом деле весь этот css block-layout еще настолько сырой, что смысла заморачиваться просто нет. Все что можно нарыть в интернете, это - кривые хаки.
 
crocodile2u

crocodile2u

http://vbolshov.org.ru
Asar
Вот кстати, Кром дело говорит. Иногда значительно проще использовать таблицы. по крайней мере - пока...
 

Asar

Новичок
Да я уж тоже посмотрел...
Для фикс дизайнов и небольших резиновых нормально слоями лепится, но в моем случае, видимо, только шапку да левую колонку сделаю фиксами, а основную часть залеплю таблицей. Жаль только, что грузится это чудо будет медленно и очередность особенно не поназначаешь. Но резиновость важнее.
 
baev

baev

‹°°¬•
Команда форума
Сделать в три «колонки», а потом в среднюю два «дива» всунуть — так не пойдёт?
 
crocodile2u

crocodile2u

http://vbolshov.org.ru
baev
Принципиального отличия не будет от табличного варианта. А гемора больше однозначно..
 
flash-vkv

flash-vkv

Новичок
чтота вроде этого , но пока в IE не пошло

PHP: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#kolonA {
	background-color: #0000FF;
	width: 40%;
	position: relative;
	height: 70%;
	left: 0px;
	float: left;
	z-index: 1;
}
#kolonB {
	background-color: #990066;
	height: 90%;
	width: 60%;
	position: relative;
	right: 0px;
	float: right;
	z-index: 1;
}
#kolonA .body {
	padding-left: 10em;
}
#kolonC {
	background-color: #99FF00;
	height: 90%;
	width: 10em;
	position: absolute;
	float: left;
	z-index: 4;
	display: table-column;
	left: 1ex;
}
#kolonD {
	float: right;
	position: absolute;
	background-color: #CC99CC;
	z-index: 4;
	width: 10em;
	right: 1ex;
	height: 90%;
}
#kolonB .body {
	padding-right: 10em;
	text-align: right;
}
-->
</style>
</head>

<body>
<div id="kolonA">
  <div class="body">
 blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A blok_A 
  </div>
</div>
<div id="kolonB">
  <div class="body">
  blok_B blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  blok_B  
  </div>
</div>

<div id="kolonC">sdflgj lkjsdf gkdsfjgkj sdkf ghkjdshfk ksjd fhgkjh dsfkjghksjdhfg jsdhfgkh sdkfjhgkjdhfghjasdhgk fkg</div>
<div id="kolonD">skdfj gkjsdh fgkj hsd kfgo iaerog jodflkgj dslkg lsdkfglksdfj glkdflglsfdg dsfl</div>


</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Сверху