Jump to content

HTML Coding

Subforums

  1. Discussion of works

    Source code audit and recommendations

    30.1k
    posts

  2. Practise Templates

    Templates for self education and practise

    1k
    posts

Explore Questions

There are no popular questions to show right now

  1. Вёрстка футера на движке Xenforo

    Asked by Mondeus,

    0 votes
    0 answers

  2. Примеры верстки

    Asked by torsar,

    0 votes
    0 answers

  3. Список покидает див

    Asked by DeZ,

    0 votes
    0 answers

  4. Проблема с шириной ячеек

    Asked by ArrogantSpectator,

    0 votes
    1 answer

  5. Html кнопка

    Asked by НикитаL,

    0 votes
    3 answers

29,542 questions in this forum

  1. Проблема с button

    Понимаю, что вопрос возможно, выглядит пустяковым, но для меня очень важно. Почему то не работают кнопки. Даже страница не загружается. echo '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>'; echo '<form method="post" action="script.php">'; for ($i=1; $i<=100; $i++){ echo '——'; $post= implode(",",$_POST); if ($i<$post) {echo '<button name="',$i ,'" value= "',$i ,'" style="background-color:yellow; float: right; padding-top: 10px">gfhfg</button>';}; if ($i==$post) {echo '<button name="',$post,'" valu…

    Asked by Volan,

    0 votes
    4 answers

  2. IE7 margin-bottom от абзаца добавляется к img { float: left; }

    Обеспечиваю тут поддержку IE7 и не могу найти правильных слов для гугла. Примеры типа "добавьте плавающему элементу display: inline либо zoom: 1" не работают. Есть такой код: <div> <img src="http://placekitten.com/200/200?image=6" /> <p>Текст</p> </div> И к нему CSS div { overflow-y: hidden; } img { float: left; } p { margin: 1em; } Если запустить это в любом ИЕ <= 7, у img появится margin-bottom от подследнего вложенного элемента. В IE >= 8 такого бага нет. Смастерил на коленке фикс: .fix { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("div") ).class…

    Asked by 7ion,

    0 votes
    14 answers

  3. Несколько табов на странице

    Ребят помогите пожалуйста. https://codepen.io/brezze/pen/yPmvRv На странице будет много таких табов, мне нужно что-бы если я кликал на вкладки нижнего таба, в верхнем не убирался класс current и текст оставался всегда видимым. Как этого достичь ?

    Asked by brezze,

    0 votes
    1 answer

  4. Якори

    <h1 id="iak">Это моя первая страница</h1> <ul> <li> <a href="#iak">Привет мой друг!</a> </li> </ul> Эти команды если их можно так назвать должны были перебрасывать на заголовок другого участка страницы, но сыллка не хочет работать хотя изображена как сыллка. Проверял в css id работает. Можете помочь?

    Asked by AndSan,

    0 votes
    6 answers

  5. Схлопнуть padding и убрать border-radius у подряд идущих inline

    Есть блок, внутри которого текст, размечаемый юзером. У тега <i> задан цвет фона, padding, background-color. Сказка кончается, когда юзер в сообщении делает, например, [ i ]та[ /i ][ i ]к[ /i ]. В итоге у нас слово, порванное посередине отступом и border-radius. Нормализовать код на стороне сервера нельзя, только css, только хардкор. Я изрядно поломал голову. Нужно, если у элемента <i> есть непосредственный сосед <i> - без любых нод между ними - соседу обрезать padding и border-radius слева, а элементу - справа. При помощи вспомогательного <span>, :first-of-type, :last-of-type и селектора-плюсика я нагородил что-то похожее на правду:…

    Asked by 7ion,

    0 votes
    6 answers

  6. Тонкости cursor: url

    Здравствуйте, делаю такие стили: body { cursor: url("/images/pupbg.png"), auto; /* размер 4х4, вес 174 байта, работает */ } h1 { cursor: url("/images/unit.png"), auto; /* размер 170х200, вес 37 кбайт, не работает :( */ } h2 { cursor: url("/images/happy.png"), auto; /* размер 50х50, вес 5 кбайт, работает */ } В первом и последнем случае курсор-картинка работает, во втором - нет. Очевидно, что проблема в большом размере и весе картинки. Где-то можно узнать максимальные допустимые размеры? Пересмотрел пару десятков статей на эту тему - нигде такой информации не нашел.

    Asked by WalkWeb,

    0 votes
    2 answers

  7. помогите с :hover

    https://jsfiddle.net/sipsap/w547anoh/ Вопрос: 1. Как сделать так что бы текст менял свой цвет вместе с hover'ом заднего фона, а не нужно было наводить на него отдельно? 2. Не как не могу понять как мне задействовать в активном блоке верхнюю картинку? (мне данны две картинки на одной области. Снизу, бела сверху черная) Пример:

    Asked by hover,

    0 votes
    3 answers

  8. Как отобразить background-image за пределами блока

    Здравствуйте! Есть блок шириной 390px и высотой 100px, который является ссылкой. .div { background-image: url(bg_1.png); height: 100px; width: 390px; } .div:hover { background-image: url(bg_hover.png); } <div class="div"> <a href="#">Текст</a> </div> <div class="div"> <a href="#">Текст</a> </div> Можно ли сделать так, чтобы при наведении на блок фон менялся на bg_hover.png и при этом стрелка слева картинки выходила за пределы блока??

    Asked by Алексей2802,

    0 votes
    12 answers

  9. Отступы в макете и на сайте

    Я только начинаю учиться, поэтому интересует очень важный вопрос. Измеряю расстояние в макете от текста до верхней линии. Например он 50 пикселей. Когда задаю это в файле CSS все хорошо. Но когда захожу через гугл хром проверяю расстояние, во первых оно визуально больше. Во вторых наведя на блок с текстом будь это <p> либо <div> показывает дополнительное расстояние от текста до края этого блока. Внимание вопрос, как этого избежать? можно ли как-то убрать это внутреннее расстояние? или существуют какие-либо еще неведомые мне способы. Заранее спасибо. Если выразился непонятно, напишите залью сюда код и изображение.

    Asked by Firin,

    0 votes
    7 answers

  10. HTML CSS media запросы

    Всем привет! Делаю адаптивную версиб сайта (под мобилы), возникла проблемма. Основной CSS .wrapper { border:1px solid transparent; width:1280px; height:1043px; margin:0; background-color:transparent; } .header { border:1px solid #dce5f4; width:200px; height:43px; margin-top:-1045px; margin-left:49px; float:left; } .nav_header { border:1px solid #dce5f4; width:1054px; height:43px; margin-top:-1045px; margin-left:249px; ba…

    Asked by korozyan,

    0 votes
    12 answers

  11. Абсолютное позиционирование шапки сайта

    Всем привет. Начал я делать сайты по psd макетам. До этого попробовал несколько сайтов верстать по видеокурсам. Вот теперь решил попробовать сам. И вот задумался. Нашёл я резиновый макет. Вроде с шапкой всё понятно, да и помню, что похожее как раз по видеокурсу проходил. Понял, что для шапки вроде бы подходит следующий код: .header { position: absolute; width: 100%; } А вроде бы это position: absolute и не нужен. Поискал в интернете. Часто такие стили применяют, но вот объяснений почему нет. Можете объяснить зачем применяют в шапки сайта абсолютное позиционирование? Частый ли это случай или или применяется только в определённых, редких случаях? …

    Asked by Arxont,

    0 votes
    17 answers

  12. Content model:

    Объясните пожалуйста человеческим языком описание контент модели тега <a> 3.2.4.2 Transparent content models Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

    Asked by AlexZaw,

    0 votes
    2 answers

  13. Стилизация таб переключателей

    Доброго времени суток уважаемые форумчане. Прошу помощи со стилизацией таб переключателей. Мой код, задуманы как в приложении 11. Заранее благодарен.

    Asked by Igorewa,

    0 votes
    2 answers

  14. Css проблема при выравнивании box-sizing:border-box

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

    Asked by Igorewa,

    0 votes
    2 answers

  15. Размер окна браузера (не экрана)

    Для контроля ширины блоков использую медиа запросы в CSS. Они отлично определяют разрешение экрана, но как без js узнать размер окна браузера? P.S. Причем если менять размер размер окна десктопного браузера, то запросы @media screen работают идеально. Мобильный браузер пытаясь имитировать десктопный, уменьшает все так, что шрифт не разобрать. Пытался с помощью (<meta name="viewport" content="width=device-width, initial-scale=1">) исправить, оно просто скалирует не влияя на размер блоков.

    Asked by Ubhra,

    0 votes
    6 answers

  16. Математика и Веб-программирование

    Всем привет. Начал я недавно изучать JavaScript. Раньше, косвенно (в техникуме) изучал C++ (ну и по-стандарту: Pascal, Basic). Сейчас вот решил заняться вёрсткой, а в будущем хотелось бы перейти в JavaScript программисты. С JS вроде всё нормально, но вот задался вопросом насчёт математики. Ясное дело, что программисту очень нужна математика. Сейчас я в выпускном классе на заочном и за последние года 3 не очень часто занимался математикой, и успел всё забыть. Но раньше с ней дружил хорошо. Вот и решил вернуть свои навыки, но так как время идёт, хотелось бы расставить приоритеты в её изучении. Вот собственно и сам вопрос: Можно ли получить примерный список ра…

    Asked by Tascan,

    0 votes
    2 answers

  17. Почему формат шрифта eot на некоторых сайтах подключают отдельно, от всех остальных fon-face ?

    @font-face { font-family:'SF Pro Display'; font-style:normal; font-weight:500; src: local('☺︎'), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff2") format("woff2"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff") format("woff"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.ttf") format("truetype"); /* (C) 2015 Apple Inc. All rights reserved.*/ } @font-face { font-family:'SF Pro Display 500'; src: url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.eot"); /* (C) 2015 Apple Inc. All rights reserved.*/ } 1. Почему при подключении шрифта apple указывает имя шрифту такое font-family: 'SF P…

    Asked by Димитрий,

    1 vote
    8 answers

  18. Сложный слайдер, нужен совет

    Ребят, нужен свежий взгляд, уже голова не варит. Есть слайдер. В нижней части находится ось времени с помесячным шагом. На один месяц на оси времени должно приходиться два слайда. То есть при прокрутке слайдера два раза маркер месяца должен переходить на следующий/предыдущий месяц. Единственное, что приходит в голову, это месяца сделать табами, а внутри каждого таба уже реализовать слайдеры. Но это немного не то, потому что будут работать слайдер только внутри одного месяца, и на другие перемещаться не будет. В общем посоветуйте как поступить

    Asked by brezze,

    0 votes
    3 answers

  19. Как сверстать такой блок

    Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?

    Asked by garmoni,

    0 votes
    17 answers

  20. Сылка с переменой

    Ребят поскольку я только начинающий, подскажите как формировать ссылку с переменой, То есть как сделать чтобы к силки добавлялось значение с переменой !DOCTYPE html> <html lang="ua-UA"> <head> <meta charset="UTF-8"/> <title>Люстра в моїй кiмнатi</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 align="center">Управлiння люстри в моїй кiмнатi</h1> <div class="zaholovok red" id="r">ЧЕРВОНИЙ</div> <input type="range" id="fan11" min="0" max="1023" value="0" step="1" oninput="fan1()"> <div class="zaholovok green" id="g">ЗЕЛЕНЙ</div> <input typ…

    Asked by Gora,

    0 votes
    16 answers

  21. как сверстать

    имеется следующая верстка link Нужно чтобы div.entryFields был резиновым и занимал всю ширину до кнопки button, кнопка button должна быть по правому краю и мы не знаем ее размер Help !!!

    Asked by Daniil Khanin,

    0 votes
    7 answers

  22. Прозрачные иконки

    Ребят, есть идеи как сделать иконки с вот такой прозрачностью, чтобы они просвещали фон родителя ? мне кажется это нереально. Хотел бы уточнить, что сами иконки это svg. Я могу сделать их прозрачными, не могу придумать, как сделать чтобы их просвещал белый фон

    Asked by brezze,

    0 votes
    15 answers

  23. Теоретический вопрос по приоритетам псевдоэлементов

    Добрый день! Наткнулся на интересную ситуацию. Собственно, суть: имеем такой вот мелкий код c first-letter, first-line: https://jsfiddle.net/pwvek2qn/ И я не пойму почему первая буква все равно закрашена в красный. Ведь, как я предполагал, если код выполняется последовательно и строка должна захватывать первую букву, то вся первая строка должна быть синей. То есть, получается что у first-letter что-то вроде !important?

    Asked by Super_Saimon,

    0 votes
    2 answers

  24. CSS 2.1 and CSS 2.2 как их понимать ?

    Правильно ли я понимаю уровни CSS спецификации: CSS 1 - Устаревшая спецификация. CSS 2 - Содержит много ошибок. CSS 2.1 - Та же CSS 2 но исправленными ошибками. CSS 2.2 - Тут что ? Я не понимаю, объясните люди добрые. CSS 3 - Модули CSS, с разными уровнями. Разные модули заменяют разный раздел в CSS 2. CSS 4 - Консорциум говорит что не будет, но посмотрим что на самом деле будет. Для меня не совсем понятно, 2.2 для чего эта спецификация и что она делает ?

    Asked by Димитрий,

    0 votes
    6 answers

  25. Как перенести блок на новую строку

    Вечер Добрый. Пишу с просьбой дабы объяснили как можно перенести блок в определенно место. Скрытый текст <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./css/style.css"> <title>HTML5</title> </head> <body> <div class="" ="wrapper"> <div class="header"> <div class="header_line"></div> </div> <div class="row"> <div class="avatar"></div> <div clas="abme"> <div class="name"></div> <div class="status">&lt…

    Asked by Tardpipl,

    0 votes
    3 answers

  • Обсуждения

    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
    • Switch74
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Switch74 · Posted

      <input type="number">
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
    • DeZ
      Список покидает див

      By DeZ · Posted

      Решение нашел.  Заменил на  Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ...          
    • AIek
      ищу клиентов,услуги

      By AIek · Posted

      Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения.  Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас!  Наш контакт:  https://t.me/MadFury (https://t.me/madfury) (TG) TG:  https://t.me/2e7.io Сайт: https://code-r.io/
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept