Serlutin

Возможно нужно сохранить в UTF-8 без BOM

Виноват overflow: hidden для .main Я так понимаю, что он сделан для того, чтобы создать 3 колонки одинаковой высоты с помощью огромного padding и отрицательного margin. Этот способ всем хорошо, но только если не использовать якоря. Эта проблема решается довольно трудно, очень проблематично. Вот довольно старая статья: http://www.positioniseverything.net/articl...lheightproblems - возможно она вам поможет

Стоп не надо равнять теги <b> и <center>. Теги <b> и <i> некуда не делись. Их можно и даже нужно использовать в разметке. Теперь они обозначают дополнительное выделение. Тег <i>, например, рекомендуется использовать для иностранных слов и терминов. Вот статья интересная: http://web-standards.ru/articles/i-b-em-strong-elements/ Ну если судить по представленной картинке, то название города и его код являются менее значимыми, чем сам номер. Тут еще стоит заметить для кого предназначается информация. Если это магазин в каком-то небольшом городе, то горожанам код города не так значим, как сам номер.

А мне буква «ё» (и типографские кавычки, тоже) нравится. Кстати, в школе всех учили ставить точки над «ё». А если не поставил, то учительница красными чернилами их нарисует. И не у кого в глазах не рябило от этих точек. А вот пропуск точек иногда мешает пониманию. В этой теме постоянно встречается имя Тема, и когда его пишут в начале строки, мне кажется, что это слово «тема» (теперь разбирайтесь, где тут «тема», а где «тема»)

mishka2, я имел ввиду, что лучше вообще ничего не сбрасывать в UL и OL. Либо потом специально позаботится, как будут выглядеть они в контенте. Просто уже напоролся я один раз на такую проблему.

А вот не согласен я с EM, тогда уже больше STRONG подходит, так как он обозначает высокую важность. То есть номер телефона является более важной частью, чем код и префикс.

Это то меню, где написано «Новости» и «Форум». Я сначала открыл страницу в FF4b7 (ну нравится мне бетка Огнелиса) и Chrome и начал сравнивать. Так отображается совершенно одинаково, так только потом я догадался посмотреть в Опере. Вы ведь наверное под ней верстали? Я так и не понял, почему оно в опере так выравнивается, ведь не должно. Уберите position: relative, тогда начнет правильно отбражаться в FF и Chrome, ну а потом думайте, что с Opera делать. Да и IE6-8 тоже что-то невнятное показывает. Вам надо добавить скрипт для отображения html5 тегов в IE

Все равно ссылка будет тянуться на всю ширину. Тут смысл в том, что поля (margin) являются продолжением элемента. Насколько я знаю (а знаю я не очень много , то красивого решения для картинки с ссылкой по центру нет, только таблицы использовать. А еще для изображения можно width и height применить. Ведь если изображения не является частью дизайна, то логичнее указать это прям в теге без использования CSS.

Я бы так сделал. Все таки это не абзацы, а некая информация. Вместо B можно использовать STRONG, но сколько бы я статей не читал, так до конца и не понял, где лучше употреблять B, а где STRONG <span>Моска: 8 /917/ <b>123-45-67</b></span> <span>Уфа: 8 /927/ <b>123-45-67</b></span> <span>Регионы РФ: 8 /917/ <b>123-45-67</b></span> <span>Центраьный офис: г. Уфа, ул. Комсомольская, 156/1</span> <span class="right"><img src="Enter" alt=""/>как доехать</span> css не писал, так как там ничего сложного. Только название классу надо дать не .right, а что-то типа .location - это для крутости. P.S. А тег FONT использовать не надо. Он устарел.

Сколько же споров глобальные сбросы порождают. Кто-то пользуется *, кто-то reset.css, кто-то обнуляет по мере необходимости. Для начала надо подумать насколько большой проект создается, сколько потом человек будут управлять дизайном, контентом и прочим. Если сайт будет состоять из одной странички с текстом и картинкой, то весь этот сброс будет не нужным. outline: 0; /* убираем контуры */ Зачем? Кому они мешают. Это ведь удобно, даже если выглядит не очень красиво. У меня однажды совсем не вовремя сломалась мышь, так пришлось пользоваться клавиатурой, и пунктирные рамочки очень помогли. Если не нравятся пунктирные рамки, пусть будет что-то другое, но чтобы мышь не была нужна. vertical-align: baseline; background: transparent; Не знаю насколько это нужно. ol, ul { list-style: none; /* убираем маркеры для нумерованных и обычных списков */ } А вот с этим можно еще поспорить. Вы точно уверены, что никто после вас не захочет создать нумерованный список? Ведь если его дополнительно не настраивать, то это будет просто набор строчек. Мне кажется, что логичнее убирать это только у элементов, которые используются в дизайне, то есть по ходу верстки, а не в глобальном сбросе. Либо дополнительно прописать отображение этих элементов. blockquote, q { quotes: none; /* убираем кавычки для цитат */ } blockquote:before, blockquote:after, q:before, q:after { content: ''; /* убираем */ content: none; /* и скрываем генерируемое содержимое */ } А вот это очень нужный кусок. Но только если будут использоваться цитаты. Раньше я не очень понимал смысл этого кода, пока не попробовал сделать семантичную цитату, с помощью тега Q, да так, чтобы она была в типографских кавычках. Современные браузеры автоматически добавляют кавычки, а IE нет, поэтому и приходится сбрасывать кавычки у современных браузеров, и прописывать их самостоятельно.

Либо можно width:auto. Единственное, что на малых мониторах (1024 по ширине), тогда не будет видно логотипа. У меня, например, видно только «Моя л..».

Тут, кончено бы хорошо ссылоку на сам сайт или пример. А в какую сторону уезжает. Горизонталь или вертикаль? Если проблемы с высотой, то проблема скорее всего в этом: margin-bottom: 15px; height:150px; IE6 не правильно работает с шириной. Он считает, что поля и отступы (margin и padding) входят в понятие ширины. Поэтому нужно margin переложить на другой контейнер, или вообще от него избавится. Если у вас проблема и в других IE, и даже в Opera, то скорее всего у вас не проставлен Doctype, а из-за этого браузеры переходят в режим совместимости и работаю кое-как. Если проблема с шириной, то это из-за указания ширины. У вас получается ширина 1480px и еще оступы 10px, итого 1490 рублейpx. Не в каждый монитор такое поместится.

А что классно было бы. Заходишь на htmlbook, дизайн под себя изменил, а остальные потом думать будут, почему зелёный текст на красном фоне.

Кстати, если вы выравниваете блок по центру с помощью полей, то задать вырхние и нижние поля все равно можно: img {margin-left: auto; margin-right: auto; margin-top:10px;}

Возможно, что webkit, если видит свойство Float, начинает обрабатывать его как блок, а не таблицу. Но это только предположение.

Извините, можно вопрос, для чего вам нужны 3 колонки с резиновым центром. Можно предположить, что это для создания каркаса сайта, так как если вам нужна обычная таблица, то проще использовать её. По первой ссылки, то что вам нужно, 3 колонки, две из них фиксированной ширины, центральная тянется. Центральная часть идёт в центре, чтобы Google в баннерах не заблудился. Остается только три колонки обернуть в общий див, и задать ему overflow: hidden и zoom: 1 (по желанию, можно и Width:100%, а можно забыть про IE6). А еще каждой колонке нужно прописать padding-bottom: 20000px; margin-bottom: -20000px Всё, три колонки и все тянутся по высоте

Вот хороший трехколонный макет http://blog.html.it/layoutgala/LayoutGala13.html А вот способ одинаковой высоты колонок http://habrahabr.ru/blogs/css/64242/ Немного волшебства, и даже в IE6 работать будет (только нужен хак для минимальной ширины). Единственный недостаток, не будут работать якоря, из-за overflow: hidden

Извините, я возможно не совсем точно понял вопрос, но почему нельзя воспользоваться div {width:400px; margin: 0 auto;}

Ну так вроде в моём примере шапка и по центру. Только я не уверен, что во всех браузерах хорошо отображается, другие браузеры еще не установил, кроме FF и ie7. Если можешь выложи изображения в нормальном маштабе, вечером попробую сделать.

Это свойство не понимают все версии IE, кроме еще не вышедшего IE9. Если у вас уже сделано на сайте, с помощью картинок, то, наверное, уже менять не следует, только если нужно сделать код более чистым, или закругление с помощью картинок не работает должным образом. border-radius нужно применять там, где его действие не будет сильно влиять на дизайн. В качестве пример можно привести Лурку, в новомодных браузерах «Содержание» скругляется, а в IE нет, в итоге пользователи новых браузеров любуются на уголки, а пользователи IE даже не догадываются, что дизайн сменился. В итоге и тем, и другим хорошо.

Да человек спросил, о том как вообще можно отобразить стиль при наведении. Для этого нужно использовать псевдокласс :hover, для того чтобы назначить стиль при наведении на кнопку, а :activе непосредственно при нажатии. Еще есть псевдокласс :focus он работает, когда кнопку выбрали с помощью клавиатуры. Итак если у вас кнопка имеет класс, например, .button, то дожно быть так .button {background: #999 url(obychnaya_knopka.gif) no-repeat;} .button:hover {background: #900 url(pri_navedenii.gif) no-repeat;} .button:focus {background: #900 url(v_fokuse.gif) no-repeat;} .button:active {background: #900 url(pri_nazhatii.gif) no-repeat;} А спрайты - это техника, позволяющая вместо четырех разных изображений использовать одно, но большего размера, что хорошо сказывается на загрузке.

А что не получается? Почему нельзя двумя изображениями обойтись? В любом случае с помощью CSS растягивать фоновое изображение нельзя (а вот и враньё, с помощью CSS3 можно, но IE пока это не поддерживает). Вот здесь все подробно описано.

Я бы по другому сделал. Не 3 изображения, а 2. Вроде бы и слева, и справа выделенные куски изображения одинаковые. Тогда делаем: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>header</title> <style type="text/css"> #header {width:90%;height:200px; margin:0 5%; background: #000 url(repeatimage.gif) repeat-x;} #header div {width:500px; height:200px;margin:0 auto; background: #333 url(header.png) no-repeat;} </style> </head> <body> <div id="header"> <div> </div> </div> </body> </html> На #header повторяем по горизонтали маленький кусочек, а второму диву присваиваем основное изображение.

Вот на Хабре статья недавно была. Если уже заранее знаешь размер изображения, и никто кроме тебя изображений добавлять не будет, то можно использовать только background-image, не дублируя его тегом img.

По сути PNG-8 не сильно от GIF отличается. Тоже 256 цветов, один вариант прозрачности (либо прозрачно, либо нет). Но говорят, что у PNG-8 цвет передаётся лучше, чем у GIF, поэтому рекомендуют использовать его.