Javascript-форум - Тон правильной вёрстки

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Тон правильной вёрстки (https://javascript.ru/forum/xhtml-html-css/12866-ton-pravilnojj-vjorstki.html)

Тон правильной вёрстки

Привет всем форумчанинам!
Собственно к проблеме, я новичок, пытаюсь обучиться правильной вёрстке, учусь вёрстке уже больше месяца, даётся она вроде легко, но как-то я не понимаю как правильно, например, создать трёхколоночный сайт, я делаю расположение колнок при помощи стиля float, но в ie 6 почему-то на пару пикселей больше выходит отступ margin-left, мне говорили, что это всё из-за того, что я использую стиль float, а я не знаю как иначе сделать, помогите пожалуйста, вот выкладываю пример:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(</title>
</head>

<body>
<div style="width:90%; border:1px solid #000000; margin-left:5%; margin-right:5%; height:200px; padding-top:10px;">
	<div style=" width:30%; border:1px solid #000000; float:left; margin-left:10px;">left</div>
	<div style="width:30%; border:1px solid #000000; float:left; margin-left:45px;">middle</div>
	<div style="width:30%; border:1px solid #000000; float:right; margin-right:10px;">right</div>
</div>
</body>
</html>

Цитата:

Сообщение от HtmLiker

учусь вёрстке уже больше месяца, даётся она вроде легко

Ну как не позавидовать такому человеку... :lol:

1. Не поддерживай ИЕ6
2. Если уж припёрло

ksa, спасибо за ссылку.

HtmLiker, заходи еще. :)

Цитата:

Сообщение от HtmLiker

<div style="width:90%; border:1px solid #000000; margin-left:5%; margin-right:5%; height:200px; padding-top:10px;">
<div style=" width:30%; border:1px solid #000000; float:left; margin-left:10px;">left</div>
<div style="width:30%; border:1px solid #000000; float:left; margin-left:45px;">middle</div>
<div style="width:30%; border:1px solid #000000; float:right; margin-right:10px;">right</div>

1. Возьмите за правило стили выносить во внешние файлы и использовать сокращенную нотацию свойств/значений CSS

Цитата:

Сообщение от HtmLiker

ie 6 почему-то на пару пикселей больше выходит отступ margin-left

2. Неудивительно, постарайтесь узнать почему так происходит и как с этим бороться.

Цитата:

Сообщение от HtmLiker

создать трёхколоночный сайт, я делаю расположение колнок при помощи стиля float, но в ie 6, но в ie 6 почему-то на пару пикселей больше выходит отступ margin-left, мне говорили, что это всё из-за того, что я использую стиль float

3. Свою голову имейте

4. Пока учитесь почаще заходите на сайты http://htmlbook.ru/, http://xhtml.ru/, http://fastcoder.org/. Возьмите за правило писать код только в блококнотоподобных редакторах (к примеру Notepade++), а не всякими Dreamweaver и пр. Потом начинайте осваивать FireBug, но не наоборот.

5. Если 1-4 пункты для вас выполнимы, то у вас есть шанс не стать говнокедером

Цитата:

Сообщение от monolithed

Пока учитесь почаще заходите на сайты http://htmlbook.ru/, http://xhtml.ru/, http://fastcoder.org/.

Добавлю: не помешает читать различные тематические блоги по верстке (http://chikuyonok.ru/, http://cssing.org.ua/, http://dimox.name/). habrahabr.ru (он, конечно, не только по верстке), http://vremenno.net/ ну и самое главное - http://google.ru/

Цитата:

Сообщение от HtmLiker (Сообщение 77703)

ie 6 почему-то на пару пикселей больше выходит отступ

А DOCTYPE о чем то говорит, если нет то нужно начать с этого. А суть не в маргине а в бордере причем разных браузерах по разному. У одних при длине элемента 30% и бордере 1px весь элемент будет занимать 30%+2px а у других 30%.

Цитата:

Сообщение от monolithed

Возьмите за правило писать код только в блококнотоподобных редакторах (к примеру Notepade++), а не всякими Dreamweaver и пр. Потом начинайте осваивать FireBug, но не наоборот.

Не надо грязи, я пользую Dreamweaver и Zen Сoding. Полностью валидный XHTML. Из недостатков: громоздкий пакет с кучей хлама :)
Говнокодером можно с любым редактором стать.
Из линков: A List Apart и хороший русский ресурс, как раз для начала, блог Ивана Сагалаева.
И пожалуй самое главное: хорошая верстка будет нормально отображаться даже в 6 осле, ну с паленькими костылями. Если костылей приходится лепить много, то было выбрано неверное решение.
И научитесь отделять мух от котлет: все что можно решить при помощи CSS ими и надо решать (а ими много чего можно сделать, тем более CSS3 уже частично поддерживается), не надо обвешивать страницу кучей идеотских скриптов.

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