VPF::помогите разобраться со слоями css

mixas

Дата 15.5.2008, 05:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

верстаю сайт дивами и никак не получается добиться нужного результата.
размеры и расположения слоёв в коде. Не получается растянуть контент2 на всю ширину внутреннего пространства минус 400 пикселей (контент3). и вылезло у меня там всё вниз под футер. рамка должна прилегать к краям документа, а все три контента уместиться внутри этой рамки. и чёрного цвета не должно быть видно. можно ли это как то сделать?
я уже много вариантов испробовал, вот этот с вложенными друг в друга дивами больше всех похож на правду, но весь кривой какой то.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE></TITLE>

<style type="text/css">

 * {
  padding:0;
  margin:0; }
html, body {
 height:100% }
body {
  position:relative;
  }
#header {
  background-color:#0028af;
  top:0px;
  left:0pt;
  width:100%;
  height:100px; }
#left {
  height:100%;
  background-color: #00afaf;
  top:100px;
  left:0pt;
  position:absolute;
  width:10px;
  bottom: 30px; }
#right {
  background-color:#00afaf;
  height:100%;
  top:100px;
  position:absolute;
  width:10px;
  bottom: 30px;
  right:0pt; }
#content1 {
  background-color: #FFF000;
  margin-top:0px;
  margin-right:11px;
  margin-left:11px;
  height:15%;
  overflow-y: auto;
  overflow-x:hidden; }
#content2 {
  background-color: #FF5400;
  right:400px;
  bottom:30px;
  height:100%;
  width:60%;
  margin-left:10px;
  float:left;
  overflow-y: auto;
  overflow-x:hidden;
  }
#content3 {
  background-color: #FDB900;
  bottom:30px;
  right:0pt;
  height:100%;
  width:400px;
  float:right;
  overflow-y: auto;
  overflow-x:hidden;
  }
#footer {
  background-color: #0008af;
  width:100%;
  height:30px;
  bottom:0pt;
  left:0pt;
  position:absolute;
  right:0pt; }
#all {
  margin:0px;
  background-color: #000000;
  height:100%;
  width:100%; }
#midd {
  margin:0px;
  background-color: #000000;
  height:100%;
  width:100%; }
#midd2 {
  margin:0px;
  background-color: #000000;
  height:100%;
  width:100%; }
#midd3 {
  margin:0px;
  background-color: #000000;
  height:85%;
  width:100%; }
   }

</style>

</HEAD>
<BODY>
<div id="all">
  <div id="header">&nbsp;Шапка 100% х 100рх</div>
  <div id="midd">&nbsp;
    <div id="left">&nbsp;</div>
    <div id="midd2">
      <div id="content1">&nbsp;content1<br /> высота: 15% внутреннего пространства. т.е. 100% - 100рх (шапка) - 30рх (футер)<br />ширина 100% внутреннего пространства. т.е. 100% - 10рх (левая рамка) - 10рх (правая рамка)</div>
      <div id="midd3">
         <div id="content2">&nbsp;content2<br /> высота: 85% внутреннего пространства. <br />ширина: 100% внутреннего пространства.  - 400рх (content3)</div>
         <div id="content3">&nbsp;content3<br /> высота: 85% внутреннего пространства. <br />ширина: 400рх </div>
      </div>
    </div>
    <div id="right">&nbsp;</div>
  </div>
  <div id="footer">&nbsp;футер 100% х 30рх</div>
</div>
</BODY>
</HTML>

SergV

Дата 15.5.2008, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 197
Регистрация: 4.8.2006
Где: Германия

Репутация: нет
Всего: 1

mixas, во первых, твои height:100%; для дива по барабану, он их не принимает, только конкретное значение типа 300px. Дивы по высоте расширяются за счет контента внутри них, если высота не указана жестко.
Во вторых, для разделения по колонкам, типа left, right и content, в дивах нужно фиксированное значение ширины задавать и размещать через float.

Код


left { float: left; width:20%; // или размер в пикселях 
}
right { float: right; width: 20%; // или размер в пикселях 
}
content { float: left; width: 60%; // или размер в пикселях
}

При этом надо учитывать, что к примеру в мозиле если задать 30% - 60% - 30% будет нормально, а в IE6 правая колонка уйдёт вниз, так как для неё или контента надо меньше задать размер.

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

Ах да, насчет всей ширины - 400px, это как ты собираешься сделать, средствами ксс? Дивы, если им задать ширину в процентах, или пикселях, расширяются на столько насколько задано. Если не задана ширину, то всегда на всю ширину контейнера, в котором находится. Чтобы сделать такое как ты хочешь, нужен скрипт, который определит ширину контейнера, и отнимет от ширины 400 пикселей, а результат подставит в класс или ид дива, которому и задаётся нужный размер.

Это сообщение отредактировал(а) SergV - 15.5.2008, 12:28

Demonis

Дата 15.5.2008, 12:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 12.2.2008
Где: Санкт-Петербург

Репутация: 1
Всего: 1

Цитата(SergV @ 15.5.2008, 12:23

)

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

+1. Так же никто не запрещает использовать дивы внутри таблицы. smile

Uratsakidogi

Дата 18.5.2008, 18:26 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11

http://temp.uratsakidogi.msk.ru/mixas/
Правда высоту для желтого блока в процентах все-таки сделать не вышло.
Если бирюзовые границы по бокам и в финале должны быть однотонными, то можно обойтись одной картинкой и маргинами.

--------------------

ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »