VPF::Прилепить div вниз ячейки - Форум программистов

Dewas

Дата 23.3.2008, 20:13 (ссылка)

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

Загрузка ...

Новичок

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

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

В ячейке таблицы нужно расположить два блока текста, один прилепленый к верхней части ячейки, другой к нижней. Высота ячейки заведомо намного больше суммарной высоты блоков.
Воспользовался поиском нашел приклеивание футера к низу страницы (http://forum.vingrad.ru/forum/topic-193953.html) попробовал сделать по аналогии, итог - браузеры меня не поняли :-( Помогите решить трабл smile

Itsys

Дата 23.3.2008, 20:22 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Попробуй так:

Код


<table width="100%" height="100%">
   <tr>
      <td width="100%" heigth="0%">Текст в верху</td>
   </tr>
   <tr>
      <td width="100%" heigth="100%">Текст в середине</td>
   </tr>
   <tr>
      <td width="100%" heigth="0%">Текст в низу</td>
   </tr>
</table>

Dewas

Дата 23.3.2008, 20:26 (ссылка)

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

Загрузка ...

Новичок

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

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

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

Itsys

Дата 23.3.2008, 20:32 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

ну и что, если фон у этой таблицы задавать не будешь - она будет прозрачной и ничего с твоим фоном не случится.

Добавлено через 34 секунды
Тыж ее вкладывай в существующую ячейку, у которой уже есть фон.

Dewas

Дата 23.3.2008, 20:35 (ссылка)

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

Загрузка ...

Новичок

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

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

Мне кажется, что эту задачку можно решить так:
взять div (1й) который займет 100% ячейки, в него поместить то, что должно быть вверху ячейки и еще один div (2й) с тем, что должно быть внизу ячейки, 2й div прилепить в низ первого.
Но у меня не получается:
1. заставить 1й div занять всю ячейку таблицы по высоте;
2. привязать 2й div к низу первого (а может и получается, первый то не растягивается)

Добавлено через 1 минуту и 28 секунд

Цитата(Itsys @ 23.3.2008, 20:32)

ну и что, если фон у этой таблицы задавать не будешь - она будет прозрачной и ничего с твоим фоном не случится.

Добавлено @ 20:33
Тыж ее вкладывай в существующую ячейку, у которой уже есть фон.

Тоже вариант, сам недогадался smile

Но мне все же интересно возможно ли это сделать div-ами.

Dewas

Дата 28.3.2008, 21:42 (ссылка)

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

Загрузка ...

Новичок

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

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

Так и не смог победить эту проблему, имеется такой код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Клиники - Ассоциация стоматологических клиник Тольяттти-Дент</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="840" align="center">
  <tr>
   <td><img src="images/spacer.gif" width="139" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="701" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="headlogo" src="headlogo.png" width="840" height="139" border="0" id="headlogo" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="139" border="0" alt="" /></td>
  </tr>
  <tr>
   <td background="menuback.png" height="100%" valign="top"><table class="menu_table"> <!-- ////////// ПРОБЛЕМЫ  ЗДЕСЬ   :crazy  -->
   <tr>
      <td height="0%" bgcolor="#FF0000">Текст в верху</td>
   </tr>
   <tr>
      <td height="100%" bgcolor="#FFFF00">Текст в середине</td>
   </tr>
   <tr>
      <td height="0%" bgcolor="#00FF00">Текст в низу</td>
   </tr>
</table>
   </td>
   <td valign="top">
    <table height="100%" width="100%" border="0" bgcolor="#ECECEC">
     <tr>
         <td width="75%"><p class="header">клиники ассоциации</p></td>
          <td width="25%" rowspan="2" valign="top"><p class="additionalheader">Клиники</p>
          </td>
        </tr>
        <tr>
            <td valign="top">Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet.<br />
             Lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam.<br />
             Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet.<br />
             Lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam.<br />
             Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. <br />Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet.<br />
             Lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam.<br />
             Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet.<br />
             Lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam.<br />
             Orperat vero doloreet, corem delestrud mincidunt velenia mconsequate velesenibh eugiatisl delit nisis augiam iure magna feuguer sectet, consecte dolese eugiamet lutatet volore magnim adipsuscinim nis alisiss equatum nibh exero odipsum nisl essequip eugait, consent am, quis et praesse quipsum iurerostie modigna corem estionsequis alis nit ipsuscilla adio odolore magna consequi eugiam. </td>
        </tr>
    </table></td>
   <td><img src="spacer.gif" width="1" height="402" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2" bgcolor='#999999'></td>
   <td><img src="spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2" align="center" valign="top">О НАС | КЛИНИКИ | ДЛЯ ПАЦИЕНТОВ | ДЛЯ ПРОФЕССИОНАЛОВ | НОВОСТИ</td>
   <td><img src="spacer.gif" width="1" height="45" border="0" alt="" /></td>
  </tr>
</table>
</body>
</html>

и CSS код:

Код


html {
    padding: 0;
    margin: 0;
    min-height:100%; //    height:100%;
    background:#99FFCC;
    width:100%;
}

 body {
    width:100%;
    background:#FFCC00;
    margin:0;
    padding:0;
    min-height:100%; //    height:100%; 
}

table.menu_table {
    background:#CCCCFF;
    position:relative;
    width:100%;
    border:1px;
    margin:0;
    padding:0;
/*    height:100% !important;*/
    min-height:100%; // height:100%;
}

Проблема в менюшке слева (в коде помечено комментарием "Проблемы здесь"), как сделать так чтобы эта трехцветная табличка заняла 100% высоты ячейки в которой она расположена безотносительно к высоте самой этой ячейки (размер ячейи определяет контент в соседних ячейках).

Те же файлы прилагаю в архиве.

Это сообщение отредактировал(а) Dewas - 28.3.2008, 21:44

Присоединённый файл ( Кол-во скачиваний: 2 )

tmp.rar 53,50 Kb

Itsys

Дата 29.3.2008, 23:03 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Надо <table class="menu_table" height="100%"> и DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
IE XHTML не понимает

Dewas

Дата 30.3.2008, 10:31 (ссылка)

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

Загрузка ...

Новичок

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

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

а разве недостаточно того, что высота (height:100%) в стиле указана?

Dewas

Дата 30.3.2008, 11:16 (ссылка)

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

Загрузка ...

Новичок

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

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

IE и FireFox данное решение проглотили, Opera сказала "фи", почему?
А еще какая то проблема с кодировкой, вроде явно прописано, что utf-8, но браузеры стабильно выбирают cp1251, может быть это тоже как то мешает.

Itsys

Дата 30.3.2008, 18:29 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Для того, чтобы была utf-8, должен быть соответсвующий заголовок от сервера и сам текст в этой кодировке, а иначе все браузеры всеравно будут игнорировать твой заголовок. Они определяют кодировку по первым буквам с тексте страницы.

Dewas

Дата 30.3.2008, 22:19 (ссылка)

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

Загрузка ...

Новичок

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

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

А почему в Opere табличка не растягивается?

Itsys

Дата 30.3.2008, 23:25 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Вот чего не знаю - того не знаю. smile

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