отступ снизу

smartello · 4 Окт 2005

отступ снизу

Я жутко извиняюсь, что вопрос по... чистому хтмл

Всё подогнал под спецификации w3c HTML4.1 Strict, сижу горжусь, НО! Как мне сделать оступ от нижней границы равным нулю в том случае, если сама страницы не занимает весь экран. Тоесть если отойти от спецификаций, то можно зафигачить тэг height="100%" и не париться, но...

Посоветуйте пожалуйста. А то как-то не очень эских смотрится, если не будет растягиваться страничка.

SelenIT · 4 Окт 2005

Что-то вроде такого:

Код:

html, body { height: 100%; margin: 0; padding; 0; }
html>body { height: auto; min-height: 100%; }

Возможны варианты, но обязательно нужно растянуть html (в режиме соответствия стандартам это - внешний контейнер) и дважды указать минимальную высоту контента в 100%: через min-height - для "правильных" браузеров и через height - для IE.

smartello · 4 Окт 2005

я чувствую себя глупо, но вынужден признать, что ничего не получилось, блок min-height в css не работает, а куда ещё его совать не совсем понимаю.

SelenIT · 4 Окт 2005

Естественно, это CSS. Главное здесь - это "html, body { height: 100%; }".

smartello · 5 Окт 2005

ну тогда не работает

(хотя тут уместнее грустный смайлик)

akxxiv · 5 Окт 2005

html, body { height: 100%; margin: 0; padding; 0; } html>body { height: auto; min-height: 100%; }

Кроме этого задай 100% контейнеру с текстом. а Вообще поищи на
http://webmascon.com/forum/

smartello · 5 Окт 2005

на webmscon ничего не нашёл и у самого ничего не работает. Уже голова закипает. А можено простенький рабочий пример? Ну или ссылку на сайт где это реализовано...

-~{}~ 06.10.05 00:25:

Попробую поподробнее описать ситуацию. Использую табличную вёрстку, растягиваться должна по сути одна строка, вот она:

"
<tr>
<td width="160" align="left" valign="top" bgcolor='#456789' height="100%">
<table width="100%" cellpadding="0" cellspacing="0" cla... табличкой выстроено меню...
</table>
</td>

<td bgcolor='#ffffff' valign="top" height="100%">

 òóò îòôîðìàòèðîâàííîå íàïîëíåíèå<br>
 ðåçêèå ïåðåõîäû åñòü ñìûñë ñãëàäèòü, ÷òîáû ãëàçó áûëî ïðèÿòíåå.<br>
 õîòÿ îò ïîòåðè êîíòðàñòíîñòè ñàéò ìîæåò ìíîãîå ïîòåðÿòü â ïðèâëåêàòåëüíîñòè.<br>

</td>

</tr>

вот. Строки, подсказанные выше, в CSS добавил. Вроде и высота у неё выставлена 100%, тоесть по-хорошему должна вытягиватьс, но не вытягивается...

SelenIT · 6 Окт 2005

smartello
Добавь еще

Код:

... style="height: 100%;" ...

во внешний table (вместо атрибута height, упраздненного стандартом). Кстати, ячейкам лучше задавать высоту и ширину тоже через стили, а не через атрибуты.

smartello · 6 Окт 2005

ну прогресс очевиден, но всё же, в firefox всё как клеем приклеено, хотя в ИЕ заработало (правда теперь высота больше, чем экран

)

SelenIT · 6 Окт 2005

smartello
У внешней таблицы лишь одна строка или есть строки выше/ниже? Если можешь, приведи код body + внешней таблицы полностью вместе со стилями на них. А еще лучше - дай ссылку на промежуточный результат, если он не секретный

smartello · 6 Окт 2005

сейчас спать, завтра вечером дам код
но вобщем-то про строки могу и сейчас написать, да, там есть 3 строки ещё

схематично это будет так:

PHP:

<table вот эта вот>
 <tr>
  <td height="125">
...........
  </td>
  <td height="125">
..........
  </td>
 </tr>
 <tr та самая в которой и есть текст>
  <td width="160" >
   ...............
  </td>
  <td>
    куча текста
  </td>
 </tr>
 ну и ещё 2 строчки с фиксированными высотами (30 и 65 пикселей)
</table>
  <

-~{}~ 06.10.05 03:26:

тоесть ответ на вопрос: строки есть и выше и ниже

внешняя таблица по сути равняется бади

бади не имеет атрибутов, просто <body> ну и описание в css как в примерах выше.
Стили наложены на ячейки, но они не форматируют саму таблицу, они форматируют её содержиое (формат текста, местами бэкграунды.

crocodile2u · 6 Окт 2005

Посмотри:

http://4rome.ru/vitek/html+css/table100.html

Не то, что тебе нужно?

smartello · 6 Окт 2005

crocodile2u
именно то, сейчас буду ковырять и разбираться почему же у меняне работает, спасибо

SelenIT · 6 Окт 2005

Могу предложить еще слегка экстремальный вариант реализации чего-то подобного:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Testing 100% height for TABLE with negative margins</title>
    <style type="text/css">
    html, body { width:100%; height:100%; margin:0px; padding:0px; }
    table { width:100%; border-collapse:collapse; border-spacing:0px; border-style:none; }
    td { border-collapse:collapse; padding:0px; }
    #header, #footer { position:relative; z-index: 2; }
    #header td { background:#fcc; height:125px; }
    #body { height:100%; margin-top:-125px; margin-bottom:-125px; }
    #body td { background:#ccc; }
    #menu, #content { margin-top:125px; margin-bottom:125px; }
    #menu { background: #cfc; }
    #content { background: #ffc; }
    #footer td { background:#ccf; height:125px; }
    </style>
</head>
<body>

<table id="header">
  <tr>
    <td>Header</td>
  </tr>
</table>

<table id="body">
  <tr valign="top">
    <td><div id="menu">Body: menu</div></td>
    <td><div id="content">Body: content<br /><br /></div></td>
  </tr>
</table>

<table id="footer">
  <tr>
    <td>Footer</td>
  </tr>
</table>

</body>
</html>

Код чуть сложнее, зато исключены разночтения между браузерами при "дележе" высоты между tr-ками, а также IE будет рисовать страницу поэтапно. Без особых помех можно заменить таблицы в хидере и футере на дивы. Проверено валидатором

crocodile2u · 6 Окт 2005

SelenIT
Спасибо, надо взять на заметку.
А что насчет IE 5.0 и IE5.5 ? Как они этот код воспринимают?

~~~
хотя - это уж я обнаглел - надо самому проверить, да и все тут...

smartello · 6 Окт 2005

Всё оказалось намного проще, это всё работает при XHTML 1.0 Strict,а вот в HTML 4.01 Strict IE начинает нефигово чудить

crocodile2u
ради интереса попробуй в твоём примере написать <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//RU" "http://www.w3.org/TR/html4/loose.dtd">

(Именно такой стоял у меня) и открыть в IE6
Эффект удивляет

SelenIT · 6 Окт 2005

smartello

... "-//W3C//DTD HTML 4.01 Strict//RU" "http://www.w3.org/TR/html4/loose.dtd">

Откуда ты такой странный doctype скопировал - объявляется как Strict, проверяется как loose? Ср. здесь: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

crocodile2u
Проверено в IE5.01 (Standalone на WinXP) - все по плану. Забавно, что в IE6 и FF в Quirks mode (совсем без doctype) - тоже.

crocodile2u · 6 Окт 2005

SelenIT
Еще раз - спасибо. В который раз убеждаюсь, что в вопросах [X]HTML, JS & CSS - ты просто дока

smartello · 6 Окт 2005

SelenIT
опечатка, был транзишионал, потом так ловко сменил

Вобщем, проблема решена, огромное спасибо за помощь!

отступ снизу

smartello

Новичок

SelenIT

IT-лунатик :)

smartello

Новичок

SelenIT

IT-лунатик :)

smartello

Новичок

akxxiv

Новичок

smartello

Новичок

SelenIT

IT-лунатик :)

smartello

Новичок

SelenIT

IT-лунатик :)

smartello

Новичок

crocodile2u

http://vbolshov.org.ru

smartello

Новичок

SelenIT

IT-лунатик :)

crocodile2u

http://vbolshov.org.ru

smartello

Новичок

SelenIT

IT-лунатик :)

crocodile2u

http://vbolshov.org.ru

smartello

Новичок