таблица из дивов

lancer666 · August 31, 2009

Здраствуйте помогите пожалуйста встала задача сделать таблицу из дивов 1 строка 3 столбца. Проблема в том что крайние дивы фиксированного размера шириной 8px а центральный должен растягиватся на все оставшееся место.

делал так

<div class="zone"><div class="tl"></div><div class="tc">центральный</div><div class="tr"></div></div>

не хочет все это вставать в 1 строчку ((

.zone {
height:30px;
width:100%;
display:table-row;
}

.tc{
  display: table-cell;
  background-image: url("../res/tc.png");
  float:left;
  height:30px;
  width:100%;
  left:8px;
  right:8px;
}

.tr{
  display: table-cell;
  float:left;
  background-image: url("../res/tr.png");
  background-position: top right;
  background-repeat: no-repeat;
  width:8px;
  height:30px;
}
.tl{
  display: table-cell;
  float:left;
  background-image: url("../res/tl.png");
  background-position: top left;
  background-repeat: no-repeat;
  width:8px;
  height:30px;
}

подскажите как быть пожалуйста

Great Rash · August 31, 2009

А зачем такое извращение? Может можно решить задачу иначе, проще? Что надо получить в итоге?

Ваш код не будет работать в ИЕ.

lancer666 · August 31, 2009

А зачем такое извращение? Может можно решить задачу иначе, проще? Что надо получить в итоге?
Ваш код не будет работать в ИЕ.

должен получится вот такой див при этом уголки обязательно должны быть прозрачными

так же хотелось бы отметить что верхняя часть голубоватого оттенка не однородна и это должна быть именно полска из изображения в 1px

на ie пофиг главное чтоб opera google ff отображали норм )

Edited August 31, 2009 by lancer666

Great Rash · August 31, 2009

<!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" xml:lang="en" lang="en">
<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		.container {
			width: 300px;
			background: green;
		}

		.head {
			overflow: hidden;
		}

		.head-left-corner,
		.head-right-corner,
		.foot-left-corner,
		.foot-right-corner {
			width: 20px;
			height: 20px;
			background: blue;
		}

		.head-left-corner,
		.foot-left-corner {
			float: left;
		}

		.head-right-corner,
		.foot-right-corner {
			float: right;
		}

		.head-center,
		.foot-center {
			height: 20px;
			margin: 0 20px;
			background: lightblue;
		}

		.main {
			background: silver;
		}
	</style>
</head>
<body>

	<div class="container">
		<div class="head">
			<div class="head-left-corner"></div>
			<div class="head-right-corner"></div>
			<div class="head-center"></div>
		</div>
		<div class="main">
			text text text text text text text text text text text text 
			text text text text text text text text text text text text 
			text text text text text text text text text text text text 
			text text text text text text text text text text text text 
			text text text text text text text text text text text text 
		</div>
		<div class="foot">
			<div class="foot-left-corner"></div>
			<div class="foot-right-corner"></div>
			<div class="foot-center"></div>
		</div>
	</div>

</body>
</html>

В синие дивы вставляйте свои углы. В шапку (head-center) вставляем бекграунд (размытый который).

lancer666 · August 31, 2009

спасибо )) работает на отлично ))

lancer666 · August 31, 2009

еще небольшой вопрос если задать контейнеру определенный размер то получеется что край уходит вниз( нельзя никак привязать footer строго к низу ?

		.container {
			width: 100%;
			height: 400px;
			border:1px solid;
		}

lancer666 · August 31, 2009

еще небольшой вопрос если задать контейнеру определенный размер то получеется что край уходит вниз( нельзя никак привязать footer строго к низу ?
		.container {
			width: 100%;
			height: 400px;
			border:1px solid;
		}

спасибо нашел сам ))

max999 · April 16, 2010

Great Rash, а зачем в данном случае для head установлено "overflow: hidden" ? Ведь и без него всё корректно отображается в разных браузерах.

Great Rash · April 16, 2010

Для того чтобы высота блока head зависела от высоты внутренних float-блоков, которые (как вы должны знать :unsure: ) иначе выпадают из потока.

max999 · April 16, 2010

Ну, это если бы в блоке с классом head-center было бы объёмное содержимое, то, да. Но в данном случае там кроме бэкграунда ничё нет, поэтому можно и без оверфлова обойтись.

mishka · April 16, 2010

Есть такое понятие как очистка потока. Поэтому overflow:hidden там нужен. Неверишь - посмотри в сафари

max999 · April 16, 2010

Посмотрел. Абсолютно одинаково выглядит с закомментированным оверфловом: http://webfile.ru/4430493#

Edited April 16, 2010 by max999

mishka · April 16, 2010

Ну да, так как очистку выполняет блок "head-center".

Ну а вообще так вот если прощелкать в подобных случаях очистку то баг в фф, ие, опере может и не вылезти, а вот в сафари и хроме точно будет

Sign In

таблица из дивов

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information