Меню

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

Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.
Поиск  Правила 
Михаил Базаров: 02.01.2014 20:27:03
Видеоурок №2: верстка макета на HTML/CSS

Верстаем макет на HTML/CSS, для создания шаблона битрикс. Для работы понадобятся: psd зарисовочка из первого урока и заготовка для верстки скачать. Урок расчитан на подготовленного пользователя, мало мальски разбирающегося в элементарной верстке таблицами и блоками. Верстаем общий скелет сайта без детлизации, дальнейшую доводку до ума будем производить сразу в битриксе.
Гость сайта: 02.01.2014 20:27:03
Здравствуйте, а где архив с готовой версткой?
Михаил Базаров: 02.01.2014 21:33:15
Цитата
Гость сайта пишет:
Здравствуйте, а где архив с готовой версткой?
Приветствую. Приложен к четвертому уроку http://camouf.ru/blog-note/bx_site_created/4.html
Александр: 12.02.2014 11:13:23
Скажите, а можно ли все блоки (header, left, right, footer) сделать таблицей и там выводить контент? Как это скажется на работе сайта?
Михаил Базаров: 12.02.2014 14:40:39
Цитата
Александр пишет:
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
abduRahman: 07.04.2014 01:27:57
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Михаил Базаров: 07.04.2014 03:22:47
Цитата
abduRahman пишет:
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Тяжело подсказать. Это где-то в верстке ошибка. Быть может div не закрыли или недооткрыли где-то блок.
abduRahman: 07.04.2014 10:55:33
Как я заметил, порыскав в гугле. это распространенная проблема. Лично у вас при верстке такой проблемы никогда не было??
Гость сайта: 08.04.2014 17:06:04
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
Михаил Базаров: 08.04.2014 19:03:13
Цитата
Гость сайта пишет:
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
Например: Текст ссылки
а в style.css

a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }
Вячеслав: 08.04.2014 19:49:37
Цитата
Михаил Базаров пишет:
Например: Текст ссылки
а в style.css

a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }
Спасибо! Теперь буду знать)
Андрей: 09.04.2014 22:18:42
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии  нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
Михаил Базаров: 09.04.2014 23:04:36
Цитата
Андрей пишет:
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
Да. Правильно= это изучить HTML/CSS верстку и творить с шаблонами битрикс все, что душе (замыслу по дизайну) угодно. Первым делом, для профессиональной разработки, нужно абсторгироваться от готовых шаблонов, что идут в комплекте и сделать свой.
idel: 11.04.2014 06:58:52
Цитата
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Все это из-за float...
Константин: 12.04.2014 17:22:42
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
Михаил Базаров: 12.04.2014 23:28:29
Цитата
Константин пишет:
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
Если честно- даже примерно не понял. В таких случаях лучше куда-нибудь выложить да показать. Ссылки здесь размещать можно.
Константин: 13.04.2014 01:31:50
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
Михаил Базаров: 13.04.2014 04:02:43
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
Константин: 13.04.2014 13:39:59
Цитата
Михаил Базаров пишет:
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
Понял, ну просто дизайнер ее цельной сделал.Исправим.
Виктор: 15.04.2014 15:17:08
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, в дальнейшем на этом месте хочу сделать слайдер, но сейчас не об этом, так вот, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется, да она остается привязана к левому и правому краю браузера, но она становится уродливой, меняет размер не пропорционально. Подскажите как исправить ситуацию.
Михаил Базаров: 15.04.2014 15:27:51
Цитата
Виктор пишет:
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется
Укажите ей ширину width="100%" без ширины (вообще удалите height)
Виктор: 15.04.2014 15:59:45
Цитата
Михаил Базаров пишет:
Укажите ей ширину width="100%" без ширины (вообще удалите height)
Готово. теперь при изменении масштаба страницы это изображение остается неизменным, а все остальные элементы меняют размер. Так и должно быть? В любом случае это не ухудшает дизайн данного сайта)
Михаил Базаров: 15.04.2014 17:24:47
Значит у блока или таблички в которой эта картинка нужно тоже привязать размер к общему контейнеру сайта.
Виктор: 16.05.2014 23:22:09
Здравствуйте, Михаил! У меня на сайте одного из шаблона не подгружаются стили. Подозреваю это кэш. Только как это поправить? Заранее спасибо.
Михаил Базаров: 18.05.2014 13:11:06
Попробуйте отключить кеширование. И проверьте через "исходный код" действительно ли файлы стили забираются из нужного места.
Артем: 23.05.2014 21:44:21
Доброго времени суток,подскажите,размве битрикс не CMS  и с  помощью нее нельзя сделать верстку?
Заранее спасибо за ответ
Михаил Базаров: 24.05.2014 06:37:41
Битрикс это CMS и с помощью нее можно сделать верстку- встроенным редактором. Но на мой взгляд удобнее сначала сверстать общий скелет, а потом уже "утрамбовывать" в CMS и допиливать
Николай: 07.08.2014 10:42:43
Здравствуйте! Я полный ноль как программер, чисто сисадмин, но мне всунули созданный сайт на битрикс, для начала хотя бы для администрирования и заполнения каталогов. Я непрочь поучиться, хотя вижу ЧТО меня ждёт Ну да ладно, время есть будем.
Но вот угораздило меня удалить в админке в режиме правки кнопку с полем поиска вместо кнопки контакты, (при наведении на которую почему-то не выскакивает меню редактирования). Подскажите, как её вернуть? Разработчик сайта в отпуске, не знаю к кому обратиться за срочной помощью (((
пожааааалуйста
Михаил Базаров: 07.08.2014 12:14:04
Цитата
Николай пишет:
....
Но вот угораздило меня удалить в админке в режиме правки кнопку с полем поиска вместо кнопки контакты, (при наведении на которую почему-то не выскакивает меню редактирования). Подскажите, как её вернуть? ...
Как-то тяжело что-то сказать. Я если честно, совсем не понял проблемы. Нужныбы скриншоты что ли
Kirill: 27.08.2014 08:37:13
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
Михаил Базаров: 27.08.2014 10:36:37
Цитата
Kirill пишет:
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
Почты не храню
Цены на битрикс http://www.1c-bitrix.ru/buy/cms.php
В уроке используется редакция СТАРТ за 4500 руб.
Аля: 19.11.2014 18:05:02
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
Артем: 26.01.2015 12:57:23
Добрый день, подскажите, следую вашим советам, шаг за шагом, проверяю, все как у вас, но почему-то подвал встал между таблицей и секциями контента, не могу исправить. [IMG]  [IMG]
Kirill: 27.01.2015 11:31:49
Здравствуйте, Михаил!
Такой вопрос: уже как выровнять article по центру между aside? Я имею ввиду автовыравнивание при адаптивной верстке. Пробовал margin:0 auto; не помогает!
Гость сайта: 13.02.2015 14:33:38
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
Михаил Базаров: 13.02.2015 17:57:42
Цитата
Гость сайта пишет:
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
Это нужно в вашей верстке разбираться. так тяжело сказать. Выложите куда-нибудь на файлообменник а в идеале, чтобы в браузере просто открывалось
Гость сайта: 14.02.2015 00:11:33
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
Михаил Базаров: 15.02.2015 17:32:25
Цитата
Гость сайта пишет:
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
Просто открывайте его не двойным кликом, а правой кнопкой- Открыть с помощью- и там уже выберите наиболее удобную верстальную программу (точнее текстовый редактор)
Гость сайта: 24.02.2015 18:27:52
Доброго времени суток!
В фотошопе видимо настройки не те (я в этом деле новичок),не удается создать файл с логотипом. Проблема в том ,что самого логотипа нет,а только прозрачный слой. Спасибо.
Илья: 26.02.2015 22:08:36
Нашел проблему с прижатием футера к низу.В стилях прописан не класс it_asist,а просто как элемент.Просто добавьте точку и футер внизу окажется)))
Guest: 01.06.2015 15:58:54
А где можно скачать фотошоп для мак
Михаил Базаров: 02.06.2015 02:41:43
Цитата
Guest пишет:
А где можно скачать фотошоп для мак
http://www.torrentino.com/torrents/580513
Дмитрий Возник: 07.10.2016 19:58:19
Цитата
Аля пишет:
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
Всё верно. И используется обычно, дабы не захламлять лишним "мусором" в коде, как псевдо-класс. Полный вариант самого распространенного варианта таков:

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

article {
     margin: 0 auto;
     padding-left: (ширина левого aside + отступ от него);
     padding-right: (ширина правого aside + отступ от него);
}
Михаил Базаров: 07.10.2016 21:04:25
Цитата
Дмитрий Возник написал:
Цитата
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 20:44:55
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста. https://yadi.sk/d/qnTKWdPW3KkX3F вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете.  
Михаил Базаров: 04.07.2017 23:08:34
Цитата
LiKang написал:
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста.  https://yadi.sk/d/qnTKWdPW3KkX3F  вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете
Слишком большой padding справа у article
Или ее ширину уменьшите или padding поменьше
LiKang: 05.07.2017 21:30:58
Цитата
Михаил Базаров пишет:
Цитата
LiKang написал:
Добрый вечер, Михаил. Все сделал как Вы. Только вот логотип остался по середине. И текст aside right находится float:right, но ниже текста article. Никак не могу найти ошибку, посмотрите, пожалуйста. https://yadi.sk/d/qnTKWdPW3KkX3F вот залил файлы, которые сам за Вашими уроками минута в минуту писал. Правда логотип другой. Делал его в CorelDraw в формате png. По логике все должно работать. Только криво получилось. Абсолютно все то же самое. Но результат другой. Спасибо за видео которые выкладываете
Слишком большой padding справа у article
Или ее ширину уменьшите или padding поменьше
а логотип почему по середине получился?
BBCode   Правила
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
Загрузить картинки
 

Блог-note: заметки разработчика

Вывод элементов с помощью API битрикс

Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Например, если нужно вывести элем...

Ajax форма обратной связи, реализация в битрикс

Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в инфоблок. Способов реализации...

Установка вебсервера на Apple Silicon (нативный ARM стек), оптимизированный для 1С-Битрикс.

Появилась задачка, установить стек MAMP (macOS, Apache, MYSQL, PHP) на рабочий ноутбук с процессором Apple Silicon M1. В...

Заполнение габаритов товара, после обмена с 1С, из свойств элемента инфоблока.

Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1С не умеет выгружать параметры...

Работа с HTTP-запросами в Bitrix: Обзор возможностей класса \Bitrix\Main\HttpRequest

Класс \Bitrix\Main\HttpRequest, является наследником класса Request, представляет собой мощный инструмент для работы с д...

Правильное подключение стилей и скриптов в Битрикс

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если...

Определить местоположение пользователя и показать магазины поблизости.

Задача: в мобильном приложении, которое открывает сайт на 1С-Битрикс внутри себя, нужно определить местоположение пользо...

Звездочки в рейтинге Битрикс статей и товаров каталога

Задача: изменить вывод рейтинга элемента на звездочки, с помощью шаблона iblock.vote в товарах и новостях.

Базовая защита "Битрикс виртуальная машина" от DDoS атак.

Данный способ защиты не панацея, и скорее всего не спасет от профессиональной DDoS атаки, когда ваш сервер на CentOS под...