Меню

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

Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.
Поиск  Правила 
Ответить
RSS
Видеоурок №2: верстка макета на HTML/CSS
 
#1
Это нравится: 0 Да / 0 Нет
02.01.2014 20:27:03
Видеоурок №2: верстка макета на HTML/CSS

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

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

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

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

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

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

Получение списка Highload блоков с помощью API Битрикс

1С-Битрикс предоставляет мощный инструментарий для обеспечения эффективной работы ваших проектов. Одним из способов упра...

Ссылка и название раздела в списке новостей Битрикс

Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новость в компоненте "списк новосте...

Удаление товара из корзины по кнопке "минус" если остался 1 товар

Задача: когда в корзине осталась одна единица товара, нужно удалять товар по нажатию на кнопку "минус". Остави...

INPUT type="file" Предпросмотр превью картинки до загрузки

Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", как сделать ее более удобной для...

Основные функции вывода в шаблонах Битрикс

Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну кучку. Ведь у каждого бывают мо...

Вывести товары в каталоге перебрав их по свойству и разделив на секции.

Задача: В каталоге, у товаров, есть свойство типа список с названием "Тип изделия" и кодом "TIP_IZDELIYA&...

Объединить отдельные поля ФИО в одно свойство при оформлении заказа.

Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отчеством. Нам нужно сохранить эт...

Отфильтровать новости в Битрикс за заданный период

Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компонента "список новостей". Для э...

Дополнительные параметры в меню Битрикс

Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например открывать ссылку в новом окне и...