Jump to content

klierik
 Share

Recommended Posts

splat.jpg

Техническое задание.
 
Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

В качестве эталонного браузера использовать Chrome или Firefox.
Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий.
 
Соответствие макету
Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера.
 
Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них.
 
Стандарты
HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.
 
В кажестве исходного кода для CSS использовать препроцессор LESS или SASS.
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 
Сброс стилей
В качестве сброса стилей браузера использовать Normalize.css.
 
Javascript:
За основу взять фреймворк jQuery версии 1.11.х или 2.x.x.
Для поддержки HTML5 тегов в IE можно использовать код:
 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

 
Допускается применение modernizr если потребуется.
 
Ширина сайта
Стандартная ширина сайта - 960px.
 
Grid
За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка)
 
Изменение/наполнение контентом
Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал".
 
Особености макета
1. Шапка
1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее.
1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок.
1.3. Возможно добавится пару языков.
1.4. Поле поиска
1.4.1. В поле поиска добавить placeholder с текстом "Искать...".
1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю.
1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете.
 
2. Слайдер в 4 колонки.
Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним.
Требуется поддержка для touch-устройств для прокрутки контента.
 
3. Промо-слайдер
3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот)
3.2. Кол-во слайдов может быть больше или меньше, чем на макете.
3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна).
3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера.
3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке.
3.6. Слайдер не влияет на 4 колонки под ним.

4. Контент
4.1. Меню слева. Пукты меню могут быть в несколько строк длиной.
4.2. Центральная колонка
4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером.

5. Футер
5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook.
5.2. Оступ снижу дл футера сделать высотой 20px.

Дополнительно
Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха.

WYSIWYG
Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE
 
Масштабирование страниц
Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение.
Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem"
 
HTML код

  • Кодировка – utf-8
  • Структурный, не комментируемый код
  • Семантическая разметка на уровне грамотного использования тегов.
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.

LESS/SASS код

  • Структурный, отбивка табами.
  • Комментариями обозначены начало/конец крупных модулей/блоков разметки.
  • Допускается использование вендорных префиксов.
  • Стили для IE вынесены в отдельные CSS файлы, если они потребуются.
  • Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation)

Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика
 
Javascript код

  • Структурный, отбивка табами.
  • Имена переменных осмысленные, на усмотрение разработчика.
  • Снабжен комментариями: описаны назначения
    • методов/классов
    • функций
    • условий.
  • Для объемных задач используется ООП, для простых – обычные функции.
  • Код должен быть без ошибок.
  • При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика.

Изображения

  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows)
  • Малые изображения и иконки объеденить в спрайты.
    • Для полноцветных RGBA картинок можно использовать инструмент Stitches
    • Для векторных изображений иожно использовать IcoMoon

Организация структуры файлов и папок

  • HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
  • Стили в папке - /css/
  • SASS/LESS в соответствующей папке - /sass/ или /less/
  • Javascript - /js/
  • Изображения оформления - /images/
  • Изображения содержания - /thumbs/ или /pic/
  • Шрифты - /fonts/

Наглядный пример
 
Краткий вариант - только директории:
 

Скрытый текст

.├── project
│   ├── css
│   ├── images
│   │   ├── carousel
│   │   ├── gallery
│   │   ├── icons
│   │   │   └── src
│   │   ├── ie
│   │   ├── loader
│   │   ├── table
│   │   └── title
│   ├── js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   └── typeahead
│   │   └── scripts
│   ├── less
└───└── thumbs

 


 
Полный вариант -- директории и файлов:
 

Скрытый текст

.├── project
│   ├── 10.html
│   ├── 11.html
│   ├── 3.html
│   ├── 4.html
│   ├── 5.html
│   ├── 6_1.html
│   ├── 6_2.html
│   ├── 7_1.html
│   ├── 8.html
│   ├── 9.html
│   ├── css
│   │   ├── project.css
│   │   ├── project.ie8.css
│   │   └── project.min.css
│   ├── images
│   │   ├── carousel
│   │   │   ├── control_left.png
│   │   │   └── control_right.png
│   │   ├── gallery
│   │   │   ├── control_corner_next.png
│   │   │   └── control_corner_prev.png
│   │   ├── icons
│   │   │   ├── Readme.txt
│   │   │   ├── spritesheet.png
│   │   │   ├── src
│   │   │   │   ├── bank_atm.png
│   │   │   │   ├── bank_office.png
│   │   │   │   ├── close.png
│   │   │   │   ├── social_fb.png
│   │   │   │   ├── social_gplus.png
│   │   │   │   ├── social_li.png
│   │   │   │   ├── social_mail.png
│   │   │   │   ├── social_pin.png
│   │   │   │   ├── social_rss.png
│   │   │   │   ├── social_tw.png
│   │   │   │   └── tags.png
│   │   │   ├── stitches.txt
│   │   │   └── stylesheet.less
│   │   ├── ie
│   │   │   └── caption-bg.png
│   │   ├── loader
│   │   │   ├── ajax-loader.gif
│   │   │   └── ie.png
│   │   ├── logo.png
│   │   ├── table
│   │   │   ├── sort-asc.png
│   │   │   └── sort-dsc.png│
│   └── title
│   │   └── credits.png
│   ├── index.html
│   ├── js
│   │   ├── jquery-1.10.2.min.map
│   │   ├── jquery.min.js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   │   ├── jquery.jcarousel-autoscroll.min.js
│   │   │   │   ├── jquery.jcarousel-control.min.js
│   │   │   │   └── jquery.jcarousel-core.min.js
│   │   │   └── typeahead
│   │   │   ├── countries.json
│   │   │   ├── typeahead.js.zip
│   │   │   └── typeahead.min.js
│   │   └── scripts
│   │   ├── project_navigation.js
│   │   └── project_scroll_gallery.js
│   ├── less
│   │   ├── block.less
│   │   ├── breadcrumbs.less
│   │   ├── buttons.less
│   │   ├── carousel.less
│   │   ├── close.less
│   │   ├── dropdown.less
│   │   ├── forms.less
│   │   ├── project.less
│   │   ├── icon.less
│   │   ├── jquery.jcarousel.less
│   │   ├── jquery.typeahead.less
│   │   ├── layout.less
│   │   ├── loader.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navbar.less
│   │   ├── navs.less
│   │   ├── page.less
│   │   ├── pagination.less
│   │   ├── scaffolding.less
│   │   ├── std.less
│   │   ├── tables.less
│   │   ├── unit.less
│   │   └── variables.less
│   ├── thumbs
│   │   ├── block__banner.jpg
│   │   ├── google-map.jpg
│   │   ├── home-page__gallery_03.jpg
│   │   ├── home-page__gallery_05.jpg
│   │   ├── home-page__gallery_07.jpg
│   │   ├── home-page__gallery_09.jpg
│   │   ├── home-page__gallery_11.jpg
│   │   ├── jcarousel_slide.jpg
│   │   ├── navigation__dropdown__thumb_03.jpg
│   │   ├── news_thumb_03.jpg
│   │   ├── news_thumb_06.jpg
│   │   ├── news_thumb_08.jpg
│   │   ├── std__thumb_01.jpg
│   │   ├── std__thumb_02.jpg
│   │   ├── unit__thumbnail_03.jpg
│   │   ├── unit_promo__thumb_03.jpg
│   │   ├── unit_promo__thumb_05.jpg
│   │   ├── unit_promo__thumb_07.jpg
└───└───└── unit_promo__thumb_09.jpg

 

 

Удачи в обучении :)

 

Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим :)

За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта

design 1 - splat.zip

  • Like 8
Link to comment
Share on other sites

Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит.

 

Это значит, что оформляя именно контентную часть нельзя опираться на классы, и необходимо предусмотреть стили для всех тегов (в рамках визуального редактора), которые захочет использовать менеджер?

Link to comment
Share on other sites

  • Кодировка – utf-8
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.
  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") 

Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы:

где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )

 

Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит.

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора? 

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались? 

Edited by advokatua
Link to comment
Share on other sites

Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы: где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )
 

Как было сказанно в первом посте, за основу я взял ТЗ с выше указанного веб-ресурса. Я изменил его формулировку, а само задание составил таким образом что бы оно отвечало не только на вопрос "что делать", но и "как делать".

 

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора?

С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован. Не будем забывать что на "фротне"то у нас весь текст или его часть отображаться как кастомным шрифтом так и иметь кастомное форматирование и/или дизайн отдельных элементов контента.

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались?

Данное ТЗ носит обучающий характер да и только. Большую часть данного задания, как я уже говорил выше, я взял с выше указанного ресурса. 

Недавно в одной из веток форума один из новичков жаловался что к макетам нет ТЗ от чего возникло желание закрыть данный пробел.

В действительности некоторые пункты в задании скорее всего будут отсутствовать, так как заказчик или не будет разбиратся в предметной области или будет думать что "это и так понятно".

  • Like 1
Link to comment
Share on other sites

С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован.
 

Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

Link to comment
Share on other sites

Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.
 

а, если смотреть в таком направлении, то ситуация иначе (я не совсем корректно понял о чем ты говорил).

я на практике сталкиваюсь с ситуацией когда весь ресурс, как правило, имеет один шрифт (не важно кастои или дефолтный), который задается, например, в <body>. а конент менеджера помещается в <div> с соответствующим классом, который выступает в роли контейнера как раз для такого типа данных.

но, менеджеру ничего не мешает установить свой шрифт для этого контента в том же редакторе. в таком случае свойство будет указано в аттрибуте style="" и будет иметь приоритет над дефолтными стилями сайта. т.е. тем самым контент может иметь как дефолтный шрифт страницы или же указанный непосредственно в редакторе.

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

я не встречал такого заказчика. Но, к примеру, мне попадалось ТЗ где в PDF был описан каждый элемент страницы а так же его работа при тех или иных действиях пользователя. Пускай техническая часть там была достаточно сухо описана, но зато был очень хорошо описана функциональная часть (хотя даже в таком случае покрывается все-го навсего около 50% всех возможных ньюансов, которые возникают в будущем при разработки).

Link to comment
Share on other sites

Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 

 

А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.

Link to comment
Share on other sites

А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.
 

Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только :)

А вообще консоль -- это друг разработчика.

 

сколько примерно такая работа стоит? 

не понял сути вопроса.

Link to comment
Share on other sites

Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только А вообще консоль -- это друг разработчика.
 

 

Теперь я понял. Оказывается к нему есть куча интересных плагинов, в том числе и плагин автоматизации любого процесса. Отличная штука.

Link to comment
Share on other sites

Можно ли взять за основу HTML5 Boilerplate ?
 

можно попробовать. я с ним не работал.

 

в 960 grid есть reset.css его можно использовать с Normalize.css?
 

я использовал 960 последний раз пару лет назад. надо пробовать...

Link to comment
Share on other sites

  • 1 month later...
но, менеджеру ничего не мешает установить свой шрифт для этого контента в том же редакторе. в таком случае свойство будет указано в аттрибуте style="" и будет иметь приоритет над дефолтными стилями сайта. т.е. тем самым контент может иметь как дефолтный шрифт страницы или же указанный непосредственно в редакторе.

А если использовать !important для стилей элементов внутри div'a с контентом менеджера? По крайней мере для таких критичных как цвет текста, размер и фон?

Link to comment
Share on other sites

  • 2 weeks later...
А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))
Лично с товарищем klierik'ом приедем, были здесь уже такие умники, как говорил старина Verder, который уже к сожалению не появляется на этом форуме: "Найдём и уши отрежем". 
Link to comment
Share on other sites

А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))

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

 

@Игорь Ермаков,

:rofl:  :rofl:  :rofl: 

Link to comment
Share on other sites

  • 2 weeks later...
Побейте.

слайдера нет, правая стрелка слайдера ушла слишком далеко, верхняя полоска это не картинка а деталь слайдера. 

блок с классом hd находится внутри блока header, но превышает его размерами..)

Очень хаотичные названия классов.. Например блок с классом header-left - в правой стороне))

Неточностей много, вон валидатор тоже ругается - http://validator.w3.org/check?uri=http%3A%2F%2Fsplat.cc.ua%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

а вот за такие куски кода побить надо обязательно)

border: 10px solid #fff;border-bottom: 10px solid #d7d8d9;border-left: 10px solid #d7d8d9;margin-left: 174px;margin-top: -74px;.location {margin-top: -100px;background: #f4f6f7;background-image: url(images/checkin.png);background-position: 28px 23px;background-repeat: no-repeat;width: 168px;padding: 26px 26px 20px;}

сгрупируйте background, margin, border и так далее. А еще слишком много отрицательных margin-ов.

Edited by CroaToa
Link to comment
Share on other sites

да, съехала.

я пока не допёрла как связать верхнюю часть слайдера с самим слайдером.

кажется,я такого не сделаю

про hd и что-то там left справа я исправлю, совсем с ума сошла.

с валидатором разберусь, никуда не денусь.

а там с фонами проблема была. чего-то не так было, как мне нужно. ну ладно.

 

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

будет оно вообще двигаться у меня и передвигаться та розовая хрень корректно.

 

а так спасибо. нет у меня надзирателя.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy