Jump to content
  • 0

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


lancer666
 Share

Question

Здраствуйте помогите пожалуйста встала задача сделать таблицу из дивов 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;
}

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

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

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

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

674e813864b4.png

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

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

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

Edited by lancer666
Link to comment
Share on other sites

  • 0

<!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) вставляем бекграунд (размытый который).

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy