X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> таблица из div'ов
Marf7
Marf7
Topic Starter сообщение 2.2.2011, 16:02; Ответить: Marf7
Сообщение #1


Привет всем, подскажите, как правильно реализовать вот такую таблицу из div'ов
[IMG]http://s53.radikal.ru/i142/1102/e9/2d2686b8c424t.jpg[/IMG]

Перечитал много инфы, но всё не то, уже 2 дня без вылазно, не могу собрать всё воедино...
В основном только таблицы из трех колонок и одной строки... А если добавлять по такому же принципу остальные 2 строки, то, почему-то выскакивает нижняя часть за пределы основного блока (который вокруг всех дивов)
Плюс проблема в том, что боковые дивы, которые по 20px не хотят быть такой же высоты как и центральный, они почему-то всегда одного размера (в размер с изображением в их запихнутого как бэкграунд. Пробовал поменять высоту на 100% они вылазят опять же за границы основного дива.

Вот пример того, что получается у меня...
<!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=utf-8" />
<title>Документ без названия</title>
<style>

  #container{ margin: 0px; width: 100%; position:relative; margin-bottom: 30px;}
  
  #tl   { position: absolute; left:0px;  top:0px; height: 38px; width: 20px; background:url("images/1.png"); }
  #tr  { position: absolute; right:0px; top:0px; height: 38px; width: 20px; background:url("images/3.png"); }
  #tc { text-align:right; padding-top: 10px; font-size:11px; margin-left:20px; margin-right:20px; height: 28px; background:url("images/2.png"); }
      .tl { float:left; font-weight: bold;}  

  #cl   {position: absolute; left:0; top:38px; width: 20px; background:url("images/4.png"); }
  #cr  {position: absolute; right:0; top:38px; width: 20px; background:url("images/6.png"); }
  #cc {margin-left:20px; margin-right:20px; background: #e1f5fe; }
  

  #bl   { position: absolute; left:0px; height: 17px; width: 20px; background:url("images/7.png"); }
  #br  { position: absolute; right:0px; height: 17px; width: 20px; background:url("images/9.png"); }
  #bc { position: absolute; font-size: 11px; height: 17px; text-align:right; margin-left:20px; overflow:auto; margin-right:20px; background:url("images/8.png"); }
</style>
</head>

<body>
<div id="container">
  <div id="tl">&nbsp;</div>
  <div id="tc">
    <div class="tl">текст</div>
    текст</div>
  <div id="tr">&nbsp;</div>
  <div id="cl">&nbsp;</div>
  <div id="cc">sdfgfdfgg
      <p>fdhfd</p>
    sdfdhfdjsfhs<br />hgfhgfdhgh
  </div>
  <div id="cr">&nbsp;</div>
  
  <div>
  <div id="bl">&nbsp;</div>
  <div id="bc">Текст</div>
  <div id="br">&nbsp;</div>
  </div>
</div>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 2.2.2011, 17:35; Ответить: FightInGlory
Сообщение #2


Не совсем верный подход, посмотри мой пример, по аналогии можно сделать резиновый центральный блок.
<!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=UTF-8"/>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
padding:0;
margin:0;
}
html,body,.top{
height:100%;
width:100%;
}
.middle{
float:left;
overflow:hidden;
width:100%;
height:40px;
}
.conteiner{
padding:0 20px;
height:40px;
}
.left{
background:#B5E3FF;
float:left;
margin-left:-100%;
position:relative;
width:20px;
height:40px;
}
.right{
background:#FFACAA;
float:left;
margin-left:-20px;
margin-right:-3px;
position:relative;
width:20px;
height:40px;
}
.block{
background:#000;
width:100%;
height:100%;
}
</style>
</head>

<body>
<div class="top">
<div class="middle">
<div class="conteiner">
<div class="block"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Marf7
Marf7
Topic Starter сообщение 2.2.2011, 19:16; Ответить: Marf7
Сообщение #3


Попробовал под себя переделать ваш код, т.е. под такую табличку как мне нужно... Сама табличка вроде отображается нормально, а вот боковые картинки не хотят...

<!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=UTF-8"/>
<title>Test</title>
<style type="text/css">
*{padding:0; margin:0;}
html,body,.top{width:100%;}
.middle_title{float:left; overflow:hidden; width:100%; height:38px;}
.conteiner_title{padding:0 20px; height:38px;}
.stl{ background:url("images/1.png"); float:left; margin-left:-100%; position:relative; width:20px; height:38px;}
.str{ background:url("images/3.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px; height:38px;}
.stc{ background:url("images/2.png"); width:100%; height:100%;}

.middle_center{float:left; overflow:hidden; width:100%;}
.conteiner_center{padding:0 20px;}
.scl{ background:url("images/4.png"); float:left; margin-left:-100%; position:relative; width:20px;}
.scr{ background:url("images/6.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px;}
.scc{ background: #e1f5fe; width:100%; height:100%;}

.middle_bottom{float:left; overflow:hidden; width:100%; height:17px;}
.conteiner_bottom{padding:0 20px; height:17px;}
.sbl{ background:url("images/7.png"); float:left; margin-left:-100%; position:relative; width:20px; height:17px;}
.sbr{ background:url("images/9.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px; height:17px;}
.sbc{ background:url("images/8.png"); width:100%; height:100%;}
</style>
</head>

<body>
<div class="top">
<div class="middle">
<div class="conteiner_title">
<div class="stc"></div>
</div>
</div>
<div class="ctl"></div>
<div class="str"></div>
</div>
<div class="top">
<div class="middle">
<div class="conteiner_center">
<div class="scc">dgjhfgjfhg<br />gdsfgdfgf</div>
</div>
</div>
<div class="scl"></div>
<div class="scr"></div>
</div>
<div class="top">
<div class="middle">
<div class="conteiner_bottom">
<div class="sbc"></div>
</div>
</div>
<div class="sbl"></div>
<div class="sbr"></div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 2.2.2011, 19:40; Ответить: FightInGlory
Сообщение #4


Установите себе fireBug кликайте на тот блок где не отображается картинка и будет видно из-за чего так.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Marf7
Marf7
Topic Starter сообщение 2.2.2011, 20:10; Ответить: Marf7
Сообщение #5


Нашел одну свою ошибку (всем назначил класс middle, а нужно было соответственно для каждого middle_center, middle_title, middle_bottom

Но благодаря этому действию появились только картинки по углам... А те, которые должны быть с боку не растягиваются на 100% в высоту, соответственно они имеют размер такой же как и размер изображения в них вставленное...

Как сделать, что бы боковые дивы растягивались вместе с центральным блоком?

<!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=UTF-8"/>
<title>Test</title>
<style type="text/css">
*{padding:0; margin:0;}
html,body,.top{width:100%;}
.middle_title{float:left; overflow:hidden; width:100%; height:38px;}
.conteiner_title{padding:0 20px; height:38px;}
.stl{ background:url("images/1.png"); float:left; margin-left:-100%; position:relative; width:20px; height:38px;}
.str{ background:url("images/3.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px; height:38px;}
.stc{ background:url("images/2.png"); width:100%; height:100%;}

.middle_center{float:left; overflow:hidden; width:100%;}
.conteiner_center{padding:0 20px;}
.scl{ background:url("images/4.png"); float:left; margin-left:-100%; position:relative; width:20px;}
.scr{ background:url("images/6.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px;}
.scc{ background: #e1f5fe; width:100%; height:100%;}

.middle_bottom{float:left; overflow:hidden; width:100%; height:17px;}
.conteiner_bottom{padding:0 20px; height:17px;}
.sbl{ background:url("images/7.png"); float:left; margin-left:-100%; position:relative; width:20px; height:17px;}
.sbr{ background:url("images/9.png"); float:left; margin-left:-20px; margin-right:-3px; position:relative; width:20px; height:17px;}
.sbc{ background:url("images/8.png"); width:100%; height:100%;}
</style>
</head>

<body>
<div class="top">
<div class="middle_title">
<div class="conteiner_title">
<div class="stc"></div>
</div>
</div>
<div class="stl"></div>
<div class="str"></div>
</div>
<div class="top">
<div class="middle_center">
<div class="conteiner_center">
<div class="scc">dgjhfgjfhggdsfgdfgf</div>
</div>
</div>
<div class="scl"></div>
<div class="scr"></div>
</div>
<div class="top">
<div class="middle_bottom">
<div class="conteiner_bottom">
<div class="sbc"></div>
</div>
</div>
<div class="sbl"></div>
<div class="sbr"></div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Marf7
Marf7
Topic Starter сообщение 2.2.2011, 20:17; Ответить: Marf7
Сообщение #6


И еще... поясните пожалуйста, для чего нужен вот этот <div class="top"> А то всё разобрал по запчастям, а этот не пойму для чего....
И нужен ли он в каждой строке...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 9.2.2011, 6:05; Ответить: Malganus
Сообщение #7


(Marf7 @ 2.2.2011, 22:17) *
И еще... поясните пожалуйста, для чего нужен вот этот <div class="top"> А то всё разобрал по запчастям, а этот не пойму для чего....
И нужен ли он в каждой строке...


html,body,.top{width:100%;}
задают ширину блока

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
 10 muratastana 1596 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) DIV'ы в строку
 0 RedEclipse 5465 29.9.2016, 17:53
автор: -RedEclipse-
Открытая тема (нет новых ответов) при выборе radio в option не скрывались div
 0 serj123 6930 17.4.2016, 17:45
автор: -serj123-
Открытая тема (нет новых ответов) Как заставить отображать несколько элементов DIV в одну строку?
 2 Aalena 4015 10.1.2016, 10:18
автор: -Aalena-
Открытая тема (нет новых ответов) Фоны в в div'ах расходятся при сужении экрана
 1 Balalaaika1 5633 2.6.2015, 19:35
автор: -Degradator-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 5:00

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet