Search the Community

После нескольких недель упорного изучения HTML и CSS таки сверстал первый макет. Насколько смог, сделал сайт адаптивным. Интересно было бы получить отзывы. тыц. Заранее спасибо :]

Доброго времени суток, подскажите пожалуйста почему происходит выпадание?Замечание по другим "пунктам" приветствуются! http://codepen.io/Kamzed/pen/eBBLoB

Хочу вам предложить товарищи веб мастера сайт где можно верстать мышкой, высокий уровень визуализации. devdesire.ru Это конструктор верстки по вашему макету без мусора! Практически нет разницы делать в нем или писать верстку вручную, мышкой даже быстрее получается)

Привет!.Я начинающий верстальщик,который стремиться в будущем стать Front-end разработчиком и создавать интерактивные и динамичные сайты. Сейчас я занимаюсь версткой landing page и одностраничных сайтов-визиток на HTML5 и CSS3.Для дальнейшего развития ,я ищу заказы на верстку за символическую плату. Мои навыки и умения: Html/HTML5-верстка сайтов и интерфейсов на основе макетов PSD; CSS; Базовые знания PHP и JavaScript. Элементарные знания в AJAX, jquery, OpenServer, Wordpress, bootstrap, юзабилити, настройка контекстной рекламной кампании в поисковых системах. Adobe Photoshop (базовые навыки). С меня -быстрота обратной связи,исполнительность и кроссбраузерность ,с вас-PSD макет и реалистичный взгляд. Для ясности напомню-я новичок,который хочет получить опыт и создать портфолио.Поэтому работу буду выполнять качественно и не так быстро,как ,возможно,вам бы хотелось. Все подробности можете узнать у меня лично: 1)https://www.facebook.com/tatiana.kondratyeva.125 2)Tatiana89252514982@yandex.ru

Дорогие друзья уже долго не могу наладить работу собственного шрифта. http://rmsgames.ru/6px2bus.ttf это путь к шрифту. Кодировка utf-8. Все делал по уроку с этого сайта. Вот кусок кода который у меня не работает. #test1 { @font-face font-family: bus; src: url(www.rmsgames.ru/6px2bus.ttf); font-size: 170%; font-family: 'Press Start 2P'; background: black; color: #bed143; text-decoration: green; /* Убираем подчеркивание */ border: none; outline: none; }

Добрый день форумчане. Прошу критики/советов/рекомендаций. Сайт -> Сам макет(Yandex.disk) -> Скрин макета Это мой третья самостоятельная работа с PSD и первая, которая в адаптиве. Для компиляции sass и скриптов, а также для Live reload использовал программу Prepros. Для разметки использовал susy фреймворк и breakpoint. Проверял на работу в Chrome, Firefox, Opera, Edge. В IE 11(и ниже) не коректно отображается галерея.

Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция <div class="block"> <a href="#"><i class="vk"></i></a> <a href="#"><i class="ok"></i></a> <a href="#"><i class="gp"></i></a> <a href="#"><i class="fb"></i></a> <a href="#"><i class="in"></i></a> <a href="#" class="fullwidth">Link</a> </div> элемент с классом fullwidth всегда по ширине в 100% нужно сделать что бы вс элементы без этого класса были inline-block (аля only vertical) и квадратные при условии что их может быть больше или меньше чем сейчас.

В ступоре. Очень прошу помощи. Дело такое. Верхняя шапка сайта (фиолетовая) не хочет адаптироваться под телефоны, причём всё остальное работает, кроме самой шапки и футера. Так же замечена очень интересный баг: при проверки адаптивности сайта ресайзом окна или масштабированием в google chrome для десткопа или даже проверке с помощью специальных ресурсов - всё работает как надо. Вы можете сами проверить по адресу flixthebro.com При этом заходя на сайт с любого мобильного устройства (тестировал на 3-х) выдаёт почему то другой результат. Ещё несколько забавных примечаний: допустим установил я размер текста в шапке 32px и в контенте 32px. На телефоне размер шрифта в шапке никак не сопоставим с размером шрифта в контенте и намного мельче. То же самое и с футером. / Так же я эксперементрировал и пробовал убирать разные строки из css и ничего не получалось. Чем же эти два фиолетовых блока провинились? Почему они такие "особенные"? Ах да ещё надо бы сказать, что сайдбар сделан только для того, чтобы в случае надобности начать его использовать активировать легко и просто, сейчас он абсолютно не нужен, но в отличие от этих двух работает отлично. Я отчаялся и совсем перестал хоть каплю иметь соображения из-за чего это может быть. Прошу помощи от вас, господа формучане.

Здравствуйте, уважаемые форумчане) Помогите с небольшой проблемой. Криво отображается блок в Firefox. Хотя в Chrome все нормально. Хром Firefox Код CSS и HTML: .mail-delivery { box-sizing: border-box; float: right; width: 560px; max-height: 220px; padding: 6px; color: #5a5a5a; font-weight: 400px; border-radius: 16px; background: url("../img/message-pattern.png") #fff; } .message-wrapper { box-sizing: border-box; width: 549px; max-height: 208px; padding:5px 20px 5px 20px; background-color: #f8f7f4; border-radius: 15px; clear: both; } .message-wrapper p { box-sizing: border-box; margin-bottom: 35px; color: #5a5a5a; font-size: 16px; font-weight: 400; line-height: 22px; } .message-wrapper form { font-size: 0px; } .feedback.pop-window { display: block; } .message-wrapper input[type="email"] { box-sizing: border-box; display: inline-block; width: 356px; margin: 0; margin-right: 10px; margin-bottom: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; color: #323232; font-size: 16px; line-height: 24px; vertical-align: top; box-shadow: 0 0 0 2px #d3d3d2; border: none; border-radius: 5px; } .message-wrapper input[type="submit"] { display: inline-block; padding:10px 21px; color: #fff; font-size: 17px; line-height: 24px; vertical-align: top; font-weight: 700; text-align: left; border: 0; border-radius: 40px; background-color: #e94e37; background-image: linear-gradient(to bottom, #f26843 0%, #e74b36 100%); box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64); cursor: pointer; outline: none; } <div class="mail-delivery clearfix"> <div class="message-wrapper"> <p> Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой не нужной ерунды. Честно =) </p> <form class="message-delivery" action="url" method="get"> <input class="form-field" id="mail" type="email" name="email" placeholder="Электронная почта" required> <label class="login-form__label" for="mail">Электронная почта</label> <input type="submit" value="Отправить"> </form> </div> </div>

Всем привет! Народ, есть у меня страничка: Страница . Там есть раздел "История компании". Там слайдер. У этого слайдера есть "пагинатор" - кругляши для перехода между стлайдами. Мне надо между этими кругляшами линию красную разместить, да так, чтобы линия была на заднем плане, а сами кругляши - на переднем. Как я только с z-index не игрался, не помогает. И позиционировать пробовал, и opacity менять пробовал, всё никак не могу это сделать. Народ, кто знает, помогите пожалуйста.

Сайт caddysmellsliketrees.ru, исходники. "Макеты": альбомный, портретный Прошу оценить дизайн и код. На данный момент есть проблемы с отображением на айфонах и в андроидном вебвью, но куда копать, чтобы их решить, я не знаю.

Приветствую. Пожалуйста, раскритикуйте мою верстку по таким критериям. Сайт —- Макет. Именование классов якобы по БЭМ. Семантика. Позиционирование элементов. Это основное, что я хочу узнать для себя. Если есть то, что конкретно бросается в глаза в коде, прошу скажите. Большое спасибо!

Доброго времени суток форумчане, хотел узнать можно ли реализовать данную функцию с помощью css?Если да, то как?

Всем доброго времени суток, пожалуйста посмотрите на код(небольшой кусочек работы) и оцените, хотелось бы услышать что правильно что нет, что можно было бы по другому, как можно детальней и дотошнней, семантика пространство имен и прочее прочее, в общем чем больше критики(желательно конструктивной и обоснованной) тем лучше, я специально выкладываю маленький кусок что бы, было не напряжно его изучить! http://codepen.io/Kamzed/pen/rrqJJz Заранее благодарю всех добрых людей которые согласятся помочь.

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

Подскажите откуда берется высота заголовка, скриншот прилагается, http://joxi.ru/YmEY4ZQHxN36m6 думаю код здесь не нужен, просто скажите как это высота генерируется!

Доброго времени суток. Сделан вот такой выплывающий блок по клику на маленькую иконку в правом нижнем углу https://jsfiddle.net/Ldg4upzq/9/ 1) как сделать, чтобы блок при открытие выезжал справа, а при закрытии уезжал влево? 2) каким трансформном можно сделать,чтобы крестик при наведение расходился на 4 полоски по диагонали? Спасибо)

В общем искал объяснение в инете, и ничего попутного не нашел. Проблема собственна решена, но не понятна причина. Есть у меня кнопка, которая спозиционирована внутри родительского контейнера абсолютно. Только вот когда, макет у меня ужимается до мобильных разрешений, текст кнопки переносится на след. строку, хотя места вокруг достаточно, для расположения текста в одну линию(на прикрепленном к посту скрине, показано это странное поведение). Проблема, из-за чего возникает такое поведение возникает из-за этих двух строчек: left: 50%; transform: translateX(-50%); если их убрать, то текст кнопки в одну располагается в одну линию. Вот полный пример . Данная проблема решается, если задать кнопке white-space: nowrap. Собственно вопрос почему все таки при центрировании через absolute: position текст у нас переносится на новую строку, хотя места у нас вполне хватает. Ширину кнопке явно я не задаю, т.к. текст может быть произвольной длины.

Доброго времени суток. Возникла проблема, мне надо сделать спойлер, без лишнего блока, т.е. без разбиения текста на анонс и основную информацию. Смогла сделать только через ховером... а надо бы по клику >< И почему-то затуманивание не получается в месте обрезки сделать (если делаю через скрипт с разными блоками получается...) https://jsfiddle.net/p6dczm5k/2/ Спасибо )

Здравствуйте! При оформлении сайта решил установить вместо бордюра изображение. В левом верхнем углу изображения имеется узор,для его сохранения ширину верхнего и левого бордюра пришлось делать равной размерам узора,при это контент сдвинулся вниз и вправо. Подскажите,как можно сдвинуть контент на изображение бордюра или возможно есть другой способ установить изображение в угол окна. Так же хочу добавить,что окно (блок div),на котором установлено оформление бордюра будет изменяться,по высоте при добавлении контента и по ширине при изменении ширины окна браузера. Код CSS: section { float: right; width: 67%; height: 455px; margin: 10px; opacity: 0.8; padding: 0px; border-bottom: 10px solid; border-left: 128px solid; border-right: 10px solid; border-top: 158px solid; -moz-border-image: url(/themes/standart/style.png) 158 10 10 128; -webkit-border-image: url(/themes/standart/style.png) 158 10 10 128; -o-border-image: url(/themes/standart/style.png) 158 10 10 128; border-image: url(/themes/standart/style.png) 158 10 10 128; }

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

Делаю верстку валидно и кроссбраузерно на чистом html и css (пока что javaScript не знаю).

Как сверстать кнопки с такими декоратиными элементами сверху/снизу (см. скрин). Подозреваю, что через псевдоэлементы, но я знаю только как сделать это в виде треугольников. Есть ли возможность сделать это в виде кривой, как на скрине? https://www.dropbox.com/s/8x15uim5fzrcpo9/Screenshot 2016-09-19 22.52.44.png?dl=0

помогите пожалуйста разметить страничку стандартными header + content + footer вот моя попытка . она плоха тем, что для header, footer используется такое правило: .icons_item:nth-child(6), .icons_item:nth-child(1){ width: 100%; } хотелось бы использовать чистый flexbox

помогите пожалуйста переверстать элементы есть несколько элементов. нужно чтобы на iPad вертикальной ориентации они располагались так: 00 00 00 ,а на iPad горизонтальной ориентации, они располагались так: _00_ 0000 я решил эту задачу, используя flex-элементы и скрытые элементы: jsfiddle page но мне нужно решение, которой использует только возможности flexbox(без костылей в виде скрытых элементов)