HTML Coding

29542 questions in this forum

1. Спойлер с плавным открытием

   Здравствуйте есть такая задача, организовать спойлер с плавным открытием. Но при открытии спойлера меняется иконка. Тоесть когда он закрыт одна иконка, при открытии другая(рядом с названием) Есть организовывать при помощи <details> то проблем нет с этой иконкой, там прописываем [open] и все. Все работает как надо... Но как тогда организовать плавное открытие? не корректно работает при помощи jquery и js... он открывается тогда не плавно, а с задержкой... что не правильно..

   Asked by skyline, March 25, 2017

   • спойлер
   0 votes
   5 answers
2. Сохранение пропорций Div при масштабировании

   Здравствуйте. Подскажите пожалуйста как решить такую задачу. Есть несколько div блоков (один под другим). Верхний Div блок содержит картинку, ширина - 100%, высота 600px. Необходимо, чтобы при изменении масштаба (например, при нажатии на CTRL + "+" или CTRL + "-") размер верхнего div блока, где картинка, сохранялся. Прикрепил картинку, чтобы было более понятно. Красным отмечена область, размер которой должен сохраняться при любом изменении масштаба. Спасибо! З.Ы. У меня получалось решить данную проблему, но возникала другая. При изменении масштаба, остальные div блоки налаживались на верхний и получалась каша.

   Asked by volchek, March 28, 2017

   • div
   • масштаб
   • пропорции
   • размер
   0 votes
   5 answers
3. Проблема с Flex

   Столкнулся с такой проблемой что при уменьшении окна браузера flex-элементы не хотят выстраиваться в один столбец. В песочнице все работает отлично, а когда делаю у себя на компьютере, то не работает. Код один и тот же пишу. На скриншотах все видно. Код в песочнице Скриншот 1 Скриншот 2 Проверял в Firefox все работает, а в Chrome нет... Понять не могу почему, хотя как делал примеры все работало, а когда начал сам делать не работает. (это я про то что в хроме не работает)

   Asked by John106, April 1, 2017

   0 votes
   5 answers
4. Сайт на php

   У меня есть сайт на hostinger. Он в html-формате. Если я сменю формат на php, и добавлю туда некоторые строки php-кода, он будет работать на php? Возможно, вопрос будет не понятен или даже глупым, но только так пока сформулировал вопрос.

   Asked by ErUnDAK, April 4, 2017

   • php
   • html
   0 votes
   5 answers
5. помогите, пожалуйста, с меню

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

   Asked by vb1f, April 19, 2017

   • html css
   0 votes
   5 answers
6. Подчеркивание текста так же, как на макете

   Здравствуйте! Помогите, пожалуйста, реализовать подчеркивание текста в соответствии с примером, показанным на макете. Фрагмент макета - Вот, что получилось у меня https://asyntrail.github.io/project/ при изменение масштаба страницы полоса подчеркивания пропадает !?

   Asked by asyntrail, April 22, 2017

   0 votes
   5 answers
7. Как работает Body

   Почему при задании для Body фиксированной ширины фоновый рисунок Body идет на всю страницу браузера?

   Asked by Anuar03, April 22, 2017

   0 votes
   5 answers
8. В чем причина чудовищно долгой загрузкой лендинга?

   Здравствуйте! Только что закончил работу над лендингом и перешел к его оптимизации. Перед этим решил его проверить с помощью сервиса Pingdom: https://tools.pingdom.com Показатели следующие: Performance grade: 97 Page size: 3.5 MB Requests: 93 Load time: 60 СЕКУНД! Голова трещит, что переспелый арбуз, не могу понять, в чем причина столь долгой загрузки? Буду искренне благодарен за экспертное мнение. Адрес лендинга: https://hutor.kh.ua/ P.S. Проверял этим сервисом сторонние лендинги, с весом и обращениями в 2-3 раза превышающие мои. Скорость загрузки у них всего несколько секунд.

   Asked by VladGridasov, April 28, 2017

   • лендинг
   • скорость загрузки
   • долгая загрузка
   0 votes
   5 answers
9. При position: absolute перестает работать margin: auto.

   https://jsfiddle.net/wm5uk9w6/ При position: absolute перестает работать margin: auto. Почему?

   Asked by torsar, May 7, 2017

   0 votes
   5 answers
10. Как это сверстать?

    Всем привет! Как сверстать такую секцию(см. изображение)? Сверстать нужно так, чтобы при скроллинге (используя, например waypoints) постепенно грани заливались красным цветом от step1 до step4 (анимация). Появилась одна идея, создать многоугольник из линий в svg. Другой идеи в голову не пришло. Но такое искусство не масштабируется при адаптации. Как анимировать пока даже и не думал. Это учебный макет и экспериментальный макет.

    Asked by Schamil74, May 6, 2017

    • svg,hexagon
    0 votes
    5 answers
11. Задний фон не изменяется

    Здравствуйте, я столкнулся с такой проблемой. Я задал задний фон этому блоку но она не изменяется. <nav> <div class="mmenu"> <div class="mid"> <hr> <p><a href="index.html">Главная страница</a> | <a href="week1.html">Неделя 1</a> |<a href="week2.html"> Неделя 2</a> |<a href="week3.html"> Неделя 3</a></p> <hr> </div> </div> </nav> код в style.css div.mmenu{background: #605353;}

    Asked by rory, May 27, 2017

    • html
    0 votes
    5 answers
12. почему бг не стакается с верхним краем

    backgorund не стакается с верхним краем css body { background-color: #fff; margin: 0; } div.ferst{ height: 700px; width: 100%; background-position:21.5%; background:#0A0905 url(../img/IMGP4333.png)100% 100% no-repeat; } h1{ margin: 0; padding-left: 250px; padding-top: 59px; } html <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Whitesquare</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="wtf" type="text/css"> <!--[if lt IE 9]&…

    Asked by nikif, June 2, 2017

    • html
    • css
    • background
    0 votes
    5 answers
13. list-style-position не работает

    Всем доброго времени суток. Возникла у меня одна неприятная проблема. Захотел я маркеры списков заменить на иконки. В Icomoon сделал себе шрифт и все подключил. И тут то я столкнулся с проблемой. list-style-position работает как inside и когда я хочу чтобы он работал как outside ничего не происходит. Где же мой прокол ? <ul class="structure"> <li class="icon-page">Одна страница, логотип и заголовок</li> <li class="icon-image">Картинка и описание предложения</li> <li class="icon-in-form">Форма для заполнения информации</li> <li class="icon-send">Кнопка отправки и отзывы клиентов</li> <li class="icon-ou…

    Asked by Aleksandr.Bycyk, June 15, 2017

    0 votes
    5 answers
14. Начальная ширина мобильного дизайна

    Люди добрые, подскажите, почему дизайнеры делают макеты мобильной версии начиная с 750 пикселей, с огромными шрифтами и картинками? Но при этом, хотят чтобы оно всё круто выглядело на 320px. Как же правильно делать, дизайн на 320, а потом пускай расширяется? Или 750, а верстальщик пускай сам придумывает, как оно будет сжиматься до 320, и расширяться до 980ти? Как правильно делать дизайн мобильной версии, с какой шириной?

    Asked by Alarr, June 19, 2017

    • мобильная версия
    • дизайн
    • mobile
    • design
    0 votes
    5 answers
15. Две проблемы в JavaScipt (jQuery)

    Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> input { position: relative; transition: all ease 1s; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button>Посчитать!</button> <button id="lol">Сместить!</button> </body> </html> И его скрипт: $('documen…

    Asked by ErUnDAK, June 21, 2017

    • javascript
    • jquery
    • html
    • css
    0 votes
    5 answers
16. счетчик работы сайта

    Добрый день! помогите пожалуйста со скриптом таймера(счетчика) тип времени работы компании. Требуют, чтобы было с годом, месяцем, днем, часами и т.д. Прошарил все сайты, не могу найти -- сделать, чтобы он он шел вперед... ПРИМЕР: "мы на рынке уже: 7 лет, 2 месяца, 3 дня, 4 часа, 2 минуты, 33 секунды" Напишите код, если не тяжело... Спасибо.

    Asked by M4TT, June 30, 2017

    • скрипт
    • таймер
    • счетчик
    • код
    • помогите
    0 votes
    5 answers
17. Адаптация шапки и всё её содержимое.

    Есть такая проблема, при сужении сайта изображение уменьшается, то сама высота блока не изменяется и получается пустое место, как сделать, что бы блок тоже уменьшался и нижний блок в жёлтом фоне нормально подстраивался, прописать медиазапросы, для каждого пикселя? https://jsfiddle.net/hqdd5two/

    Asked by DivMan, July 31, 2017

    0 votes
    5 answers
18. Лишнее пространство в таблицах

    Не получается убрать пустое пространство в ячейках таблиц. Уже границы объединил, отступы убрал, всё равно пространство остаётся, причём в каждой таблице разное, видимо зависит от количества контента. Пустое пространство находится именно внутри ячеек. Как его убрать?

    Asked by AlexProf, August 2, 2017

    • table
    0 votes
    5 answers
19. Перенаселение div'ов или как верстать правильно?

    Я смотрю на современные сайты и их исходный код. Потом я смотрю на то, какой получается верстка, благодаря bootstrap и ему подобных css-фреймворков. И у меня зреет далеко не новый вопрос - как верстать? Чтобы выровнять тот или иной блок, приходится прибегать к тому, что мы плодим бесконечные <div>. Для каждого пишем класс и разрабатываем его в лишних строках CSS. И подключаем еще один CSS с media queries, чтобы все получилось адаптивно... Да, сейчас к нам приходят flex и это здорово! Это как раньше была замена табличной верстки или введение анимаций. Но семантика рушится. Раньше я ориентировался на What Beautiful HTML looks like, но сейчас это далеко не вс…

    Asked by Libiros, August 2, 2017

    • div
    • cемантика
    • скорость загрузки
    0 votes
    5 answers
20. Как выровнять текст прижав к низу diva

    Html <header> <div class="container services"> <div class="row"> <div class="col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 108.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 127.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div>…

    Asked by Sunboy, August 4, 2017

    • html
    • css
    • bootstrap
    0 votes
    5 answers
21. Код CSS не работает

    Написал код точно как в учебнике, но он не работает. В чем причина? Скриншоты прилагаются. Скрытый текст http://prntscr.com/g5xbse Скрытый текст http://prntscr.com/g5xdpg

    Asked by zevs95, August 8, 2017

    • html
    • css
    0 votes
    5 answers
22. Изменение порядка блоков

    Доброго всем дня Прошу помочь с адаптивной вёрсткой трёх блоков. Код такой: <div class="main-content"> <div class="left-sidebar">левый сайдбар</div> <div class="content">центральный блок</div> <div class="right-sidebar">правый сайдбар</div> </div> .content, .left-sidebar { float: left; } .right-sidebar { float: right; } На полной версии (>1000px) это выглядит так: А на меньших разрешениях должно быть так: Никак не могу сообразить, как заставить их поменяться местами.

    Asked by MAzZY, September 7, 2017

    0 votes
    5 answers
23. Не отображается background-image

    Вопрос такой: указываю див'y : background-image: url(img/header.png) no-repeat; Картинка не появляется. Стоит указать width и height так сразу появляется. Еще указываю размер картинки, но почему не показывает. Стоит указать на 10px больше высоту, так сразу появляется. Вопрос: обязательно ли всегда указывать размер картинки, если да, то во всех же браузерах по-разному будет отображаться?

    Asked by Ars, September 18, 2017

    • background-image
    0 votes
    5 answers
24. Когда не хватает псевдоэлементов или как спозиционировать тень

    Вот иллюстрация. Тень должна исходить из выделенного блока(визуально, там видно откуда, и видно, что сейчас сделано криво). По-идее, это должен быть span, но в оригинальной задаче, span должен быть сам по себе, а тень должна исходить либо из самого пункта (класс every), либо из какого-либо нейтрального потомка, а какой потомок "нейтрален"? псевдоэлемент, его мы может подогнать под нужные размеры, поставить нужный z-index и сделать для него тень. Беда только в том, что для последнего элемента (крайнего справа), свободного псевдоэлемента не осталось. Что делать? Обязательно для всех меняющихся элементов, которые видны на иллюстрации, в том числе и для тени, нужен транз…

    Asked by Launder, September 16, 2017

    • ::before
    • ::after
    • box-shadow
    0 votes
    5 answers
25. Проблема с расположение блоков на iPhone

    Добрый день. Столкнулся с неожиданной проблемой. На айфонах блоки сайта наезжают друг на друга, на винде и андроиде всё работает нормально. Вьевпорт указан. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> На айфонах сайт выглядит так: Должен выглядеть вот так: Задачу осложняет то что у меня нет iOS устройств чтобы можно было протестить, а все эмуляторы, какие пробовал, выдают что всё верно. Кто-нибудь сталкивался с подобным? В чем может быть проблема?

    Asked by Rex4r, September 21, 2017

    • css
    • bootstrap
    • iphone
    0 votes
    5 answers