Search the Community

Привет. 1. Первый вопрос по CSS. Если задать font-size>line-height, например, font-size:24px и line-height:12px, то половинный интервал будет отрицательным (-6px). не могу представить поведение строчного элемента, когда у него половинный интервал отрицательный. <p style="fontsize: 12px; lineheight: 12px;"> This is text, <em>some of which is emphasized</em>, plus other text<br> which is <strong style="fontsize: 24px;">strongly emphasized</strong> and which is<br> larger than the surrounding text. </p> Не понимаю, почему в данном примере контейнер строки по высоте равен 15 пикселей (источник - книга Мейера по CSS, стр 220). Как блочные элементы выкладываются в документ понятно - сверху вниз кладутся прямоугольники-блоки один под другим. При этом надо учитывать поля, рамки и отступы + плавающие элементы. А вот как это происходит с текстом и текстовыми элементами внутри блока, а они ФОРМИРУЮТ ВЫСОТУ блока в большинстве случаев - мне не понятно. В строках есть блоки (не блочные элементы, а просто блоки) - область содержимого (content area), строковый блок (inline box), контейнер строки (line box). Написано в книге Мейера, что "Контейнер строки (line box) - это наименьший блок, охватывающий самую верхнюю и самую нижнюю точки строковых блоков, находящихся в строке. Иначе говоря, верхний край контейнера строки размещается вдоль вер шины самого высокого строкового блока, и низ совпадает с низом строкового блока, расположенного ниже всех." Не понимаю, как получили число 15 пикселей в примере выше. Не понимаю, как выстраиваются строковые блоки внутри контейнера строки. Понял только то, что каждая строка лежит в контейнере строки, эти контейнеры ложатся один под другим в плотную. 2. Второй вопрос по CSS. Я написал <strong style="font-size: 24px;font-family:arial;">Ёу</strong> , а потом открыл девтулс и выдели этот строчный элемент. Получил это : Не понимаю, что это за выделенная область? Что за 26 пикселей, когда я указал 24 пикселя?. У строчного элемента есть строчный блок (равен высоте line-height), есть область содержимого (равна font-size), есть контейнер строки. Модель 1. Модель 2 У элемента есть область содержимого - это из модели контейнеров. Насколько я понимаю, на строчные элементы модель контейнеров тоже распространяется, так как можно те же margin, border, padding задать для строчного элемента. У модели контейнеров есть "область содержимого" и у модели чисто строчных элементов есть область содержимого. Как эти две модели взаимодействуют?

Здравствуйте, уважаемые верстальщики и просто те, кто учится верстке сайтов. Я занимаюсь веб-разработкой с 2008 года. Чуть позже поняв, что существует множество "подводных камней" и приёмов при верстке резиновых макетов, я приступил к поиску ПО, которое помогло бы мне ускорить этот нелегкий процесс. Но тогда я ничего не нашел - были только проекты, которые как мне показалось сильно ограничены в функциональности. Позже, когда у меня появился первый опыт, я загорелся идеей самому создать собственную веб-студию, которая могла бы максимально ускорить процесс верстки, но тогда я был занят другими фриланс–проектами, и слабо представлял, как это можно было сделать. Набравшись опыта за все эти последние годы, в июне 2016 года я завершил все дела со своими клиентами и принялся реализовывать то, за что давно уже хотел взяться. На деле оказалось очень непросто разработать задуманное, но к настоящему времени я уже сделал все самые необходимые первостепенные функции, с помощью которых можно сверстать сложные по структуре резиновые макеты, вот самые интересные из них: Интеллектуальный помощник - Автоматически трансформирует структуру HTML для обеспечения работы некоторых CSS свойств, а в случае необходимости участия пользователя это подскажет вам, как исправить распространенные ошибки; HTML подобная древовидная структура в диспетчере элементов. Вы сможете создавать сложную по дизайну и структуре разметку страницы; Базовая поддержка CSS классов - редактирование стилей сразу у нескольких элементов; Тонкая настройка стилей, почти все изменения применяются в режиме реального времени; Инструменты редактирования оптимизированы для планшетов на iOS и Android; В SHOWYWeb Studio интегрированы бесплатные шрифты Google Fonts, вы можете удобно подбирать шрифты простым наведением или с помощью клавиш; Проект экспортируется в файлы HTML, CSS и JavaScript. В дальнейшем вы их можете использовать как статическую страницу или вручную преобразовать в шаблоны для CMS систем; Экспортируемые результаты совместимы почти со всеми популярными браузерами, выпущенными после 2010 года, включая Internet Explorer 9; Экспортируемый код CSS структурно оптимизируется для экономии трафика; Загружайте только большие варианты изображений, SHOWYWeb Studio автоматически подготовит оптимальные варианты при экспорте проекта; Вставка видео с сервисов YouTube и Vimeo, вставка произвольного кода HTML в элементы типа "Текст и мультимедиа"; Локальное сохранение проектов; Дальше в первую очередь планирую реализовать следующее: Регистрация аккаунтов в SHOWYWeb Studio; Интеграция с облачными хранилищами; Экспорт проекта в изображение формата JPEG; Кастомные автообновляемые файлы CSS и JavaScript; Автосохранение; Локализация для английского языка; Поддержка псевдоклассов CSS; Интеграция бесплатных векторных иконок Font Awesome; Поддержка SVG изображений; CSS градиенты; Поддержка значения "inherit" в стилизующих свойствах для возможности унаследования свойств от родительских элементов; Дополнительные свойства для стилизации шрифта; Настройка свойств шрифта у родительских элементов для возможности автоматического унаследования; Классы CSS с выборочными свойствами; 3D и другие 2D трансформации (пока доступно только 2D вращение); Анимационные переходы CSS; CSS media queries; Поддержка HTML5 элементов; Интеграция дополнительных библиотек шрифтов; Реализация функций для отмены и повтора действий; Документация, видео уроки и типовые проекты (Имея базовые знания верстки достаточно просто разобраться методом проб и ошибок в русскоязычном интерфейсе); Протестировать можно здесь showyweb.ru (Студия находится в Beta тестировании и размещается далеко не на самом мощном VPS, поэтому рекомендую чаще сохранять ваш проект). Сейчас мне важно понять, есть ли смысл развивать эту идею дальше? или я изобретаю новую модель велосипеда, которая мало кому будет нужна.

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

Здравствуйте) недавно начала осваивать верстку и хотелось бы узнать Вашу критику) я, конечно, понимаю, что макет несложный, но у меня возникли трудности с background-ом ..(переход от одного блока к другому в виде диагонали с тенью) и в блоке info-client не смогла растянуть картинки на всю ширину блока (у картинок разные размеры).....надеюсь, что подскажете))) Верстка неадаптивная. Заранее Спасибо))) вот работа: https://z-karina.github.io/ при загрузке макета произошла ошибка, вот макет: http://hostingkartinok.com/show-image.php?id=8efc25bb87b7b586f330d5c17db60b8c

В этом коде у меня почему-то не хочет делать отступ справа. Час маюсь, решил на форум зайти. Укажите на ошибку мне и как надо правильно написать. P.S - команду брал даже с сайта, тоже не рабочая. <html> <head> <style> #header { /* Верхний блок */ background: #0080c0; /* Цвет фона */ padding: 1px; /* Поля вокруг текста */ padding-right: 10px; position: relative; top: -3px; } .lol { background: #ffe url(images/help.png) no-repeat top right; /* Параметры фона */ border: 2px solid black; /* Параметры рамки */ padding: 2px; /* Поля вокруг текста */ padding-right: 90px; /* Поле справа */ } </style> </head> <body> <div id="header"> <h1>ИС-41521</h1> </div> <p class="lol">wegwrge3ye3</p> </body> </html>

Здравствуйте. У меня возникла проблема, что не могу расположить кнопку справа от слов "ИС-41521", постоянно над или под ними. Как мне правильно вставить кнопку, чтобы расположить её справа/слева? <html> <head> <style> #header { /* Верхний блок */ background: #0080c0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ position: relative; top: -3px; } </style> </head> <body class="block"> <div id="header"> <h1>ИС-41521</h1> <input type="button" onclick="window.open('Реклама туров.html')" value="Hello World!"> </div> <div id="sidebar"> </body> </html>

Доброго времени суток всем, такая вот у меня смешная проблема... Не получается убрать стрелки и крестик тоже, а вот попробовал padding изменить все получилось, подскажите пожалуйста в чем причина? $container.find('a').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 200, 'speedOut' : 200, 'overlayOpacity' : 0.6, 'arrows' : false }); если нужно какой либо еще код скажите, я все добавлю, заранее спасибо.

Всем привет! Прошу помощи. Какие есть варианты по реализации? Я использовала fieldset с вложенным legend и css rotate, но думаю этот способ не очень. В итоге получилось на половину, и текст с LERN MORE добавить не получилось(второй тег legend не учитывается)

Ищется верстальщик/фронтенд разработчик (HTML, CSS, JS) на новый проект. Работа сдельная. Необходимые навыки: - верстка адаптивного и отзывчивого дизайна (HTML5, CSS3, JS); - установка и настройка стандартных jQuery (1.11+) плагинов; - разработка JS при отсутствии подходящих плагинов (не обязательно, можем сделать сами). Работа удаленная. Связь Skype, WhatsApp, Telegram. Ориентировочный бюджет: до 50 000 рублей за проект. Обязанности: сверстать frontend на основе шаблона в PSD и прототипа в Axure. Важно соблюдать указанные Вами сроки (либо заблаговременно предупреждать об их изменениях) и точность верстки. Не пропадать. График работы: свободный график. Писать на почту post@clubok.ru или Skype: autonet.ru, Всеволод.

Здравствуйте, помогите пожалуйста избавиться от стандартной всплывающей подсказки. Есть блок в котором при наведении я реализовал вывод подсказки, но он показывает их сразу две, ту что я сделал и ту которая идет стандартной от браузера. Вот код моей подсказки .tooltips{ display: inline; position: relative; } .tooltips:hover:after{ background: #767E9E80; border-radius: 5px; bottom: 15%; color: #fff; content: attr(title); left: 10%; padding: 5px 15px; position: absolute; z-index: 98; width: auto; text-align: center; } .tooltips:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }

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

Здравствуйте дорогие форумчане. Честно говоря сложно описать мою идею по реализации, но я надеюсь я смогу разрешить эту проблемы картинками Прошу помочь мне создать блок в котором бы картинки были наклонены. Идея такова, есть блок на сайте в котором я бы хотел реализовать такое: Всего нужно, чтобы в блоке было 4 такие картинки(короче как на картинке, только на всю ширину блока), нужно их реализовать на всю ширину блока. В каждом из этих четырех будет кнопка и текст сверху. Сам блок который называется "Каталог // наши товары" связан с бутстрапом. Ну а теперь в чем заключается моя проблема. Я не знаю как сделать такие наклонные блоки с изображением внутри. Ссылка на сайт

При скролле полоса должна заполняться. Как можно создать подобную форму? Есть ли примеры?

Как сверстать хедер, где нету только правой и левой стороны, а есть и по середине

Сделал для себя учебную верстку по бесплатному макету. Вопросы на которые, возможно, мне смогут дать ответы более опытные верстальщики: - Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю? - К сожалению, не удалось сделать, чтобы макет абсолютно соответсвовал PixelPerfect, особенно это заметно в тексте. Тестировал в Chrome 55.0.2883.87 (Windows 10). Подскажите на примере какого-нибудь блока в чем я делаю ошибки - Так же хотелось бы прочесть любую конструктивную критику Небольшое отступление, добавлю обязательно еще мобильный вариант и слайдеры, это в процессе. Хотелось бы узнать ошибки на том этапе, что выполнен. Исходники https://github.com/oleg-tgn/html-template-beautiful-things Демо https://oleg-tgn.github.io/html-template-beautiful-things/

Вакансия Front-end разработчика Добрый день. Вас приветствует команда студии разработки и продвижения FreeDots (наш сайт: freedots.ru) Если вы Front-end разработчик и делаете круто, то высылайте своё портфолио на hr@freedots.ru и вместе мы поработаем над интересными проектами Основные требования: Опыт работы в отрасли не менее 2 лет. Знание языков: HTLM, JS, CSS. Знание предпроцессоров LESS/SASS Знание фреймворков: Bootstrap/Foundation Знание библиотек: jquery.js, желательно знание js фреймворков: angular.js/vue.js/node.js Знание сборщиков проектов, таких как: webpack Расположение: Россия > Москва Указанные требования являются предпочтительными. Мы рассмотрим любые предложения, в том числе и варианты удаленного сотрудничества. Занятость/ЗП: Занятость/оплата - проектная с перспективой устройства у нас на фикс. С уважением, команда Freedots.

Здравствуйте, ищу работу HTML-верстальщиком (удаленно). Согласен выполнить первые заказы бесплатно что бы доказать себе и вам, что я работоспособен. Пишите мне на почту или в скайп. Скайп: Andrei.Rabotov E-mail: Andrei.Rabotov@gmail.com Портфолио.docx

Здравствуйте. На странице есть таблицы(адаптивные). Проблема в том, что при маленькой ширине экрана(к примеру на мобильных устройствах) они не убираются. Прописал в css: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; В итоге получил это(текст не переносится, на конце троеточие): Подскажите решение как можно реализовать просмотр таблицы или отдельных ячеек не нарушая адаптивность.

Подскажите пожалуйста правильный алгоритм путешествия к файлу main.css, у меня index.html находится в дочерней папке, как именно указать в хеде путь к главному css

Здравствуйте, У меня возникла проблема с background -ом когда изменяется масштаб окна браузера. Когда масштаб большой (>100%) , background который находится на полосе прокрутке просто НЕТ, а когда масштаб маленький (<100%) он растягивается. Растягивается потому что стоит width:100%, background-size:cover; (>100%); А вот как сделать чтобы background всегда был на всё окно + с полосами прокрутки (<100%). Очень признательный буду если кто сможет помочь и объяснить? Как лучше верстать фиксированной, резиновой, адаптивной и отзывчивой вёрсткой?

Можете пожалуйста указать на ошибки, корректность кода, качество адаптации. http://plitka20x20.h1n.ru/n3/

Вот страница, которая не отображается https://dandirector.github.io/thermasteel/ проблема обнаружена на android 4.2.2 в uc brouser, хотел бы отметить, что вместо верстки видно просто белый экран. В других браузерах все гуд.

Как реализовать чтобы при уменьшении ширины блока пропорционально уменьшалась и высота? https://jsfiddle.net/31zxeozo/

Добрый день всем, возникла проблема с адаптивностью меню, реализовал выпадающее меню, Но оно сдвигает нижний блок "Услуги мастерской". Теперь сам вопрос, как реализовать меню, что бы оно не сдвигало блок услуг, а легло поверх, т.е перекрывало его.

Приветствую всех! В общем на html странице есть 2 блока: с приветствием и кнопкой и второй блок с калькулятором. Хотелось бы сделать, чтобы при нажатии на кнопку первый блок плавно сдвигался влево и исчезал(как бы за границу экрана), а второй плавно появлялся на его месте. Все как бы работает, но как я понял display:block ломает всю анимацию, то есть второй блок появляется не плавно. Подскажите как лучше это реализовать. Хотелось бы просто, без jQuery. Вот код <div id="content"> <div id="welcome"> <a href="#" id="try-it"/> </div> <div id="calc-wrapper"> </div> </div> #welcome { transition: all 1s ease-in; } #calc-wrapper { display: none; opacity: 0; transition: opacity 1.5s; } 'use strict'; let welcome = document.getElementById('welcome'); let tryIt = document.getElementById('try-it'); let wrapper = document.getElementById('calc-wrapper'); tryIt.addEventListener('click', function (event) { welcome.style = "transform: translate(-100%, 0);"; setInterval(function () { welcome.style = "display: none;"; wrapper.style = "display:block; opacity:1;"; }, 1000); });