Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2012, 23:23
Аспирант
Отправить личное сообщение для xintrea Посмотреть профиль Найти все сообщения от xintrea
 
Регистрация: 02.01.2011
Сообщений: 56

Не могу создать вложенный DIV для отступа-не учитывается padding/margin род. элемента
Здравствуйте!


Такая проблема возникла. Есть окно с тремя областями, как в классических E-mail клиентах:

Код:
+--------+--------------------------+
| Tree   | Notes                    |
|        |                          |
|        |                          |
|        |--------------------------+
|        | Text                     |
|        |                          |
|        |                          |
|        |                          |
|        |                          |
+--------+--------------------------+
Нужно чтобы в области Notes и в области Text были вложенные дивы, дающие отступы по 10px от границ. Задача простая, но я не могу ее сделать!

Проблема в том, что размер вложенного DIV-а считается безотносительно margin и padding родительского DIVA. И вложенный DIV имеет тот же размер что и родительский, просто сдвинут вправо и вниз на величину padding родительского элемента.

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

Вопрос: как обойти эту проблему? Есть ли решения?

Вот очищенный код для экспериментов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style type="text/css">

  /* ----- BEGIN reset.css ----- */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	outline: 0;
  	font-size: 100%;
  	vertical-align: baseline;
  	background: transparent;
  }
  body {
  	line-height: 1;
  }
  ol, ul {
  	list-style: none;
  }
  blockquote, q {
  	quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  	content: '';
  	content: none;
  }

  :focus {
  	outline: 0;
  }

  ins {
  	text-decoration: none;
  }
  del {
  	text-decoration: line-through;
  }

  table {
  	border-collapse: collapse;
  	border-spacing: 0;
  }
  /* ----- END reset.css ----- */


  body, html {
  height:100%;
  }

  #container {
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: #F0F0F0;
  }

  #wrapTree {
   position: absolute;
   height: 100%;
   width: 30%;
   background-color: #FF8080;
  }

  #wrapNotes {
   position: absolute;
   left: 30%;
   height: 25%;
   width: 70%;
   padding: 10px;
   background-color: #80FF80;
  }

  #wrapText {
   position: absolute;
   left: 30%;
   top: 25%;
   height: 75%;
   width: 70%;
   padding: 10px;
   background-color: #8080FF;
  }

  #tree {
   height: 100%;
   width: 100%;
   background-color: #FFF3F0;
   overflow-y:scroll;
  }

  #notes {
   height: 100%;
   width: 100%;
   background-color: #FFF3F0;
   overflow-y:scroll;
  }

  #text {
   height: 100%;
   width: 100%;
   background-color: #EFE8E8;
   overflow-y:scroll;
  }

 </style>
</head>

<body>

 <div id="container">

  <div id="wrapTree">
   <div id="tree">
     Tree
   </div>
  </div>

  <div id="wrapNotes">
   <div id="notes">
    Notes
   </div>
  </div>

  <div id="wrapText">
   <div id="text">
    Text
   </div>
  </div>

 </div>

</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2012, 16:42
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

Корявенький код. Зачем абсолютное позиционирование?
Ширину "резиновым" блокам можно (нужно) не задавать - он по умолчанию растянется на всю доступную ширину родителя. А вот по высоте (без конкретного указания) - схлопнется. Так что тут надо прописывать.
Проставьте нужную высоту, padding и уберите обёртки.
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2012, 18:20
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Резиновая вёрстка не идеальна (её придумали, но видимо забыли доделать), проблемы начинаются уже с попытки при масштабировании удержать текст (его размер) в пределах резинового блока (я был бы рад, если бы это оказалось моим недопониманием, а не реальностью)
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2012, 14:33
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от bes
её придумали
Её не придумали, текущая резиновая (речь про много колоночную 2 или больше, верстку) которая используется везде, это костыли на CSS или HTML так как никогда float или таблица для такого не задумывался. Поэму сейчас и вводят новые механизмы разметки, флексбоксы и т.д.

Сообщение от bes
проблемы начинаются уже с попытки при масштабировании удержать текст (его размер) в пределах резинового блока
не понимаю о каких проблемах идёт речь это всё решается и делается, но как я уже сказал выше это костыли, общепринятые но всё таки костыли.
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2012, 14:41
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от xintrea
как обойти эту проблему?
это не проблема, во первых блокам в нормальном потоке не нужно ставить ширину 100% она у них итак растянеться на максимум, тогда можно и падинги и марджины сатвить любые всё будет хорошо.
если всётаки нужно ширину 100% (правда даже не предполагаю зачем) то есть свойство boxsizing , загугли описание, и тогда сомжешь добавлять падинги и бордеры при ширине 100% (но не марджины)
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2012, 14:41
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Seva1986
не понимаю о каких проблемах идёт речь
под проблемами имелась ввиду невозможность сделать это средствами сss, не?
вот по этой теме говорю
Размеры шрифта и масштабирование
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2012, 15:16
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от bes
под проблемами имелась ввиду невозможность сделать это средствами сss, не?
А так это уже к адаптивной разметке относиться, это уже не просто резиновая вёрстка, раньше нельзя было, сейчас можно через @media но это не совсем красиво(много условий будет) но скоро будет можно и красиво.
Ответить с цитированием
  #8 (permalink)  
Старый 24.09.2012, 15:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

ждём когда это скоро станет стабильным
Ответить с цитированием
  #9 (permalink)  
Старый 24.09.2012, 15:58
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от bes
ждём когда это скоро станет стабильным
примерно полгода, а для остальных на тот момент 8 и 9 ослов скриптом через условные.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу сформулировать jQuery .live() для динамического DOM элемента artnik Events/DOM/Window 2 26.09.2015 23:30