HTML Coding

29,542 questions in this forum

1. Как растянуть меню и сохранить контент по середине?

   Здравствуйте, не подскажите как растянуть выпадающее меню на всю ширину страницы, что бы контент/ссылки так и оставались на середине? Догадываюсь, что проблема в позиционировании "absolute" "relative", но знаний не хватает куда что прописать. Вот код css: #menu-wrapper {display:block; width:960px; margin: 0 auto;} /* Reset */ .nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input { margin: 0; padding: 0; border: none; outline: none; } .nav a { text-decoration: none; } .nav li { list-style: none; } /* Menu Container */ .nav { display: inline-block; position: relative; …

   Asked by vignaliizada88, January 31, 2020

   0 votes
   0 answers
2. Safary и Chrome мобильные устройства - позиционирование футера

   Бобра всем! Обычно элемент (футер) прибить к bottom экрана просто: - или через абсолтное позиционирование и свойство bottom - через свойство height в vh - через flex Но у сафари (и теперь с недавних пор Chrome) для мобильных устройств стандартные методы вызывают эффект описанный в этой статье: Ссылка на описание бага Если коротко, то нижняя часть интерфейса браузера мобильного устройства перекрывает прибитый к футеру элемент. Сейчас я кое как решил этот эффект путём JS : вычисляю реальную видимую рабочую высоту экрана (в которую не входит интерфейс браузера), вычисляю высоту элемента, который я хочу прибить к низу, и абсолютно его позиционирую о…

   Asked by Faab, January 30, 2020

   0 votes
   0 answers
3. Сменяющийся текст

   Добрый день. Есть текст. 2 предложения. Хочу чтобы выводилось только одно, а потом заменялось на другой. И так по кругу: 5 сек одно, 5 сек другое. ГИФ анимацию не хочу. Нужно на HTML+CSS. В крайнем случае простейший js. Помогите, пожалуйста. Заранее спасибо!

   Asked by dron, January 30, 2020

   0 votes
   3 answers
4. Не всегда работает margin-top

   Добрый день. Использовал плитку из masonry.pkgd.min.js. Между блоками должен быть промежуток 20 px. Но он есть не всегда и не во всех браузерах. Опера все отрисовывает правильно, хром иногда без промежутков, а мозила почти при каждом F5 выдает разные результаты. С чем это связано и можно ли починить? .prev_block{ width:300px; background-color:#a3bd6f; margin-top:20px; }

   Asked by Ubhra, January 29, 2020

   • margin-top
   0 votes
   1 answer
5. Хочу узнать по поводу платных онлайн-курсов

   Всем привет! Я новичок в этой сфере и пытаюсь найти информацию в гугле. Часто натыкаюсь на рекламу онлайн курсов по программированию. Подскажите, есть ли хорошие курсы, стоит ли их покупать?

   Asked by true_exploit, January 26, 2020

   0 votes
   2 answers
6. bootstrap число колонок

   добрый день как увеличить колонки с 12 до 24 ?

   Asked by Jester, January 25, 2020

   0 votes
   0 answers
7. Ссылка - не полное подчеркивание

   Как сделать такое при наведении? Рисунок во вложении .

   Asked by torsar, January 22, 2020

   0 votes
   3 answers
8. Начало пути

   Приветствую обитателей местных. Обращаюсь я к людям просвещенным прошедшим тернистый путь обучения веб разработки. Дайте совет о повелители паутины всемирной. С Чего начать мне путь обучения веб разработки? Думаю записаться курсы вот только на какие? Где могут дать нормальные основы? С которыми можно будет начинать осваивать практику. Да и вообще буду рад почитать ваши истории становления на путь верстки.

   Asked by antizyk, January 22, 2020

   0 votes
   0 answers
9. Помогите найти ошибку в нумерации списка

   На онлайн курсе было задание создать нумерованный список вопросов в тесте, вроде, все команды написала правильно, всё выглядело как надо, пока не началось оформление. Всё съехало и нумерация пропала. Помогите,пожалуйста, найти ошибку https://trinket.io/html/cddf8856c1

   Asked by Natalie, January 20, 2020

   0 votes
   1 answer
10. Помогите решить проблему с рейтингом 5 звезд для статей

    Доброго дня.Хотел сделать все сам, но все нет сил больше.Либо человек выложил специально корявый код, чтобы трафик набивать, либо я далекий уж совсем. Не хотелось бы копировать текст его весь, http://usefulscript.ru/star_rating.php (скройте если нужно ссылку пожалуйста, это не мой сайт) У меня получилось связать базы данных, он голоса с ip учитывает, говорит спасибо что проголосовали, а звезды не показывает, да и вторая таблица где 3 позиции не заполняется. Посмотрите хотя бы бегло я вас прошу, или скажите как проверять,а то я с катушек точно слечу.

    Asked by ronibest89, January 19, 2020

    0 votes
    1 answer
11. Как изменить размер кнопок социальных сетей для маленьких экранов

    Здравствуйте, я заранее извиняюсь за возможно глупый вопрос. Недавно начал изучать создание сайтов и написал простенький блог на связке html+css+php7. И уже два дня сижу над проблемой. На одной из страниц добавил кнопки социальных сетей с помощью addThis. Они уменьшаются на экране смартфона, но становятся слииишком маленькими. Сколько я не ковырял css, ну не получается их больше сделать. Подскажите, что я делаю не так? Вот ссылка: Школьная Энциклопедия

    Asked by jestemobecny, January 17, 2020

    0 votes
    1 answer
12. Проверка введенного пароля

    Подскажите пожалуйста код, чтобы присутствовала одна строка ввода и кнопка отправить. После клика на кнопку, если введено "page1", то переход на файл page1.html, если "page2", то на файл page2.html и также с page3, page4, page5, а если не введено ничего, то появляется соответствующая надпись.

    Asked by Chitet, January 16, 2020

    0 votes
    1 answer
13. адаптивность картинки

    почему при уменьшении экрана картинка не уменьшается хотя я ей задал max-width 100% в мозиле все нормально при уменьшении экрана картинка автоматически уменьшается а в хроме картинка не уменьшается и контент выходит за пределами сайта(урезается) верстка http://frontend-er.h1n.ru/lotos/

    Asked by victorius, January 10, 2020

    0 votes
    3 answers
14. Фон flex-элемента

    Здравствуйте! Проблема в том, что фон flex-элемента занимает по ширине окно браузера, а содержимое блока flex (при горизонтальной прокрутке вправо) остается без фона. Почему это происходит и как мне исправить? Мой пример: https://jsfiddle.net/edx5o927/

    Asked by hike, January 9, 2020

    0 votes
    2 answers
15. Pricing Table на Uikit 3. Как сделать?

    Всем привет. Никак не получается сверстать нормальную Pricing Table на Uikit 3. Я только вникаю в тему, поэтому, может еще не догоняю. Пробую сделать на uk-flex + uk-table. Постоянно какие-то косяки то с адаптивностью, то с шириной, то с высотой колонок... <div class="uk-flex uk-flex-center"> <div class="uk-card uk-card-default"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 1</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2 пошире</td> </tr> <tr&g…

    Asked by dron, January 8, 2020

    • css
    • html
    • uikit 3
    0 votes
    2 answers
16. Слайдер или что-то подобное

    Уважаемые форумчане, подскажите, пожалуйста, слайдер или другое решение для реализации данного. При этом закладки 1, 2, 3 должны сменяться по времени и на каждой из них возможно было бы кликать по ссылке, картинке или другому объекту.

    Asked by Totalist, January 7, 2020

    0 votes
    7 answers
17. Как правильно задать бекграунд псевдоэелементу SVG картинкой, чтобы по наведению картинка цвет меняла?

    Приветствую специалистов по верстке! Подскажите: как правильно задать бекграунд псевдоэелементу SVG картинкой, чтобы по наведению картинка цвет меняла? Попробовал сделать так: .main-menu ul li a { position: relative; display: flex; flex-direction: column; align-items: center; } .main-menu ul li a::before { width: 18px; height: 18px; content: ''; background: #828282; display: block; mask-repeat: no-repeat; mask-position: center; margin: 0 0 3px 0; } .main-menu ul li a.active::before, .main-menu ul li a:hover::before { background: var(--clr1); } .main-menu .reit a::before { mask-image: url('../images/main…

    Asked by VasyOK{!}, January 1, 2020

    0 votes
    1 answer
18. Ломанная линия на flex (мозаичная верстка)

    Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка). Применил align-items:flex-start, думал что сработает, но нет...

    Asked by Yurii.Vovchuk, December 31, 2019

    • flex
    • flexbox
    • mosaic
    0 votes
    0 answers
19. слаидер slick с картинкой

    при ширине экрана @media(max-width:768px) в самый низ страницы верстки есть слайдер внутри него есть контент с картинкой хочу поместить картинку за границы слайда сверху но картинка обрезается. как сделать чтобы было видно ссылка на верстку http://frontend-er.h1n.ru/asia-spa/

    Asked by victorius, December 30, 2019

    • верстка
    • css
    0 votes
    0 answers
20. стили внутри других стилей ?

    подскажите пожалуйста, как сделать так чтобы при наведении курсора на b-2 или b-3 или b-4 или b-5 цвет заднего фона b-1 становился былым ? https://codepen.io/FreshManGood/pen/xxbrBPZ?editors=1100 логичнее было бы сделать вот так .container-blocks .block-2:hover, .container-blocks .block-3:hover, .container-blocks .block-4:hover, .container-blocks .block-5:hover{ background-color:green; .container-blocks .block-1{ background-color:red; } } но так нельзя можна ли решить данную задачу на чистом CSS ?

    Asked by FreshMan, December 26, 2019

    0 votes
    5 answers
21. как сверстать часть макета

    как видете на картинке блок состоит из 2 блока 1 с контентом 2 с картинкои оба эти 2 блока пересекаются подскажите как верстать эту часть макета

    Asked by victorius, December 24, 2019

    0 votes
    4 answers
22. Передать в контактную форму значение <button>

    Здравствуйте. На сайте 10 товаров, у каждого из товаров есть кнопка, при нажании на которую всплывает окно с вормой, после заполнения значения отправляются на почту. Для всех этих кнопок сделана одна форма, то-есть, на какую бы кнопку не нажал, передаётся один и тот же текст. Можно ли как-то сделать, чтобы при нажатии на каждую кнопку, автоматически добавлялось своё значение? Например: Можно сделать для каждый кнопки свою, отдельную форму, но так не очень хорошо. Можно ли обойтись одной? HTML <form class="form-header" id="form" method="post" name="form"> <div class="form-group"> <input class="form-control input-…

    Asked by artem99357, December 22, 2019

    0 votes
    1 answer
23. блок с адаптивный контентом

    как сверстать блоком с картинкои с бамбуком на левои стороне где весь блок это картинка + поверх контент я сделал так = через html подключил картинку + поверх вставил блок с контентом (с position absolute)и все спозиционировал в нужное место блоку в котором находится картинка задал position relative. есть проблема при уменьшении экрана контент вываливается из картинки как сделать чтобы контент не вываливался из картинки в смысле чтобы высота картинки менялась под контент ? еще проблема как убрать 2 вертикальных скролла которые появляются при уменьшении экрана http://frontend-er.h1n.ru/asia-spa вот блок картинка чтобы лучше п…

    Asked by victorius, December 22, 2019

    0 votes
    0 answers
24. Странные пустые места при переносе картинки.

    Доброго времени. Дали задание в колледже сверстать сайт по макету. Сам я не особо в этом хорош, но попытался сделать. Итого вопросы: Есть макет: https://imgur.com/zWRi07X А вот что получается у меня: Места в которых изначально были изображения, при переносе этих самых ихображений почему-то остаются занятыми пустыми обьектами. Картинки обернул в div, и для каждой картинки прописал id из файла css. Код кидать нельзя, к сожалению, но для наглядности скину скрины нужных фрагментов.

    Asked by Мальчик Тарантино, December 22, 2019

    0 votes
    0 answers
25. Картинка (при уменьшении броузера)

    Здравствуйте Помогите пожалуйста решить следующую проблему. Есть попытка сделать картинку в хедере так, чтобы при уменьшении броузера она адаптировалась под размеры. Что то идёт не так, и когда уменьшаешь броузер - часть картинки задвигается налево и становится видно только правую часть картинки. Если есть время, то помогите пожалуйста. .logoheader { background: url(../img/pics/headerpic.png) no-repeat right; bottom #0C1A3E; color: #FFFFFF; min-height: 250px; } #header { display: block !important; position: relative; padding: 1em 0 0 0; /* 8em 0 0 0 */ overflow: hidden; }

    Asked by Barik, December 20, 2019

    0 votes
    0 answers