Привет! По горячим следам, так сказать, решил я прокомментировать некоторые моменты из моей первой книги о блочной верстке. Судя по отзывам, книга оказалась весьма востребованной, и это несомненно радует. :)
Но вместе с тем у кого-то могут возникать и таки возникают накладки, и сверстанная страница работает не совсем корректно. Особенно часто задают вопросы по Internet Explorer. Разобрав несколько макетов читателей, я вывел наиболее частые ошибки, которые возникают при верстке. А IE, как известно, очень требователен к чистоте кода.
Итак, разберем по-порядку.
1. Наиболее распространенная ошибка увы происходит из-за невнимательности. Где-то забыли в листе стилей CSS двоеточие, либо закрывающую скобку — и все! Код уже не работает. Это все равно что прикрутить к машине три колеса, а про четвертое забыть. В результате машина не поедет.
Чтобы убедиться в правильности кода, можно воспользоваться, например, специальным плагином в браузере FireFox, или отправить файл на проверку в http://jigsaw.w3.org/. Там робот проверит что вы наваяли в листе стилей и выдаст кучу грозных предупреждений об ошибках. Но самое главное — выдаст также и ПРАВИЛЬНЫЙ код. Весьма удобная штука. Хотя, конечно, если вы забыли прописать целый кусок правил, то он за вас его не напишет. Только исправит то, что есть.
Если вы набираете код в том самом редакторе для программистов, который я рекомендую на страницах книги (PSPad), то уже в нем по цвету кода можно определить все ли верно записано. Если какое-то слово выделено ярко-красным или, например, правило вида #header выглядит по цвету отличным от других похожих правил, то проверьте это место дважды. Наверняка где-то пропущена скобка, двоеточие, точка, решетка или слово написано с ошибками.
2. Часто возникает вопрос, почему Internet Explorer не отображает какой-то фон — в шапке или в менюшке — не суть важно. Я не даром рекомендую в книге не копировать код методом копипастинга (скопировал-вставил), потому что при этом часто теряются какие-то кусочки кода. Вот и в данном случае код был явно скопирован, и строка правила для фона стала выглядеть примерно так:
background: #fff url(images/bg.gif)no-repeat;
В чем тут ошибка? Ведь на первый взгляд все написано правильно. Ошибка в отсутствии пробела между закрывающей скобкой адреса рисунка и словом no-repeat. Опера сможет правильно прочитать такой код, а вот IE — нет. Поэтому строка должна выглядеть следующим образом:
background: #fff url(images/bg.gif) no-repeat;
На этом пока все. Будут еще вопросы — смело стучите в асю, даже если меня там нет пишите в мыло. Как появлюсь, обязательно всем отвечу.
А плагин к FireFox, как я понимаю, имеется в виду Firebug (http://www.getfirebug.com/) ?)
Кстати очень удобная штука, в ней удобно смотреть чужие сайты и уяснять, как-что там у них работает.)
Ответить
Да, верно! К тому же позволяет исправлять ошибки на лету.
Ответить
Надо будет попробовать этот плагин. Видимо полезная очень штука!
Ответить
Спасибо за книжку! неужто вторая будет платной)?
а теперь соственно вопрос, не совсем по теме.
Мне оч нравиться меню на сайте _www.fantesca.com.
скачал сайт, но никак не могу его воспроизвести, посоветуйте пожалуйста, ресурс или книгу, в которой были бы описаны тонкости создания подобной навигации средствами css . заранее спасибо!
Ответить
2 Антон: О второй книге пока ничего не скажу, ибо в процессе. Что касается указанного сайта, то:
No site configured at this address
Ответить
Уважаемый Kventor, хочу заметить что http://www.websovet.com/any/blockverstka.rar имеет MIME-type: text/plain, это приводит к тому что в опере этот файл открывается как текст.
Ответить
Да, Алан, вы правы. Тут я лопухнулся. Чуть позже перезалью файл в ZIP-формате, а пока в Опере можно просто кликнуть по ссылке правой кнопкой и выбрать “Сохранить объект как”. Тогда файл сохраняется как RAR-архив.
Ответить
Игорь, спасибо за книгу, написано доходчивым и понятным языком.
Ответить
Привет Игорь!
Давно не слышались. в асе совсем не бываешь, а жаль, так бывают нужны твои советы.
вот наконец добрался до твоей книги. написано доходчиво!
Счас изучаю, полдня сегодня посвятил этому делу и вот организовался вопрос.
Чтобы написать стиль css нужно знать на “зубок” все правила и собственно язык хтмл, так ли это…
Хотелось бы понять, при написании класса стилей, как ты контролируешь процес визуально?
Только в броузере или используешь какой-то визуальный хтмл редактор?
Надеюсь. что ты понял мою проблему и сможешь ответить.
Ответить
Привет, Алексей! Аську удалил как вредный элемент :)
По вопросу: чтобы написать файл css не обязательно знать наизусть все правила и их свойства. Достаточно иметь их под рукой в виде книги или шпаргалки и понимать принципы их работы. Основные тэги html тоже можно выучить довольно быстро. Это как слова языка. Их просто нужно знать :)
Проверку работы кода я делаю сразу в трех браузерах: ИЕ, Опера и ФФ. Визуальный редактор для этого вовсе ни к чему.
Ответить
Спасибо Игорь!
Кое-что начинает прояснятся.
Но, вопросов не стало меньше. не знаю, вправе ли я задавать их на твоих страницах.
Но всеже рискну.
как пример фрагмент кода из slyle.css
body { padding: 2% 0 0;
background: #FFF;
color: #000080; font-family: Verdana, Arial, Helvetica; }
#container {
width: 900px; margin: 0 auto;
}
Вопрос по отображению в броузере.
Как видно, что по умолчанию прописан шрифт Verdana, который корректно отображается во всех известных мне броузерах.
В моем же случае, первоначально в коде css стоял первым шрифт с примера из твоей книги про сайт свиней, а именно Comic Sans MS.
Так вот. При замене Comic Sans MS на Verdana, при просмотре измененных и сохраненных файлов стиля и страницы, в броузере отображается шрифт Comic Sans MS. Попытки обновить страницу или очистить кеш, не дали никаких результатов.
Не допускаю той мысли, что сделал что-то не верно, поскольку, код скопировал из твоей книги…
Если ты понял в чем проблема, поясни плиз.
Кстати, и при замене цвета background: страницы и цвета шрифта меню, всЁ отображается, как было прописано изначально в твоем примере их книги.
Ответить
Прошу простить… Нашел сам свою ошибку.
Ты был 100% прав, это из-за невнимательности и полного отстутствия опыта.
насчет основных основных тэгов html - это понятно. как раз в этом нет особой сложности…
Вопрос.
есть #container с этими параметрами
{ width : 900px; margin : 0 auto; border : 1px solid #999; }
Внутри которого есть #header с параметрами
{ background : url(images/header.jpg);
и есть меню из твоей книги.
Как сделать чтобы после меню, на некотором расстоянии вниз типа , разместить две колонки без рамок: левое поле 600 пикс, а правое по типу (блогрола) одноколоночный столбик, шириной 300 пикс.
В левом намечается размещение контента с картинкой позизионированной налево с обтеканием текста. а в правой будет меню и прочая радость.
Вот, сейчас бьюсь над этой задачей, но пока безуспешно…
А про шпаргалки спасибо!
Ответить
Нужно добавить 2 блока, соответственно, #content и #sidebar со следующими правилами:
#content {
width: 600px;
float: left;
margin: 20px 0 0 0;
}
#sidebar {
width: 300px;
float: right;
margin: 20px 0 0 0;
}
В коде страницы после блока меню прописать:
<div id="content">Содержимое контента</div><div id="sidebar">Содержимое сайдбара</div>
<div class="clearfloat"></div>
Последняя строка - “очистка”. В файле CSS для нее должен быть прописан такой код:
.clearfloat {
clear: both;
}
Это на случай, если сайдбар короткий, а подвал не задан во всю ширину контейнера, то чтобы этот самый подвал не “подпрыгнул”.
Ответить
Спасибо Игорь!
Буду разбираться.
Но ощущаю, полную несостоятельность…
Толи у меня с компом что, толи еще что, не могу понять.
Проследил внимательно за всем куском кода, с которым сегодня возился. так и не смог сделать хоть что-то внятное.
Посмотри на досуге, что там не так адрес ссылки потом удали из комментария.
Шрифты не меняются, картинка не хочет обтекаться слева от тектса…
Понимаю, что наверное я напорол.. а может и не я. Короче первый день комом.
Ответить
Здравствуй, Игорь.
Решил наконец-то нарисовать себе хомячка, чтобы домен с хостингом зря не пропадали. :)
Через гугль попал сюда в поисках знакомства с блочной вёрсткой. В общем, по урокам всё хорошо ясно, но я пока не смог добиться того, чтобы при малом объёме информации на странице футер таки сидел в самом низу, а не лепился под последний блок. Попробовал даже лебедевский табличный вариант (честно пытался стыбрить с www.ya.ru) - не получилось, футер всё так же лепится сразу под последним блоком.
Не мог бы ты по(дс)казать, как можно добиться желаемого эффекта? Мало информации - это примерно как на той же ya.ru. ;)
Надеюсь, ничего, что я сразу на “ты”? Если напрягает - будем на “вы”, не проблема. :)
Ответить
Привет, nornad! Верно, нечего добру пропадать :)
Про то, как придавить футер к низу экрана я рассказывал в своей второй книге - по верстке 3-х колоночного шаблона для ВП. На странице 46 есть подробное объяснение.
Однако я сегодня же напишу пост об этом сюда в блог. Что-то мне казалось, что я уже писал об этом в блоге, а оказывается - нет. А темка и в самом деле полезная.
Спасибо за наводку! :)
Ответить
И тебе спасибо, Игорь. И за книжки, и за блог. ;)
Ответить