Ответы пользователя Дима Паутов по тегу «HTML»

Как сделать полностраничные DIV с пролистыванием по порядку?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

fullPage.js

Гугл

Ответ написан более трёх лет назад

Комментировать

Как сверстать волнистую линию?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

Вы можете заморочиться с svg, ну или просто картинкой.

Картинкой будет не сложно.
1) Для пунктов списка: Просто вырежите одну волнистую линию и сделайте ее фоном например тега li в списке и прижмите его к верху с повторением по оси X.

2) Для самого списка: Боковую полосу, та что слева у списка так же фоном но уже к тегу ul и прижмите влево и вверх, и повторение по оси Y

Ответ написан более трёх лет назад

Комментировать

Какой подход выбрать при верстке мобильной версии сайта?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

2й и только. Но вот с таким тегом

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ответ написан более трёх лет назад

Комментировать

Как выполнить форму регистрации с подсказками?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

К каждому input'у добавьте атрибут required и не мучайте себя js валидаторами, а подсказки проще простого!

<label> <!-- Даем ему свойство position: relative; -->
    <input type="text" placeholder="Подсказки" required>
        <div> <!--  Даем ему свойство position: absolute и сдвигаем. При наведении на этот div, показывайте подсказку!-->
            <p>Подсказка</p>
        </div>
</label>

Ответ написан более трёх лет назад

7 комментариев

Как сделать адаптивный background-image для мобильного сайта?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

А где там картинка то? чет в вашем коде ее нет!

1) Сделайте её фоном и дайте свойство background-size!
2) Сделайте её фоном и на нужном экране меняйте фоновую картинку.

Ответ написан более трёх лет назад

2 комментария

Правильная замена в html?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

habrahabr.ru/post/230877

Ответ написан более трёх лет назад

Комментировать

Как убрать границу (или тень) в input type="text" placeholder="search" в активном состоянии?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

outline: none

Ответ написан более трёх лет назад

1 комментарий

Области просмотра с прокруткой?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

html, body {height: 100%}
body {overflow: hidden}

div {
height: 100%;
overflow-y: auto;
}

<body>
<div></div>
</body>

Ответ написан более трёх лет назад

1 комментарий

Как сделать ширину блока по ширине картинки?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Дайте блоку фиксированную ширину или блоку с текстом. Или так нельзя?

Ответ написан более трёх лет назад

1 комментарий

Где можно по практиковаться в своих знаниях html/5, css/3?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Верста макеты

Ответ написан более трёх лет назад

5 комментариев

Как добиться полной высоты блока?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

jsfiddle.net/wvyowmgq

Ответ написан более трёх лет назад

7 комментариев

Как добавить к pattern условие?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

Все гуглиться
\s

Ответ написан более трёх лет назад

6 комментариев

Как скрыть текст из кода страницы сайта, но оставить его видимым на экране?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

Еще один борец за контент! Думаю тут вам к Yandex'у нужно обратиться, для защиты своих текстов!

1) Никак вы текст не скроете из исходного кода! Как бы вы не пытались, все что вы видите на странице есть в исходном коде.

2) Флеш? Идиотизм, так весь текст что ли в флеш перегонять? К тому же никто не мешает распотрошить флешку, если уж там секретные данные о месторасположении ядерных ракет.

3) Canvas? - смотри пункт 2.

4) Аjax'ом? Нагружать сайт глупыми запросами?
Да, изначально вы получите пустой блок, но загрузив текст вы все ровно запишите его в исходный код страницы (консоль браузера все изменения отобразит)!
Даже подключая iframe вы все ровно можете увидеть его содержимое через консоль, текст уж точно.

5) Можете закодировать страницу, но это уже маразм, но один фиг не поможет, раскодировать будет не сложно!

Мой совет, бросьте эту глупую идею! Как бы вы не пытались, его все ровно можно будет скопировать! Например тупо отключив js в браузере или сохранив страницу на рабочий стол.

Ответ написан более трёх лет назад

Комментировать

Как исправить ошибки валидации?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Ну хаки никогда не были валидными!

Хотите сделать хаки валидными, то пишите их без сцециальных знаков.

Что бы добиться такого результата используйте следующую конструкцию в html:

<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if gt IE 8]> <!-->
<html lang="ru">
 <!--<![endif]-->

и теперь ie будет иметь свой класс у тега html. Через него вы сможете указывать любые свойства, которые будут работать только в ie

Ответ написан более трёх лет назад

Комментировать

Не могу понять назначение строчно-блочных элементов?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

А вы создайте пяток дивов и еще пяток дивов c display:inline-block и все вопросы отпадут!

P.S.
Только дайте им произвольные размеры и фон какой нить темный, для визуального отображения!

Ответ написан более трёх лет назад

Комментировать

Обязательно ли быть верстальщиком, чтобы устроиться на работу Junior Frontend'ером?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Фронтенд как бы уже это подразумевает! Одно без другого не вяжется. Для начала поймите что такое фронтенд и вопрос отпадет сам собой!

Ответ написан более трёх лет назад

3 комментария

Как сделать такую навигацию?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

getbootstrap.com/javascript/#affix - делает тоже самое. При должном владении css можно сделать и увеличение пунктов!
А теперь вы ответьте, что за музыка в ролике?

Ответ написан более трёх лет назад

3 комментария

Абсолютное позиционирование псевдо-элемента?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Попробуйте вот так
margin: -6px 0 0 -7.5px;

Ответ написан более трёх лет назад

4 комментария

Вопрос по верстке из psd?

Дима Паутов @bootd Куратор тега CSS

Гугли и ты откроешь врата знаний!

Так ёлы палы, чё тут думать? Макет то нужно рисовать в 1920 минимум!!!!
Ну растяните вы картинки при помощи css, а потом будите глядеть на эти пиксели?

Ответ написан более трёх лет назад

Комментировать

Как лучше сделать переход на мобильную версию сайта?

Дима Паутов @bootd Куратор тега HTML

Гугли и ты откроешь врата знаний!

Ни один из ваших трёх.
Правильный ответ - media queries

Нет, грузить все не нужно! Нужно просто взять провести оптимизацию сайта. Уменьшить запросы к серверу, перенести все оформление на css, без картинок. Сделать сжатие данных на стороне. Все же используют media queries, так почему вы думаете что вам это будет плохо?

Так же некоторые элементы можно скрыть, а некоторые можно подгружать после загрузки страницы.
Например: по мере прокрутки страницы, подгружать изображения.

У того же гугла есть сервис Google Page Speed - который скажет вам, что нужно оптимизировать на вашем сайте после его проверки!

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт