5 советов верстальщику
Стартуем эстафету среди специалистов по вёрстке!
Условия:
- Речь идёт о html/xhtml/css вёрстке.
- Передавать эстафету нужно другому блоггеру только в том случае, если вы уверены, что он действительно в этом разбирается.
- Не используйте в качестве советов элементарные правила html/xhtml/css.
- Особенно приветствуются хитрости исправляющие баги в IE без использования хаков.
- Мало рассказать о каком-либо баге. Нужно предложить решение.
Итак, мои советы:
- Используй таблицы не для вёрстки страницы, а только для отображения таблицы с данными. Все возможные способы вёрстки документа доступны нам при использовании div-ной вёрстки. Div-ная вёрстка наиболее логична и лаконична.
- При использовании padding-top у внешнего элемента и margin-top у внутреннего, в IE срабатывает только свойство с наибольшим значением. Используй или только margin, или только padding, или делай отступы с использованием дополнительного контейнера.
- Не используй для элементов такие свойства CSS вместе:
... { float: left; width: ... ; margin-left: ... ; }
или
... { float: right; width: ... ; margin-right: ... ; }
в этом случае IE6 будет увеличивать отступ (margin-left, margin-right) в два раза.
Используй padding для внешнего контейнера, чтобы сдвинуть элемент. Или добавь ещё один контейнер и сдвигай его с помощью margin. - Если хочешь чтобы пользователь IE6 мог изменять размеры шрифта на странице, то для определения размера шрифта следует использовать относительные единицы измерения: em и %.
- Чтобы не было проблем с языками все файлы сохраняй в кодировке UTF-8. Обязательно указывай кодировку в соответствующем meta-теге и для всех подключаемых файлов (например подключенных с помощью элементов <script>, <link>).
Эстафету передаю:
]]>Сергей Третьяк]]>Хорошая идея, но жестокая. Жестокая в том смысле, что первым будет легче, чем последним.
»]]>Serhiy]]>5 правило у Вас на сайте не обнаружил. Если можно то подробней про него. Зачем и в каких случаях.
»]]>Serhiy]]>…я про элементы , …
»]]>Serhiy]]>упс, должно было быть script, link
»]]>Никита]]>Просто при подключении файлов в элементах <script> и <link> (JavaScript, CSS), следует добавлять атрибут charset=”utf-8″, чтобы любое содержимое из других файлов отображалось как надо.
»]]>tapazukk]]>Хм почему же хаки отметаются?
»Например то же удваивание magin в ie лечится concom и display:inline
Идея хорошя.
]]>Никита]]>Хакками можно вылечить всё. Но гораздо изящней и профессиональней выглядят решения без хакков.
»Conditional Comments — это лишний, никому не нужный (кроме IE) код, который только мешает. Опять же при изменении каких либо параметров нужно их менять в двух местах. Причём если у меня margin будет равен 57px, то для исправления margin в IE нужно ещё вспомнить арифметику и вспомнить в какую сторону округляет IE.
И как может подходить «display: inline» если нужно, чтобы элемент был блочным?
]]>tapazukk]]>Особенность парсинга, блочные свойства у него останутся, попробуйте поэксперементировать.
»Скажите, вы в своих проэтах не используете condcom совсем?
]]>Никита]]>Спасибо, попробую.
»Нет не использую. Всё получается и без них.
]]>Repka]]>добавлю свои 5 копеек
1) не понимаю почему такая истерия по поводу использования таблиц для разметки?
»Например, у меня контент разбит на 5 столбцов почему бы не взять табличку?
2 и 3) извесные баги
2) лечится 1px бордюрами, падингами проложенными к элементу с маржджином
3) лечится добавлением display:inline
5) согласен что строчка @charset “utf-8″; в начале css файла решит много проблем
]]>Никита]]>Repka,
»1) это не истерия, это логика. Я рекомендую, не заставляю.
2) пример можно?
3) уже убедился. Спасибо!
]]>UGgallery » Архив журнала » 5 советов верстальщику]]>[...] Селецкий передал мне эстафету советов по вёрстке. Требуется дать 5 советов верстальщику по теме html-css. [...]
»]]>uggallery]]>Никита! Спасибо за эстафету! Хорошая идея. Надеюсь, еще кто-нибудь напишет.
»]]>HTML и CSS, доступность и юзабилити — Life Style » » 5 советов по HTML и CSS]]>[...] подачи Никиты хочу дать несколько советов по HTML и CSS. Хоть я и [...]
»]]>blogomob]]>Наткнулся на ваш “блогмоб”. Если есть желание может стартанём его на blogomob.ru чтобы собрать все ответы воедино и легко передавать эстафету?
»]]>Curly Brace]]>http://www.webmakerslounge.com/news/work-advices/
»]]>Yuriy Drozdov]]>Странно, что от меня трекбек не пришел…
»]]>uggallery]]>Общий список составить было бы не плохо, конечно. А еще сборник лучших советов. И опубликовать на популярном ресурсе.
»]]>Sam]]>Составил список ответивших. Вроде полный, но если кого забыл — отпишитесь:
»http://rmcreative.ru/blog/post.....talschikam
]]>cssing :: Архив :: 5 советов верстальщику]]>[...] Никита Селецкий [...]
»]]>webmolot]]>Если ты уделяешь верстке 1 час в день – не жди успеха. Если за версткой ты не замечаешь, как летит время, можешь работать целый день и это приносит удовольствие – значит ты верстальщик-фанатик, и со временем ты сможешь верстать как твои кумиры.
Не забывай делать перерывы во время верстки. Особенно это помогает, когда что то не получается. После непродолжительного перерыва легче найти правильное решение.
Соблюдай семантику кода и ты сэкономишь время на верстке сайта. семантическая верстка занимает меньше времени, так как в ней больше смысла и меньше кода.
Не останавливайся на достигнутом! Читай больше статей про html/css верстку. Броди по блогам верстальщиков, там можно найти много новой и полезной для себя информации. Все знать ты не можешь.
Собирай и структурируй свою библиотеку решений по верстке и создавай свои фреймворки. Это поможет сэкономить много времени при верстке.
»]]>Никита]]>Спасибо всем за отзывы и советы!
»]]>Верстка сайта – блочная верстка, кроссбраузерная, валидная, семантическая верстка сайта » 5 советов верстальщику]]>[...] эстафету советов верстальщику и предлагаю свои 5 пунктов, [...]
»]]>Юра]]>Выражаю глубокую благодарность тебе Никита за эту эстафету/флэшмоб!
»а так же всем кто её уже поддержал и будет поддерживать!
Огромное спасибо!
для меня, начинающего верстальщика и изучающего вёрстку/сайтостроение, эта волна советов крайне актуальна на данный момент.
]]>mihdan]]>У тя на этой странице футер отвалился в FireFox 2
»]]>Никита]]>Проверил. Ничего не отвалилось. Может у тебя просто страница не дозагрузилась?
»]]>Пять советов верстальщику | Ars Longa, Vita Brevis]]>[...] эстафету, организованную Никитой Селецким, от Максима Покровского, добавляю свои пять копеек в [...]
»]]>5 советов верстальщику » Свобода слова вебмастерского]]>[...] свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех [...]
»]]>Боремся с двойным отступом в IE6 при использовании float | rotorweb.ru | Проблемы и решения в Web-дизайне]]>[...] конечно использовать совет под номером 3 от Никиты Селецкого, но я предпочитаю другой способ. Обычно хватает просто [...]
»]]>Интернет » Архив » 5 советов по HTML и CSS]]>[...] подачи Никиты хочу дать несколько советов по HTML и CSS. Хоть я и [...]
»]]>phoenix-soa]]>>>> 3. Не используй для элементов такие свойства CSS вместе:
добавляем display:inline, и правило неактуально
»]]>Никита]]>phoenix-soa, чиатем комментарии и не повторяемся.
»]]>Советы web-верстальщику | IT knowledgebase]]>[...] Из блога seleckis.lv [...]
»