HTML/CSS глазами Чайника. Блочная верстка.

evgenvl · June 18, 2009

В общем ничего не понимаю

Хочу разобраться с каркасом блочного сайта.

1. !<DOCTYPE> Какой указать. А именно интересует вопрос, почему у меня Mozilla не отображает страницу блочную по средствам стилей. Самое интересное, что при указывании <DOCTYPE> IE + Opera аналогично просто отображает текст. В общем мои изыскания:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="ru" />
<meta name="description" content="Здесь должно быть описания, и явно динамическое, т.е. разное для разных страниц" />
<meta name="keywords" content=" Тоже самое что и Description, почти - ключевые слова" />
<style type="text/css">
* {
margin:0;
padding:0;
}
#1 {


width: 300;
float:left;
height:500;
background:red;
}
#11 {
position:static;
margin:100 0 0 100;
width:300;
height:200;
background:#333444;
}
#12 {
position:relative;
width:300;
height:500;
background:#333222;
}
#2 {
margin:30 0 0 300;
padding: 30 0 0 30;
height:200;
background:#333555 repeat-x;
}
#3 {

height:200;
background:#333333 repeat-x;

}
li {
display:inline;
}
#4 {
width:300;

height:700;
background:green;
}
#5 {
width:300;
float:right;
height:300;
background:green;
}

</style>
<title>
Мой сайт
</title>


</head>
<body>
<div id="1"> width: 300;
float:left;
height:500;
<div id="11"> margin:100 0 0 100;
width:300;
height:200;</div>
<div id="12">position:relative;
width:300;
height:500; </div>
rytryt
</div>
<div id="2">margin:30 0 0 300;
padding: 30 0 0 30;
height:200;</div>
<div id="3">height:200;
<ul> Рубрики </ul>
<li>display:inline;</li>
<li> Чувство юмора </li>
<li> Общение </li> </div>
<div id="4"> width:300;

height:700; </div>
<div id="5">width:300;
float:right;
height:300; </div>
</body>
</html>

2. Неужели нельзя использовать padding и margin? У Оперы padding увеличивает блок на указываю величину отступа. Margin тоже во что горазд. В Опере сдвинул и соседний див от верха браузера. Также внутренний див наехал на право лежащие. Или это просто корявое отображение заливки (background), и ничего не имеет отношение к реальным блокам?

3. Почему IE отображает бордюр между левыми и правыми блоками? Кстати как сделать бордюр между блоками?

4. В чем смысл position:relative; Что он делает? По мне так ничего.

Я как понимаю position - дает положение элемента относительно: absolute - окна браузера relative - того, что является родитель. При этом все остальное он закрывает, словно слой в фотошопе.

5. Я как понимаю display нельзя применять к дивам. Только для тегов HTML для определения им поведения подобно блокам. Что дает display:block, где он применяется?

psywalker · June 18, 2009

дружище, как минимум наизусть! http://stepbystep.htmlbook.ru/

rus · June 18, 2009

Некоторые браузеры не понимают название стилей цифрами.

А ошибка то, становится смотрю все распостраненней и распостраненней...

Решение проблемы - называй имена стилей осознанно и логично.

Fu-tai · June 18, 2009

Да уж ошибка прям бич какой-то в последнее время. Такое ощущение что слова у людей кончились, а набор букв их не развлекает ))

evgenvl · June 18, 2009

Фенкс за ответ на первый вопрос.

Но отчего то все стало сложнее... Почему то теперь размеры блоков перестали работать.

SelenIT · June 18, 2009

Чтоб CSS-размеры работали при доктайпе, нужно указывать единицу измерения (напр., не просто 300, а 300px).

Sign In

HTML/CSS глазами Чайника. Блочная верстка.

Question

evgenvl

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Fu-tai

Link to comment

Share on other sites

evgenvl

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information