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

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

Верстаем макет на HTML/CSS, для создания шаблона битрикс. Для работы понадобятся: psd зарисовочка из первого урока и заготовка для верстки скачать. Урок расчитан на подготовленного пользователя, мало мальски разбирающегося в элементарной верстке таблицами и блоками. Верстаем общий скелет сайта без детлизации, дальнейшую доводку до ума будем производить сразу в битриксе.
 
Здравствуйте, а где архив с готовой версткой?
 
Цитата
Гость сайта пишет:
Здравствуйте, а где архив с готовой версткой?
Приветствую. Приложен к четвертому уроку http://camouf.ru/blog-note/bx_site_created/4.html
 
Скажите, а можно ли все блоки (header, left, right, footer) сделать таблицей и там выводить контент? Как это скажется на работе сайта?
 
Цитата
Александр пишет:
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
 
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
 
Цитата
abduRahman пишет:
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Тяжело подсказать. Это где-то в верстке ошибка. Быть может div не закрыли или недооткрыли где-то блок.
 
Как я заметил, порыскав в гугле. это распространенная проблема. Лично у вас при верстке такой проблемы никогда не было??
 
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
 
Цитата
Гость сайта пишет:
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
Например: Текст ссылки
а в style.css

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

a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }
Спасибо! Теперь буду знать)
 
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии  нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
 
Цитата
Андрей пишет:
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
Да. Правильно= это изучить HTML/CSS верстку и творить с шаблонами битрикс все, что душе (замыслу по дизайну) угодно. Первым делом, для профессиональной разработки, нужно абсторгироваться от готовых шаблонов, что идут в комплекте и сделать свой.
 
Цитата
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Все это из-за float...
 
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
 
Цитата
Константин пишет:
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
Если честно- даже примерно не понял. В таких случаях лучше куда-нибудь выложить да показать. Ссылки здесь размещать можно.
 
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
 
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
 
Цитата
Михаил Базаров пишет:
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
Понял, ну просто дизайнер ее цельной сделал.Исправим.
 
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, в дальнейшем на этом месте хочу сделать слайдер, но сейчас не об этом, так вот, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется, да она остается привязана к левому и правому краю браузера, но она становится уродливой, меняет размер не пропорционально. Подскажите как исправить ситуацию.
 
Цитата
Виктор пишет:
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется
Укажите ей ширину width="100%" без ширины (вообще удалите height)
 
Цитата
Михаил Базаров пишет:
Укажите ей ширину width="100%" без ширины (вообще удалите height)
Готово. теперь при изменении масштаба страницы это изображение остается неизменным, а все остальные элементы меняют размер. Так и должно быть? В любом случае это не ухудшает дизайн данного сайта)
 
Значит у блока или таблички в которой эта картинка нужно тоже привязать размер к общему контейнеру сайта.
 
Здравствуйте, Михаил! У меня на сайте одного из шаблона не подгружаются стили. Подозреваю это кэш. Только как это поправить? Заранее спасибо.
 
Попробуйте отключить кеширование. И проверьте через "исходный код" действительно ли файлы стили забираются из нужного места.
 
Доброго времени суток,подскажите,размве битрикс не CMS  и с  помощью нее нельзя сделать верстку?
Заранее спасибо за ответ
 
Битрикс это CMS и с помощью нее можно сделать верстку- встроенным редактором. Но на мой взгляд удобнее сначала сверстать общий скелет, а потом уже "утрамбовывать" в CMS и допиливать
 
Здравствуйте! Я полный ноль как программер, чисто сисадмин, но мне всунули созданный сайт на битрикс, для начала хотя бы для администрирования и заполнения каталогов. Я непрочь поучиться, хотя вижу ЧТО меня ждёт Ну да ладно, время есть будем.
Но вот угораздило меня удалить в админке в режиме правки кнопку с полем поиска вместо кнопки контакты, (при наведении на которую почему-то не выскакивает меню редактирования). Подскажите, как её вернуть? Разработчик сайта в отпуске, не знаю к кому обратиться за срочной помощью (((
пожааааалуйста
 
Цитата
Николай пишет:
....
Но вот угораздило меня удалить в админке в режиме правки кнопку с полем поиска вместо кнопки контакты, (при наведении на которую почему-то не выскакивает меню редактирования). Подскажите, как её вернуть? ...
Как-то тяжело что-то сказать. Я если честно, совсем не понял проблемы. Нужныбы скриншоты что ли
 
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
 
Цитата
Kirill пишет:
Михаил подскажите сколько стоит платформа, а то куда не ткну везде деньги, градации от сайта визитки до корп. порталов. Если можно ответьте в почту. Заранее спасибо.
Почты не храню
Цены на битрикс http://www.1c-bitrix.ru/buy/cms.php
В уроке используется редакция СТАРТ за 4500 руб.
 
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
 
Добрый день, подскажите, следую вашим советам, шаг за шагом, проверяю, все как у вас, но почему-то подвал встал между таблицей и секциями контента, не могу исправить. [IMG]  [IMG]
 
Здравствуйте, Михаил!
Такой вопрос: уже как выровнять article по центру между aside? Я имею ввиду автовыравнивание при адаптивной верстке. Пробовал margin:0 auto; не помогает!
 
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
 
Цитата
Гость сайта пишет:
Доброго времени суток подскажите пожалуйста как исправить? Мой рыбный текст который ДОЛЖЕН находиться посередине у меня чуть выше и растянут. Как его вставить именно между левым и правим рыбным текстом?
Это нужно в вашей верстке разбираться. так тяжело сказать. Выложите куда-нибудь на файлообменник а в идеале, чтобы в браузере просто открывалось
 
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
 
Цитата
Гость сайта пишет:
Доброго времени суток. Не удается скачать заготовку для верстки, вернее она скачивается, только документ html почему то через интернет нужно запускать. В чем может быть причина? спасибо
Просто открывайте его не двойным кликом, а правой кнопкой- Открыть с помощью- и там уже выберите наиболее удобную верстальную программу (точнее текстовый редактор)
 
Доброго времени суток!
В фотошопе видимо настройки не те (я в этом деле новичок),не удается создать файл с логотипом. Проблема в том ,что самого логотипа нет,а только прозрачный слой. Спасибо.
 
Нашел проблему с прижатием футера к низу.В стилях прописан не класс it_asist,а просто как элемент.Просто добавьте точку и футер внизу окажется)))
 
А где можно скачать фотошоп для мак
 
Цитата
Guest пишет:
А где можно скачать фотошоп для мак
http://www.torrentino.com/torrents/580513
 
Цитата
Аля пишет:
Доброго времени суток! Ваш класс "обнулитель" обычно обзывают clearfix. Отменяет обтекание флоатов. Интересный курс, спасибо
Всё верно. И используется обычно, дабы не захламлять лишним "мусором" в коде, как псевдо-класс. Полный вариант самого распространенного варианта таков:

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

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