Search the Community

Решил добавить к себе в портфолио "резиновую верстку", начинаю делать и понимаю, что вот вот и адаптивная щас будет. То есть пару часов и уже адаптив. Вопрос: время резины прошло что ли? для чего сейчас применяют такой вид верстки?(возможно - это экономия, то есть резина нужна для больших экранов/планшетов(ну примерно такой диапазон: max-width: 1920px; min-width: 768px), а для мобильников нам не нужно(ведь по сути для мобильников, свой минималистичный дизайн и т.п.) и экономнее сделать именно резину?).

Здравствуйте, форумчане. Я начинающий верстальщик и хотел бы узнать от более опытных, какие ошибки допущенные в верстке ? Вот ссылка на макет: template-3.esy.es Спасибо за внимание и уделенное время.

Доброго времени суток. Подскажите пожалуйста какой-нибудь CSS Фреймворк для мобильной версии сайта. Не адаптив - а именно только для мобилы. Где вообще можно посмотреть пример каркаса? ) Скинули макет с шириной 360px. Кто как верстает мобильные версии? )Скиньте пример плз

http://codepen.io/anon/pen/LpgeVq?editors=110 Проблема в следующем. Первый абсолютно спозиционированный относительно body элемент располагается чуть ниже верха страницы. (Должен примыкать прямо к верху: top: 0 стоит.) Почему верхнее поле заголовка (body > h1) так влияет на него именно в body? Но этого не происходит в простом wrapper'е.

Всем привет! Имеется одна до безобразия простейшая веб-страница (http://www.cssdesk.com/FzRm2), созданная в процессе изучения азов HTML и CSS. Вопрос таков: что в HTML-коде и таблице стилей данной вёрстки можно было бы сделать грамотнее/иначе/правильнее/лучше? За банальный пример простите уж, да больно хотелось спросить... Спасибо!

Здравствуйте. Ищу команду(или поставщика проектов) для постоянного(не разового) сотрудничества в области верстки сайтов. (Не важно кто будет поставлять проекты(дизайнер, бекендер или сеошник) - главное, что бы это был не перекуп(к квалифицированным проект менеджерам это не относиться), которому сайт необходимо выполнить за 10 рублей + за 3 минуты + без наличия тз.) Мое резюме можно увидеть по следующему адресу: https://www.fl.ru/users/Yamaradg/ Всем кому будет интересно данное предложение просьба писать на следующие контакты: Почты: yamaradg@gmail.com Yamaradg@yandex.ru yamaradg@mail.ru Skype: yamaradg1 ICQ: 602950559

В общем суть картины тут: http://skin-game.ru/. Если пролистать в самый низ картины, то видно линию. Но я хочу ее поставить не далеко после слайдера. Как исправить, а то чего-то я не углядел.

Залил на бесплатный хостинг http://verstkaaaa.esy.es/ Вот макет в jpg http://cs624327.vk.me/v624327186/4f25a/dh9wBjRrjX8.jpg Я совсем новичок в верстке, нужна критика по структуре html, верна ли она, не переборщил ли я с классами и особенно с комментариями. Адаптивил под разрешения в фаер фоксе при ctrl+shit+m Думаю еще сделать под телефоны скрывающиеся мобильное меню, и надо форму допилить, и плавный скрол. Подключено много всего в коде, не мешает ли это, если я не использую все? (скрипты попап и т.д.) Использовал только сетку бутстрап. Макет взял из одного открытого заказа на фл.ру, могу ли я использовать это для своего портфолио, или лучше текст поменять на лорем? Заранее всем спасибо.

Привет! Я Лика и я фрондев уже около 4х лет и хобби ради решила завести свой влог на ютубе о вебе. Дабы делится опытом конечно, а не гордости ради, хаха Сейчас Я записываю общие темы, например как найти свою первую работу, создать резюме или где учится. В этой темке я хочу спрашивать начинающих верстальщиков/фронт-ендов/ui, что им интересно услышать. Это поможет мне записывать более полезные видео для вас же. Через пару дней я планирую писать про поиск первой работы и хотелось бы узнать, какие нюансы вам интересно услышать. Какие трудности вызывает поиск той самой-самой первой работы-заказа. Я попытаюсь рассказать, как решить эти нюансы и получить желательный оффер! Жду миллионы вопросов!

Уважаемые господа. Помогите с решением данной проблемы: есть страница выводящая подкатегории в Joomla-шаблоне, не могу найти решение вывода подкатегорий не списком "друг под другом" (как сейчас), а по-строчно (по 2,3,4 элемента в строке). В коде html-прописаны размеры div-блоков каждого нового выводимого элемента, но что-то мешает этому отрабатывать корректно. Просмотр кода и тыканье css-стилей через инструмент "проинспектировать элемент" (как это делаю обычно) - результатов не дали. Помогите, пожалуйста! Вот ссылка на страницу: http://ruprosport.marker-armavir.ru/index.php/shop-now/18

Все здравствуйте, я столкнулся с такой проблемой при создании галереи с помощью jQuery и fancybox. Не срабатывает функция fancybox, в браузере пишет: "Uncaught TypeError: $(...).fancybox is not a function" Может кто-нибудь сталкивался? Все файлы закачены на сервере и jQuery подключена. Вот страница с галереей: http://checkedin.esy.es/gallery.html

Вот сайт http://dima.chpmodul.com.ua/ сделан по макету http://absolvo.ru/tmp/uta.png на вид все вроде правильно, только текст пиксель в пиксель никак не могу подогнать, расстоянием между строк между словами и буквами угадать не получается. В основном мне интересна правильность самой верстки, но если увидите еще какие-то ошибки - буду благодарен за критику. Спасибо заранее

Мне в разборе прошлого шаблона столько замечаний накидали. А здесь как? Вот готовый шаблон: http://testing.nordwing.ru/elena/index.html Вот макет: https://yadi.sk/i/KiBTLbhpigkYm

Хочу сделать логотип межу пунктами меню как на изображении http://storage9.static.itmages.ru/i/15/0830/h_1440960187_5020454_95be8f1766.jpg Но не до конца понимаю как это все сделать грамотно. У меня есть два варианта, как это реализовать. <header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"><img src="" alt=""></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header><header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Либо сделать одним из пунктов ссылку и в нее вставить картинку, либо ссылке установить бэкграунд и туда вставить картинку логотипа? Но, что меня больше интересует, как мне это провернуть с адаптивностью? мне по идее надо как вырвать эту ссылку оттуда и поставить перед меню, а оттуда вообще убрать этот `li` с ссылкой на логотип, подскажите как это делаю вообще? на маленький устройствах я бы хотел, чтобы была такая верстка <header> <a href="" class="logo"><img src="" alt=""></a> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Или мне надо создать сразу эту ссылку и установить ей свойство "display: none?" и наоборот, но мне кажется это как то глупо

Всем привет. Как реализовать подобный вид материалов на главной, как на скриншоте ниже: Удалил картинку (КЛИК 18+) Интересно как-это все реализовать, сам дизайн я уже сверстал, но незнаю как сделать что бы из админки я добавлял новую запись прописывал к ней тайтл, далее добавлял превью-картинку (которая будет видна только на главной, как из примера выше) и само содержимое записи,а это обычный код фрейма видео порнушки, который будет виден на отдельной страницы после перехода по ссылке (клика тайтла или картинки). А это мой шаблон: Удалил картинку (КЛИК) UPD. Что бы не плодить целую армаду новых тем, задам тут еще один близкий к этой теме вопрос: Юзаю лайтовый парсер который парсит коды видео (iframe) с крупных адалт-тьюбов, и после я буду эти коды массово заливать на сайт, но вопрос как сделать реливантные превью-картинки к каждому видео? Находил в выдаче дорвеи, с такой схемой, но в програмировании и языках плохо разбираюсь.

Приветствую! Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть: А вот как в Safari: Как видите, продолжение background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу). Вот верстка: <!DOCTYPE html><html lang="ru"><head> <meta charset="UTF-8"> <title>{title}</title> <link href="engine/templates/nn/tmp/css/style.css" rel="stylesheet"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="engine/templates/nn/tmp/js/hint.js"></script> <script type="text/javascript"> if (!('flexWrap' in document.createElement('div').style)) { document.documentElement.className += ' no-flex'; } </script></head><body><div onclick="show('none')" id="wrap"></div><div id="wrapper"> <div id="left">{left}</div> <div id="main">{main}</div> <div id="right">{right}</div></div><footer> <div class="footer_content"> {footer} </div></footer></body></html>Вот CSS: #wrapper { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; margin: 75px auto 16px; width: 1120px; background-color: #fff; border-radius: 5px; overflow: hidden;}.no-flex #wrapper { display: table; width: 100%; max-width: 1122px;}.no-flex #left,.no-flex #right,.no-flex #main { display: table-cell; vertical-align: top;}#left { width: 235px; float: left;}#right { width: 285px; background-color: #f6f9fa; float: right; flex-shrink: 0;}#main { width: 420px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); float: left; padding: 50px 90px; position: relative;}Буду благодарен за любую помощь!

Впервые кому-то показываю свою работу, может что-то подскажите, может что-то явно неуместно, криво, категорически неправильно. К критике отношусь спокойно, даже привествую http://ketkin.pro/

Помогите пожалуйста. Я хочу научиться верстке. Хочу попробовать сверстать вот это http://images.wikia.com/dragonvale/images/e/e8/Space_invader.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 если потребуется. Ширина сайта Стандартная ширина сайта - 100%. Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета Главная страница 1. Фоновое изображение должно занимать полностью область окна браузера. По умолчанию картинка имеет значение ширины 100%. 1.1. В случае если ширина окна браузера больше чем высота, ширина картинки 100%, высота "auto". Картинка приклеена к верху и обрезается снизу. 1.2. В случае если ширина окна браузера меньше чем высота, установить значение высоты для картинки 100%, а для ширины "auto". Картинка должна выравниватся по центру, тем самым обрезая края слева и справа. 1.3. Вышеуказанные пункты реализовать при помощи CSS3 2. Меню 2.1. Меню имее отступ сверху фиксированный. 2.2. Высота меню не фиксированна. Количество пунктов может менятся. Текст в пункте меню может быть в несколько строк -- такой пункт должен выглядеть более сжатым по отношении к другим за счет line-height. 2.3. Ширина меню фиксированна. 3. Слайдер 3.1. Блок с текстом всегда должен быть по-центру как вертикально так и горизонтально. Контент внутри может и будет менятся. 3.2. Ширина блока по-центру может занимать все доступное срастранство, но не может "налазить" на меню слева. Так же этот блок не должен "налазить" на индикацию в нижнем правом углу если там будет много слайдов. 3.3. Индикация слайдов размещается в нижнем правом углу. Отступы справа и снизу фиксированные. Элементы индикации могут выстраиваются в несколько строк при сужении экрана (в таком случае возможна ситуация конда индикация ложится поверх блока по-центру). Кликатебельная зона должна быть достаточной что бы в неё можно было тыкнуть пальцем на смартфоне. 3.4. Требуется поддержка touch-устройств. Внутреняя страница 1. Блок с белой рамкой имеет фиксированную высоту, выравнивается по-центру области в которой размещается. Его ширина может достигать ширины всей строки, за вычитом ширины меню. Текст внутри данного блока должен выравниватся вертикально по-центру. Строк может быть как одна так и две. Если контент превышает область -- прятать излишки. 2. Белая область на странице. 2.1. Данная область занимает всё пространство области, при этом имея фиксированный отступ сверху и слева. 2.2. Левая колонка имеет фиксированную ширину 2.3. Правая область, с картой, занимает все доступное пространство. Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "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/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 2 - relax clinic.zip

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

Приветствую, уважаемые форумчане. Стандартная, в общем-то, ситуация. Начал изучать html и css, сверстал свой первый макет. Очень хотелось бы услышать вашу критику. http://stx.tioo.ru/ Спасибо за ваше внимание и время.

Добрый день. Помогите решить проблему с Outlook 2007. Письмо в нем тянется на всю ширину, хотя у таблицы стоит ограничение 600px по ширине. В остальных почтовиках и браузерах все гуд

Оцените пожалуйста верстку http://layout.zz.mu/

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

Всем привет. Есть такое изображение, которое никак не делится на слои в фотошопе, то есть это обычный растровый слой без всяких стилей и т.п.. Текст тут не важен, важно сверстать градиент, но как это сделать не имея данных о градиенте?(я даже не могу просто взять фон и поставить его тупо как background, так как на нем текст).