Блочная верстка (DIV верстка) — Часть 4 — Как прижать футер (footer, подвал) к низу экрана в макете сайта на основе блочной верстки
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем тему блочной верстки (Div верстки), которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать на основе блочной верстки как двух- так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета сайта.
Кроме этого, в первых статьях, посвященных блочной верстке, были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах создания макета сайта на блоках (верстка на Div контейнерах).
Проще всего, описанные в предыдущих трех статьях аспекты создания макета сайта на основе блочной верстки, представить в виде списка со ссылками:
- Что нам потребуется для создания простого макета сайта с использованием блочной верстки (Div верстки)
- Как браузер работает с файлами сайта, почему особое значение придается файлам index.html и index.php, как обеспечить безопасность сайта
- Начинаем верстать двухколоночный макет сайта на дивах (блочная верстка)
- Продолжаем создание двухколоночного макета сайта на основе блочной верстки (Div верстки)
- Создаем трехколоночный макет сайта на основе блочной верстки (Div верстки)
- Создание резинового макета для сайта на основе блочной верстки (Div верстки)
Зачем нужно прижать футер (footer, подвал) к нижней части экрана браузера
Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом сайта. Чаще всего такая ситуация возникает при просмотре макета сайта на больших мониторах (с высоким разрешением) при отображении страницы с малым количеством информации. В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на середине экрана по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать футер к самому низу макета сайта нужно и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. С учетом этого случая, нужно будет в макете сайта на основе блочной верстки обязательно прижать футер к низу экрана. Схематично это можно представить так:
Т.е. правильное поведение футера в макете сайта на основе блочной верстки для случая малого количества информации на странице и большого экрана пользователя, будет следующим:
Приведенный в качестве примера сайта, футер прижат к низу экрана, а не располагается сразу же после текста страницы в макете. Что бы заставить футер прижаться к низу макета на блочной верстке, нужно будет осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и внесем изменения в файл Index.html, содержащий Html код и формирующий Div контейнеры нашего макета сайта. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом файл Index.html трехколоночного макета на основе блочной верстки содержал следующий Html код:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (Div верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="footer">Подвал</div> </div> </body> </html>
А в файле Style.css трехколоночного макета сайта на основе блочной Div верстки были прописаны следующие CSS свойства:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
Созданный на основе блочной верстки трехколоночный макет сайта будет выглядеть примерно так:
Как видите, футер не прижат к низу макета и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код нашего трехколоночного макета на блочной верстке. Все тоже самое можно будет проделать и для двухколоночного макета и для резинового макета сайта тоже. Метод универсальный.
Как прижать футер к низу макета сайта на основе блочной верстки
Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала нам потребуется задать высоту всей страницы макета на основе блочной верстки равную ста процентам (страница будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер Div контейнера с макетом нашего сайта тоже до 100%. Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно будет в файле Style.css дописать для тега Body еще одно CSS свойство, задающее высоту страницы макета равной 100%:
body, html {
margin:0px;
padding:0px;
height: 100%;
}
На внешнем виде нашего макета это никак пока не отразится, но зато теперь этот макет на основе блочной верстки сможет растянуться на всю высоту экрана, т.к. сейчас содержимое тегов Body будет занимать всю высоту окна браузера (экрана). Т.е. это был своеобразный подготовительный этап. Основные свойства CSS, при желании, вы можете посмотреть на этой странице. Теперь зададим для Div контейнера, в котором заключен макет сайта на блочной верстке, минимальную высоту равную 100%:
#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}
Еще я хочу подсветить Div контейнер содержащий макет нашего сайта (div контейнер с id="maket"). Для этого я задам ему рамку с помощью соответствующего CSS свойства Border:
#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}
CSS свойствоborder: solid 3px black позволяет задать для данного Div контейнера (включающего весь наш макет сайта на блочной верстке) сплошную рамку (solid) толщиной в 3 пикселя черного цвета (основные свойства CSS, при желании, вы можете посмотреть на этой странице). Это позволит нам наглядно увидеть, что Div контейнер с макетом нашего сайта действительно растянулся на всю высоту экрана, при малом количестве информации на странице:
Теперь нам нужно будет вынести Div контейнер футера из общего контейнера с макетом сайта на блочной верстке и разместить его ниже, сразу же после общего Div контейнера макета. Что это нам даст? А то, что , наконец-то, соизволит опуститься вниз футер в макете, а не будет, как прежде, прижиматься к наиболее длинной колонке макета. В этом случае Html код файла Index.html примет следующий вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (Div верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое </div> </div> <div id="footer">Подвал</div> </body> </html>
Обратите внимание, Div-контейнер с футером теперь не находится внутри общего Div контейнера с макетом сайта (maket), а следовательно ширина футера теперь уже не регулируется CSS свойствами, заданными для общего контейнера макета на основе блочной верстки в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным Div контейнером с макетом сайта:
Но опять возникает проблема, ибо для того чтобы увидеть футер (подвал), теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки). Получается это потому, что основной Div контейнер с макетом сайта на основе блочной верстки (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а Div контейнер футера располагается сразу за основным Div контейнером и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером, для того, чтобы футер (подвал) сместился вверх, на высоту, равную высоте Div контейнера с самим футером. При этом контейнер с футером наедет на основной Div контейнер с макетом нашего сайта на основе блочной верстки и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для просмотра футера). Но для того чтобы задать отрицательный отступ вверх на высоту футера, нужно знать эту самую высоту Div контейнера с футером, а мы ее пока что не знаем.
Поэтому сначала зададим Div контейнеру, содержащему футер (подвал), высоту, прописав соответствующее CSS свойство в файле Style.css для Div контейнера Footer:
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}
А затем задаем для Div контейнера футера в файле Style.css отрицательный отступ сверху на высоту равную высоте футера:
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}
Это позволит Div контейнеру, содержащему футер, подняться вверх ровно на высоту самого же футера и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для Div контейнера maket, чтобы толщина рамки не мешала всему нашему макету на основе блочной верстки вместе с футером поместиться в экране по высоте):
Как видите, теперь полоса прокрутки в браузере не появляется и весь наш трехколоночный макет сайта на основе блочной верстки помещается в одном экране (в случае малого количества информации на странице) и имеет футер, расположенный в самом низу. Что нам, собственно, и требовалось сделать.
Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для футера и который помог поднять наш подвал с наездом на основной Div контейнер макета. Т.е. получается, что внизу экрана расположены два Div контейнера, перекрывающие друг друга в области футера. Именно поэтому информация в этой области макета на блочной верстке может отображаться так коряво.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался Div контейнер с футером. Задав для этого нового Div контейнера высоту равную высоте футера, мы сможем избежать наезда информации из основного контейнера на Div контейнер с футером. Присвоим этому контейнеру ID с названием Rasporka и в результате Html код файла Index.html нашего трехколоночного макета на блочной верстке примет вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (Div верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div> <div id="rasporka"></div> </div> <div id="footer">Подвал</div> </body> </html>
А в файле Style.css пропишем для ID этого Div контейнера свойство Height, задающее высоту этому Div контейнеру-распорке равную высоте футера:
#rasporka {
height: 50px;
}
В результате Div контейнер с футером будет наезжать снизу не на информацию, содержащуюся в основном контейнере (например, текст в самой высокой колонке), а на равную футеру по высоте область с контейнером-распоркой, не содержащим никакой информации. Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете сайта на основе блочной верстки. Все будет четко и красиво:
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно для Div контейнера с футером (footer), т.к. этот контейнер с футером теперь не входит в состав основного Div контейнера макета сайта (maket). Для этого нужно добавить в CSS файл стилевого оформления макета Style.css дополнительные свойства для Div контейнера Footer, позволяющие задать ширину футера и выровнять его посередине экрана по ширине. Ширину футера имеет смысл задать равной ширине нашего трехколоночного макета сайта с помощью свойства Width, а выравнивание футера по ширине экрана можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке. Таким образом, нам нужно будет добавить для ID Footer дополнительные CSS свойства:
#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}
С помощью CSS свойства width:800px задается ширина футера равная 800 пикселей, а с помощью двух CSS свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от Div контейнера с футером автоматически, в результате чего эти отступы будут равными и футер выровняется по середине:
Ну вот, вроде и все, больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и возможно в каких-то других старых браузерах тоже) не смотря на все наши старания, футер не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что браузер Internet Explorer 6 не понимает CSS свойство min-height: 100%, которое мы использовали для задания минимальной высоты Div контейнера с макетом сайта, равной высоте экрана. Поэтому, для решения этой проблемы, нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для Div контейнера с макетом сайта (maket) нужно будет вставить следующую комбинацию CSS свойств:
* html #maket {
height: 100%;
}
Это CSS правило будет применено только для браузера Internet Explorer 6, остальные браузеры не будут его учитывать и выполнять те свойства CSS для основного контейнера макета сайта (maket), которые будут описаны следом. Итак, окончательный вид файла Style.css для трехколоночного макета сайта, построенного на основе блочной верстки с прижатым к низу экрана футером, будет следующим:
body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}
Ну, а окончательный вид файла Index.html трехколоночного макета сайта построенного на основе блочной верстки с прижатым к низу экрана футером, был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной. В ближайшее время планирую начать серию статей, посвященных CSS для начинающих пользователей, т.ч. если вам интересна эта тема, то подписывайтесь на рассылку новостей, чтобы ничего не пропустить.
Можете также посмотреть видео «Работа с Html тегом div»:
У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.
Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:
- Верстка сайта
- Html для чайников
- Что такое язык Html, валидатор W3C и Html тэги
- Зачем нужен Doctype и комментарии в html
- Спецсимволы (мнемоники) в Html, символ неразрывного пробела
- Как использовать цвета в Html коде
- Как в Html код вставить картинку и html ссылку
- Как сделать в Html список с помощью тегов UL, OL, DL и LI
- Html таблица и теги Tr, Th, Td, Table
- Html формы - теги Form и Input
- Div верстка сайта в Html и CSS ч.1
- Html и CSS верстка сайта на DIV ч.2
- Блочная верстка
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
- Блочная верстка (DIV верстка) — Часть 3 — Создаем на DIV блоках двухколоночный, трехколоночный и резиновый макеты для сайта
- Блочная верстка (DIV верстка) — Часть 2 — Верстка макета сайта в 2 колонки на дивах, создаем DIV-контейнеры макета в HTML, определяем их размеры и позиционирование в CSS
- Основы блочной верстки (DIV верстки) — Часть 1 — Как работают сайты, повышение безопасности сайта, структура HTML кода, создание простого макета в 2 колонки на дивах
- Как сделать скриншот экрана (Print Screen), Snagit — программа для снятия скриншотов страниц сайта, что это и куда сохраняются screenshot
- Онлайн сервисы для вебмастеров — FTP клиент Net2ftp, Google Alerts, разрешение экрана для сайта
- Галерея для WordPress на основе плагина фотогалереи NextGEN Gallery — настройка, создание и вывод галерей, слайдшоу и изображений
- Таблицы в Html (Table, Tr, Th, Td ), табличная верстка и теги Col, Tbody, Caption
Извините, случайно не у Игоря Квентора заимствован материал? Уж очень похоже, да и не в первый раз...
bescom: нет, я не знаю его. Материал похож, наверное, по одной простой причине — это решение как прижать футер к низу макета наиболее популярное и простое и многие его описывают, в том числе и я. Да, один из скриншотов не мой, я взял его с какого-то сайта, для иллюстрации правильного расположения футера, может быть именно с сайта этого уважаемого господина. Ну, я думаю, он не сильно обидится на меня за это, просто не было под рукой подходящего примера.
Ну да, я и не говорю, что Вы копипастите. Просто у него был цикл очень грамотных статей и даже книги про блочную верстку. А следом через год-два у Вас выходят материалы с заголовками «один-в-один», с не менее грамотным изложением. Подумалось — не оттуда ли черпаете вдохновение.
bescom: +1
bescom, Hiway: может ссылку кините, а то не совсем понятно, о чем идет речь.
Очень интересная статья о том, как можно прижать футер к низу. Спасибо.
Но есть один момент. Если в блоки вставить вместо текста картинку, то все разъезжается непредсказуемым образом. У меня картинки вставлены в левый и средний блоки и добавлен еще один блок, располагающийся ниже среднего. В результате средний блок блок растягивается по высоте картинки левого блока и картинка встает по высоте после левой картинки. Поднять её вверх получается только применив абсолютное позиционирование, но тогда блок, располагающийся под средним, поднимается на самый верх и прячется под картинкой.
Да, я вот сейчас все по вашим урокам сделал, всё красиво и понятно, за что спасибо огромное! И хочу попробовать заполнить блоки контентом типа текстов и картинок, поэтому есть опасения как бы все не перекосило. Вам бы продолжить серию статей и на данном примере описать как происходит процесс наполнения сайта и что происходит с макетом на блочной верстке при этом
В FF конструкция
margin-top:-50px;
не работает
Вопрос. Как сделать, чтобы «Содержимое страницы» (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?
Виктор говорит, что:
Меня тоже это интересует!
Graff говорит, что:
Присоединяюсь к выше сказанному,хотелось бы узнать продолжение темы!
Интересная статья, а главное актуальная для меня на данный момент.
Когда создавал каркас сайта, то следуя материалу статьи у меня все получилось с footer-ом. А когда начал его наполнять графикой и текстом, что-то не срослось. Вот уж несколько дней пытаюсь решить проблемку, но пока безуспешно.
Может подскажете, в чем ошибка?
www.doshkolyata.com.ua/testing/index.html
www.doshkolyata.com.ua/te...css/template.css
www.doshkolyata.com.ua/testing/css/menu.css
Graff говорит, что:
И я уже перелопатил пол интернета в поисках ответа не этот вопрос!
Дмитрий: у него украдено у него. со скринами на пару )) не хорошо красть!
Даниил: есть 1 метод но он очень дикий и есть в интернете но его просто так не найдеш
и кстати данная верстка плохая так как текст налазит 1 на другой при увеличении екрана
КОля: не говорите ерунды. Где ваши доказательства... А то собака лает, ветер носит... Не хорошо наговаривать, тем более что вы заблуждаетесь. Я все никак не могу добиться от кого-нибудь ссылки на материалы «маэстро», у которого я якобы «спер» всем известные постулаты блочные верстки. Уже и вправду стало интересно.
Дмитрий: Собственно, особо искать не нужно, по первому же запросу ссылка так и впрыгивает на экран — www.websovet.com/kak-priz... -ekrana#more-211
Скрин оттуда. Правда, Квентор делает оговорку, что он тоже не автор способа, а его реализатор.
Остальные темы по блочной верстке — тоже очень пересекаются. Так что желательно не раздувать пожар, а сказать — да, немного черпал вдохновение и оттуда. Чего уж там...
bescom: да, т.е. нет. «Да», в смысле, сначала разобрался с деталями блочной верстки сам, используя ряд материалов (курс Андрея Морковина в том числе), а потом написал, так как понял и как было бы понятно другим. «Нет», в смысле, не помню приведенной выше статьи, но мог и забыть. Еще по поводу «да» — один скриншот был взят из Яндекс.Картинок. По поводу «нет» — все остальные скрины мои.
Ребят, мне честно говоря, по барабану — считать такое изложение плагиатом или нет. Меня передернуло заявление о краже материала. Такого не было, да и вряд ли, может быть в будущем, ибо это довольно не рентабельно, в плане получения не уникального текста и изображений — оно мне на фиг не надо.
Дмитрий: Заметьте — я не говорил о плагиате, только лишь о черпании вдохновения. Лично мне очень нравится, как Вы излагаете материал — подетально, четко и понятно. Да и вообще, все мы при подготовке собственного материала в той или другой степени используем чужой материал.
Автор забыл добавить очистку обтекания перед распоркой
#clear
{
clear: both;
}
Автор замечательно дает материал — все запоминается само собой. Но! Частенько попадаются устаревшие данные и ошибки, которые очень тяжело находить и исправлять самостоятельно. Желательно устранить несоответствие стандартов в примерах
Млин, статья не для людей, а для поисковых роботов. Читать невозможно!
bescom: конечно, полностью с вами согласен.
Роман: спасибо за дополнение.
Константин: увы, бывают и недоработки.
Alien: эта песенка стара... Почитайте мои отповеди к подомным комментариям в других статьях. Повторяться нет желания.
Даниил говорит, что:
И я тоже прелопатил! весь день потратил...
лёг на часок вздремнуть, проснулся и...
придумал гениальный, фактически революционный метод: сверстать каркас таблицами. Товарищи там где целесообразней сверстать таблицами, ими и надо верстать, а не ломать голову над блочной вёрсткой. И к чёрту все холивар на эту тему.
всё сказал.
Виталий: Вот, дожили и доверстались..., что табличная верстка становится новаторством и революционным методом.
А вообще — правильно. Там, где целесообразнее делать таблицами — ими и надо делать! Тем более, что у них есть вполне определенные преимущества перед блочной версткой.
Статья хорошая.Мне пригодилась.
Думаю, что в скором времени появится куча вопросов.
Тогда доложу.
Виноват!
Забыл автору сказать: «Спасибо!» .
Может я чего-то не понимаю, но зачем #maket задавать min-height: 100%, если можно просто поставить height:100%;, при этом даже с IE6 не надо заморачиваться?
Подскажите что нужно сделать если контента мало а левое меню растягивается(акардион).При раскрытии всего меню наезжает под footer.Кто знает напишите решение!
Здрасте всем. Решил ваш вопрос прижатия с помощью несложного javascript кода. Что самое банальное — в конце, когда код был готов — он использует только 1 CSS строку.
alexnetstudio.org.ua/view_post.php?id=64
У меня вопрос относительно кодировки PHP файла. Просто я сразу создал файл формата PHP для Joomla, ну Index который. Вот, скопировал полностью ваш код. Заменил путь к css. Всё отобразилось. Но, если я «сохраняю как» файл в формате utf-8, с заменой самого себя, то при попытке открыть его браузером я вижу в окне код. Тут же сразу создал блокнот в формате utf-8. Всё отображается нормально. Попробовал пересохранить в 1251 (ANSI — кириллица) — всё в квадратиках. Соррир за много букв. Просто интересно, что происходит. Браузер Google Chrome.
Слишком черезчур текст под поисковики оптимизирован, читать не возможно...
Код выровненный по центру убивает
Спасибо за основательные и подробные разъяснения.
Очень помогли уроки. Все с толком, с расстановкой, на конкретном примере.
Знающих верстальщиков в интернете, на сколько я понял, много. Однако тех, кто осмелится на этот кропотливый труд — единицы. А тех, кто может грамотно донести информацию до начинающего — поискать надо. На уроках автора не приходится догадываться, а следишь за мыслью при переделках и доводках макета. Спасибо за урок, жду следующих.
Предлагаю не останавливаться на этом макете, а вести уроки до создания готового сайта на основе этого макета. Подобрать цвета, сделать меню, вставить картинки. Тогда это направление будет иметь логичное завершение.
у меня проблема-при уменьшении экрана содержимое средний колонки налазит на правую.и не меняються размеры левой и правой.ет конечно так и должно быть наверно но выглядит ужасно.как исправить?(может я чтото пропустила...)
Большое, спасибо. То что нужно
Если серьезно, материалов с грамотным, поэтапным изложением очень мало в нэте, тем более, если ты только начинаешь изучение сайтостроения, поэтому отдельное спасибо автору! Пригодилось! Критиков на мыло)
С удовольствием прочитал материал!
доступно, понятно, логически продумано.
такого доходчивого подхода давно не видел, все обрывки какие-то.
Спасибо!
Материал понравился! Всё наглядно и последовательно. Занимаюсь созданием сайтов в Joomla & WordPress, все шаблоны меняю как мне нужно, только своим сайтом не могу заняться (сапожник без сапог или бесплатно не хочется).