Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

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

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

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

Все серии

Комментарии к видео

Михаил Базаров07.08.2014
Цитата
Николай пишет:
....
Но вот угораздило меня удалить в админке в режиме правки кнопку с полем поиска вместо кнопки контакты, (при наведении на которую почему-то не выскакивает меню редактирования). Подскажите, как её вернуть? ...
Как-то тяжело что-то сказать. Я если честно, совсем не понял проблемы. Нужныбы скриншоты что ли
Kirill27.08.2014
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
Михаил Базаров27.08.2014
Цитата
Kirill пишет:
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
Почты не храню
Цены на битрикс http://www.1c-bitrix.ru/buy/cms.php
В уроке используется редакция СТАРТ за 4500 руб.
Аля19.11.2014
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
Артем26.01.2015
Добрый день, подскажите, следую вашим советам, шаг за шагом, проверяю, все как у вас, но почему-то подвал встал между таблицей и секциями контента, не могу исправить. [IMG]  [IMG]
Kirill27.01.2015
Здравствуйте, Михаил!
Такой вопрос: уже как выровнять article по центру между aside? Я имею ввиду автовыравнивание при адаптивной верстке. Пробовал margin:0 auto; не помогает!
Гость сайта13.02.2015
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
Михаил Базаров13.02.2015
Цитата
Гость сайта пишет:
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
Это нужно в вашей верстке разбираться. так тяжело сказать. Выложите куда-нибудь на файлообменник а в идеале, чтобы в браузере просто открывалось
Гость сайта14.02.2015
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
Михаил Базаров15.02.2015
Цитата
Гость сайта пишет:
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
Просто открывайте его не двойным кликом, а правой кнопкой- Открыть с помощью- и там уже выберите наиболее удобную верстальную программу (точнее текстовый редактор)
Гость сайта24.02.2015
Доброго времени суток!
В фотошопе видимо настройки не те (я в этом деле новичок),не удается создать файл с логотипом. Проблема в том ,что самого логотипа нет,а только прозрачный слой. Спасибо.
Илья26.02.2015
Нашел проблему с прижатием футера к низу.В стилях прописан не класс it_asist,а просто как элемент.Просто добавьте точку и футер внизу окажется)))
Guest01.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 на нужные вам
LiKang04.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 поменьше
LiKang05.07.2017
Цитата
Михаил Базаров пишет:
Цитата
LiKang написал:
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста. https://yadi.sk/d/qnTKWdPW3KkX3F вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете
Слишком большой padding справа у article
Или ее ширину уменьшите или padding поменьше
а логотип почему по середине получился?