Видеоурок №2: верстка макета на HTML/CSS

Просмотров: 46687

Верстаем макет на HTML/CSS, для создания шаблона битрикс. Для работы понадобятся: psd зарисовочка из первого урока и заготовка для верстки скачать. Урок рассчитан на подготовленного пользователя, мало мальски разбирающегося в элементарной верстке таблицами и блоками. Верстаем общий скелет сайта без детализации, дальнейшую доводку до ума будем производить сразу в битриксе.
PS: Заметил несколько не критичных опечаток в коде. Будем исправлять в 5-ом уроке. Особо не влияют на отображение, но все же.

Предыдущая серия Следующая серия

Все серии

Все комментарии: Оставить комментарий
Гость сайта 24.02.2015
Доброго времени суток!
В фотошопе видимо настройки не те (я в этом деле новичок),не удается создать файл с логотипом. Проблема в том ,что самого логотипа нет,а только прозрачный слой. Спасибо.
Илья 26.02.2015
Нашел проблему с прижатием футера к низу.В стилях прописан не класс it_asist,а просто как элемент.Просто добавьте точку и футер внизу окажется)))
Guest 01.06.2015
А где можно скачать фотошоп для мак
Михаил Базаров 02.06.2015
Цитата
Guest пишет:
А где можно скачать фотошоп для мак
http://www.torrentino.com/torrents/580513
Дмитрий Возник 07.10.2016
Цитата
Аля пишет:
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
Всё верно. И используется обычно, дабы не захламлять лишним "мусором" в коде, как псевдо-класс. Полный вариант самого распространенного варианта таков:

clearfix::after {
     clear: both;
     content: "";
     display: table;
}
Дмитрий Возник 07.10.2016
Цитата
Kirill пишет:
Здравствуйте, Михаил!
Такой вопрос: уже как выровнять article по центру между aside? Я имею ввиду автовыравнивание при адаптивной верстке. Пробовал margin:0 auto; не помогает!
Выравнивается он так:

article {
     margin: 0 auto;
     padding-left: (ширина левого aside + отступ от него);
     padding-right: (ширина правого aside + отступ от него);
}
Михаил Базаров 07.10.2016
Цитата
Дмитрий Возник написал:
Цитата
Kirill пишет:
Здравствуйте, Михаил!
Такой вопрос: уже как выровнять article по центру между aside? Я имею ввиду автовыравнивание при адаптивной верстке. Пробовал margin:0 auto; не помогает!
Выравнивается он так:

article {
     margin: 0 auto;
     padding-left: (ширина левого aside + отступ от него);
     padding-right: (ширина правого aside + отступ от него);
}

Или, не очень любимый всеми (почему-то), вариант
Код
.ОБЩИЙ_КОНТЕЙНЕР {display: table; width:100%;}
.ЛЕВО {display:table-cell; width:100px; }
.СЕРЕДИНА {display:table-cell;}
.ПРАВО {display:table-cell; width:100px; }
На адаптивных разрешениях отменяете display tablу и table-cell на нужные вам
LiKang 04.07.2017
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста. https://yadi.sk/d/qnTKWdPW3KkX3F вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете.
Михаил Базаров 04.07.2017
Цитата
LiKang написал:
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста.  https://yadi.sk/d/qnTKWdPW3KkX3F  вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете
Слишком большой padding справа у article
Или ее ширину уменьшите или padding поменьше
LiKang 05.07.2017
Цитата
Михаил Базаров пишет:
Цитата
LiKang написал:
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста. https://yadi.sk/d/qnTKWdPW3KkX3F вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете
Слишком большой padding справа у article
Или ее ширину уменьшите или padding поменьше
а логотип почему по середине получился?