Решил посвятить несколько часов на приведение в порядок своего архива. Обнаружилась масса забавных, порой курьезных вещей. Натолкнулся на давно брошенную и не завершенную разработку, уж и не знаю, из каких краев попал ко мне оригинал шаблона. Честно скажу, даже и не вспоминал, что несколько лет назад предпринимал попытки наиболее оптимального решения проблем разметки страницы.
Естественно, все планы относительно раскладывания архива по полочкам (папкам) были заброшены до лучших времен.
Тут сыграло свою роль и то обстоятельство, что поиск легкой, прозрачной без лишних контейнеров, разметки страницы продолжается. К этому подталкивает и работа с людьми, которым премудрости html и стилей, в общем-то, и не нужны.
Нет, в своих областях они разбираются досконально, но тонкости, нюансы, скажем так, проблем визуальных разночтений в браузерах, имеют место быть.
Вообще, общение с кругом лиц, напрямую занимающимися продвижением, SEO, которые конкретно зарабатывают деньги в этой области, имеет свои положительные моменты. Начинаешь более отчетливо понимать, что контент расположенный выше колонок навигации в html-коде - очень хорошо, минимум самого html-кода разметки и прилагающегося к нему файла стилей так же есть плюс несомненный.
Вот кратенький не хитрый список, сложившийся в процессе работы над разными проектами:
Как видим, ничего особенного. Но не даром первым пунктом идет "нет таблицам".
Ну и пункт под номером восемь. Бедный footer, который всегда внизу, что же ты, так всех достал-то? Но если это кому-то нужно, то только для вас и только здесь и сейчас.
О попытках, так или иначе, собрать все воедино, а многие пункты списка прямо или косвенно противоречат друг другу, не однократно рассказывалось на страницах блога.
Вернемся на круги своя. Практика html and css рулит.
html-код:
<body>
<div id="wrap">
<div id="header">...</div>
<div id="center">
<div id="content">...</div>
<div id="left">...</div>
<div id="right">...</div>
</div>
</div>
<div id="footer>...</div>
</body>
Комментарий:
Мне нравится :)
Признайтесь честно, сколько раз вы встречали нечто подобное? Пора заучить наизусть :)
Согласитесь, принцип "необходимо и достаточно" выдержан в полной мере.
css
А, никаких пояснений к стилям не предусмотрено. Там не без хитростей, но пытливому уму все подвластно.
Смотрим – стандартный трех колоночный макет. F11 вам в помощь.
Общий комментарий:
У каждого браузера свои тараканы :)
IE6(7) – наличие вертикальной прокрутки имеется, особенно заметно в IE6. Без костылей для него не обошлось, но бороться с ним в данном случае не стал, не долго ему осталось.
FireFox, OPERA. Думаете у них все в порядке? А вот и не угадали, не надо тешить себя иллюзиями, что у браузеров проходящих самые навороченные тесты, с простыми вещами все в порядке. Если область контента пустая, они преподнесут вам "приятный" сюрприз.
Поклонники самых крутых без всякой меры "машинёнок", примите мои самые искренние соболезнования, скорблю вместе с вами :(
P.S. Двух колоночная разметка с разным расположением колонок под навигацию, домашнее задание для любителей поломать голову.
Горизонтальный banner counters.php - width:494px;