VPF::Вопрос по floating от новичка - Форум программистов

Larrr

Дата 7.8.2009, 09:29 (ссылка)

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

Загрузка ...

Шустрый

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

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

Простите, что мы к вам с вопросами - сами мы не местные и вообще программиты, которым волею судеб надо делать верстку... smile

Вопрос такой:

Надо сделать такую штуку: http://artax.karlin.mff.cuni.cz/~aharl3am/test/v4.png

Я разделила область на 3 дива: шапка, календарик и надписи.

- Шапка фиксированной высоты, width: auto;

- Календарик и надписи должны быть тоже фиксированной высоты. Причем календарик еще должен быть фиксированной ширины, а вот див с надписями должен растягиваться в зависимости от доступной ширины.

Вопрос - как это сделать? Я пробовала простявлять календарю float: left, пробовала display: inline и еще много всякого. Ничего не получается... smile

Violator

Дата 7.8.2009, 11:21 (ссылка)

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

Загрузка ...

Бывалый

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

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

Код


<!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>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    * { margin: 0; padding: 0; }
    .top { height:30px; overflow: hidden; background: red; }
    .bottom { height:100px; overflow: hidden; background: green; padding-left: 150px; position: relative; }
    .calendar { width: 150px; height: 100px; background: blue; position: absolute; left: 0; top: 0; }
  </style>
</head>
<body>
  <div style="width: 500px;">
  <div class="container">
    <div class="top">
      Top
    </div>
    <div class="bottom">
      <div class="calendar">
        Calendar
      </div>
      Text
    </div>
  </div>
  </div>
</body>
</html>

Код


<!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>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    * { margin: 0; padding: 0; }
    .top { height:30px; overflow: hidden; background: red; }
    .bottom { height:100px; overflow: hidden; background: green; }
    .calendar { float: left; width: 150px; height: 100px; background: blue; }
    .text { height:100px; margin-left: 150px; background: orange; }
     * html .text { position:relative; left:-3px; margin-right:-3px; }
  </style>
</head>
<body>
  <div style="width: 500px;">
  <div class="container">
    <div class="top">
      Top
    </div>
    <div class="bottom">
      <div class="calendar">
        Calendar
      </div>
      <div class="text">
        Text
      </div>
    </div>
  </div>
  </div>
</body>
</html>

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