Вопросы по HTML&CSS и дизайну

pasha4ur · Повідомлення 26.08.2009 11:08

Всем привет.

Поскольку на специализированных форумах вообще мало людей, то решил создать тему на нашем классном форуме. ИМХО 100% поможете!

Начал все заново изучать, чтобы правильно делать. Почитал, что есть такая фишка DOCTYPE. Правда и проблемы везде от нее, наверное, потому что когда его не объявлял, то и работало все нормально!

Код:

Код: Виділити все

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сайт</title>
</head>
<body style="height:100%; background:#999999;">

<table height="85%" width="100%" cellpadding="6" cellspacing="0">
<tr> 
<td height="60px" colspan="2" bgcolor="#666699"><h1>Заголовок сайта</h1></td>
</tr>
<tr> 
<td  width="25%" bgcolor="#990033" valign="top">Левая колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr> 
<td height="30" colspan="2" bgcolor="#cccccc">Подвал страницы</td>
</tr>
</table>

</body>
</html>

Отображается как угодно:
1. Опера/ФФ/ИЕ7 игнорируют

Код: Виділити все

<table [b]height="85%" [/b]width="100%" cellpadding="6" cellspacing="0">

2. ИЕ6 расстягивает все непонятно как!
Зображення

Что делать? Хотел просто высоту таблицы сделать =85% от высоты экрана. Убиваю DOCTYPE и все нормально работает!

Добавлено спустя 11 минут 13 секунд:
Код выше с сайта htmlbook.ru

Добавлено спустя 6 минут 44 секунды:
Проблема решена.

В учебнике был неправильный DOCTYPE. Открыл исходник нашего форума и исправил

darkness · Повідомлення 26.08.2009 11:12

Код: Виділити все

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%; background:#999999;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сайт</title>
</head>
<body style="height:100%; background:#999999;">

<table height="85%" width="100%" cellpadding="6" cellspacing="0">
<tr>
<td height="60px !important " colspan="2" bgcolor="#666699"><h1>Заголовок сайта</h1></td>
</tr>
<tr>
<td  width="25%" height="85%" bgcolor="#990033" valign="top">Левая колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr>
<td height="30" colspan="2" bgcolor="#cccccc">Подвал страницы</td>
</tr>
</table>

</body>
</html>

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

pasha4ur · Повідомлення 26.08.2009 11:19

Где правда?
На http://www.webmakerslounge.com/html/pravilnyiy-doctype/" target="_blank пишут, что правильно:

Код: Виділити все

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

Но с ним полный бред.

Если поставить как у нас на форуме:

Код: Виділити все

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

То все ОК!

darkness · Повідомлення 26.08.2009 11:21

pasha4ur
Правильный тот который тебе больше нравится и не вызывает ошибок у валидатора.

pasha4ur · Повідомлення 26.08.2009 11:29

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

Спасибо.

Помогло.
Блин, а что оно дает? Раньше как-то и без

Код: Виділити все

<html style="height:100%; background:#999999;">

работала (и без доктайп)

Добавлено спустя 6 минут 55 секунд:

DarknesS:Правильный тот который тебе больше нравится и не вызывает ошибок у валидатора.

kekskeks · Повідомлення 26.08.2009 13:19

Хотел просто высоту таблицы сделать =85% от высоты экрана.

При объявлении doctype не получится. Тег table вообще не имеет параметра относительная высота в HTML 4.01 (сам в своё время офигел). Самое простое решение - не объявлять doctype, но о валидности с таким подходом можно сразу забыть. Как и о кроссбраузерности.

almazmusic · Повідомлення 26.08.2009 13:37

pasha4ur
ИЕ6 высоту понимает, остальные только min-height и только на первом/втором уровне, не более... внутри растянуть нельзя (но это я про блоки, хотя с таблицами так же)

kekskeks · Повідомлення 26.08.2009 13:47

almazmusic
+1.
Добавлю только, что ИЕ6 понимает высоту, но не понимает min-height))) Какими танцами с бубном это обычно грозит, даже вспоминать не хочется.

pasha4ur · Повідомлення 26.08.2009 13:47

kekskeks:
Хотел просто высоту таблицы сделать =85% от высоты экрана.
При объявлении doctype не получится. Тег table вообще не имеет параметра относительная высота в HTML 4.01 (сам в своё время офигел). Самое простое решение - не объявлять doctype, но о валидности с таким подходом можно сразу забыть. Как и о кроссбраузерности.

капец:(. В ХНТМЛ значит тоже. Такой удобный параметр был. Если объявить доктип как на этом форуме, то вроде 85% работает

almazmusic · Повідомлення 26.08.2009 13:49

kekskeks:ИЕ6 понимает высоту, но не понимает min-heigh

Он как раз и высоту и ширину понимает как min-height и min-width соответствено.

pasha4ur:В ХНТМЛ значит тоже

написали же, что без доктайпа только...

pasha4ur:Такой удобный параметр был.

выравнивать вертикально по центру в блоках тоже нельзя

много чего нельзя

добро пожаловать в наши рдяы

kekskeks · Повідомлення 26.08.2009 13:52

pasha4ur
Слушай, а зачем тебе вообще высота 85%? Если не секрет?

almazmusic · Повідомлення 26.08.2009 13:54

pasha4ur
Можно растягивать абсолютным позиционированием в родителе, приспособленном для этого...

kekskeks:а зачем тебе вообще высота 85%

"на глаз"

kekskeks · Повідомлення 26.08.2009 15:00

almazmusic

"на глаз"

Ну, я понимаю, когда контент изменяемый (регулярно) - но тогда это не так верстается.
Понимаю, когда контент статичный - тогда правильнее вообще фиксированные значения писать, и не мучиться.
Понимаю, когда нужно футер к полу придавить - но ведь там вообще другое решение.
Зачем 85% - не понимаю...

pasha4ur · Повідомлення 26.08.2009 20:05

kekskeks:Слушай, а зачем тебе вообще высота 85%? Если не секрет?

Просто, когда я первый раз полез в сайты (весной), то я попробовал таблицами верстать. Вчера с доктайпом попробовал и фиг..

Вообще-то надо 100% было. Просто я проверял, будет ли браузер хотя бы с 85% работать

almazmusic · Повідомлення 26.08.2009 20:07

kekskeks:но ведь там вообще другое решение

Вот видимо Паша его и не знает.

pasha4ur
http://habrahabr.ru/blogs/css/" target="_blank

pasha4ur · Повідомлення 26.08.2009 20:24

almazmusic:http://habrahabr.ru/blogs/css/

Спс.
Сперва прочитаю уже заново htmlbook.ru и применю на практики.
Потом буду разбираться с http://pasha4ur.narod.ru/" target="_blank

pasha4ur · Повідомлення 27.08.2009 21:16

Код: Виділити все

<!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=windows-1251">
<title>Выравнивание</title>
<style type="text/css">
#centerLayer {
 position: absolute;
 left: 0; 
 top: 0;
 right:0;
 bottom:0;
 margin:5px;
 background: #fc0; 
 border: solid 1px black; 
 padding: 10px; 
 overflow: auto;
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Почему Опера/ФФ растягивает слой, а ИЕ6 отображает его как встроенный (спан)?

almazmusic · Повідомлення 27.08.2009 21:25

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

pasha4ur · Повідомлення 27.08.2009 21:32

Та это просто из урока "также размер можно задавать с помощью left, top, right, bottom". Но оно что-то не работает в ИЕ6:(

darkness · Повідомлення 27.08.2009 21:33

almazmusic
+1

Распространенная ошибка начинающих