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. Вертикальное выравнивание изображения в блоке

    Здравствуйте. Изначально стояла задача центрирования изображения по вертикали и по горизонтали внутри блока. Таких блоков с изображениями несколько, соответственно, ширина и высота изображений может различаться. Ширина и высота блоков фиксированная, известна заранее. Для горизонтального выравнивания использую - text-align:center; Для вертикального выравнивания используется display:table-cell;verticl-align:middle Для ограничения по ширине/высоте изображения (если изображение выходит за пределы блока, уменьшаем) max-width, max-height Два последних условия продублированы expression-ами для IE6 Однако, в случае использования max-width внутри блока с display:table-cell ширина …

    Asked by esche,

    0 votes
    4 answers

  2. Вертикальное выравнивание картинки

    Привет. Если раньше меня спасало line-height, то в этом случае почему-то не работает. Ссыль В дополнительных картинках видно, что изображение прибито к верху. Посоветуйте?

    Asked by d0ublezer0,

    0 votes
    13 answers

  3. Вертикальное выравнивание картинки в div

    Доброго времени суток. Помогите, пожалуйста, выровнять вертикально картинки товаров по центру. Пробовал через, но ее получилось. .textalign{ 2 display: table-cell; 3 }

    Asked by smirn0ff,

    0 votes
    5 answers

  4. Вертикальное выравнивание картинки в ссылке

    Добрый день. Никак не могу решить проблему вертикального выравнивания картинки в ссылке. HTML код: <div class="portf"> <a href="#"><img src="../userfiles/tovaryimg/1.png" alt="" /></a> </div>CSS код: .portf{ text-align:center; border:2px solid #0F0; margin:50px 0 10px 20px;}.portf a { border:2px solid #FFF7AF; width:300px; height:300px; }.portf a img{ width:250px;}Пробовал применить к .portf a свойство display:table-cell; vertical-align:middle; Не выравнивается картинка по вертикали. Помогите решить проблему.

    Asked by anipriev,

    0 votes
    8 answers

  5. Вертикальное выравнивание контейнера с блоками

    Привет. Ребята, такая проблема, нужно вертикально выровнять целый контейнер с 7 блоками внутри. Демо - http://rommar.in.ua/align/ Размер контейнера резиновый (по контенту). Отступы должны быть по 25% от всех сторон при размере экрана больше 1000 пикс., если меньше 600 пикс., то отступы должны быть по 1%. С вертикальным выравниванием все ясно, пробовал делать для чистого блока, все работает, а вот для такого контейнера не могу нормально сделать, целый день сижу кручу. <div class="main"> <div class="corner tl"></div> <div class="edge"> <h1>Lorem ipsum dolor sit.</h1> </div> <div class="corner tr"></div> <div class=…

    Asked by edwinkkc,

    0 votes
    0 answers

  6. Вертикальное выравнивание многострочного текста в блоке

    Здравствуйте. Не нашёл похожей на мою ситуацию. =( У меня есть стандартная структура меню. <ul> <li> <a href="\">Главная</a> </li> <li> <a href="\">Основные <br/>документы</a> </li> <li> <a href="\">Приказы</a> </li> <li> <a href="\">Последние <br/>новости</a> </li> </ul> Делаю меню горизонтальным, представляю "a" как ячейку таблицы, что бы отцентровать двухстрочные пункты меню по центру, растягиваю "а" так, что бы закрыть вс. область кнопки, даю фон "а". li{ float:left; width:100px; height:50px; } li a{ width:10…

    Asked by lihih,

    0 votes
    1 answer

  7. Вертикальное выравнивание на flex

    Добрый день. Хочу разобраться с вертикальным выравниванием на flex. Допустим такая задача как на картинке. Желтому блоку я задаю: { height: 300px; display: flex flex-flow: column nowrap; justify-content: center; align-items: center; } И все встает как надо, но только если нам известна высота желтого блока. Вопрос такой, как избежать указания фиксированной высоты для желтого блока?

    Asked by BehemothOz,

    0 votes
    1 answer

  8. Вертикальное выравнивание по центру

    Есть div. в нем картинка. нужно сделать что бы эта картинка была по центру дива в котором она находится. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>vo4tap</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="vo4tap" /> <style type="text/css"> html, body {pading:0; margin:0; background-color:#000000; height:100%; position:relative; } img {border:0;} #all {min-height:100%; text-align:center; background:#f2ddc6;} </style> </head> <b…

    Asked by vo4tap,

    0 votes
    25 answers

  9. Вертикальное выравнивание по центру <li> а текст

    Добрый день. Есть проблема текст не могу выровнять по центру (вертикально). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="SHORTCUT ICON" href="favicon.ico" /> <title>Документ без названия</title> </head> <body> <table width="960" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="100"> &lt…

    Asked by Sel-p,

    0 votes
    8 answers

  10. Вертикальное выравнивание по центру li a текста

    Долго думал в какой раздел пихнуть, сюда или в раздел "проблемы верстки". Решил что раз я тут только что зарегестрировался, то надо пихать в этот раздел, если я не прав - переместите. Задача : Сделать на тулбаре список ссылок-кнопок. Чтобы не быть пустомелей вот скрин (Стрелка на скриншоте заменяет курсор потерянный при printscreen) Причем чтобы при наведении курсором эта область затемнялась (как на скриншоте) Также чтобы вся выделенная область была ссылкой Проблема : Как видно на скриншоте выше, текст лежит сверху. Теперь собственно общий вопрос: Как выровнять текст вертикально по центру находящийся внутри li a, при условии что a растянут на всю ширину li. Или подскажит…

    Asked by Fedcomp,

    0 votes
    10 answers

  11. Вертикальное выравнивание при абсолютном позиционировании

    Здравствуйте. Почему не работает вертикальное выравнивание при абсолютном позиционировании? Код хтмл: <div class="col"> <p>Lorem ipsum dolor sit amet..</p> <div class="col-prew">text prew</div></div><div class="col"> <div class="col-prew">text prew</div></div><div class="col"> <div class="col-prew">text prew</div></div>Код цсс: .col { display: table; position: relative; float: left; width: 33.3%; height: 250px; background: red;}.col:nth-child(2n) { background: green;}.col-prew { display: table-cell; position: absolute; top: 0; left: 0; width:…

    Asked by Temiks,

    0 votes
    10 answers

  12. вертикальное выравнивание при контейнере больше родителя.

    Здравствуйте, все! Проблема такова, что надо выровнять блок, который больше родителя по высоте. т.е. мы имеем родителя с данными width: 100%; max-height: 300px; и запихиваем туда например видео или картинку (не фоном!), которые имеют параметры width: 100%; а высота получается уже 500px, как разместить что бы вырезалась средняя часть? т.е. отцентрировать по вертикали? размеры заранее не известны. Может кто толкнет в нужную сторону? Всем заранее спасибо!

    Asked by Fate-ol,

    0 votes
    4 answers

  13. Вертикальное выравнивание пунктов меню

    Пытаюсь сделать вот такое меню http://jsfiddle.net/j7cQW/6/ Суть в том, что текст в каждом пункте меню должен автоматически выравниваться вертикально по середине, независимо от того, одна там строчка или две, то есть сегодня там одна строчка, завтра их может стать две. Плюс, это все обязательно должно быть кроссбраузерным начиная с IE7+. Мой пример работает только в современных браузерах. Уже всю голову сломал. Возможно проблема решается элементарно, но я не вижу хоть убей.

    Asked by Bassline,

    0 votes
    6 answers

  14. Вертикальное выравнивание рисунка в блоке

    Всем привет! сразу к делу. есть блок, внутри него надо отцентрировать рисунок по вертикали. вроде бы есть решение height:... line-height:... Но не работает в IE 6. Для IE6 нашел нашел на этом форуме решение с пустым <span>, но оказалось что не работает в Google Chrome (а, следовательно в Sofari). Вот кстати рисунок. Итак мне просто нужно чтобы значок RSS был на одной линии с текстом. Никаких таблиц. необходима валидность, совместимость: IE6 и выше, Opera 9 и выше, FF 2 и выше, Google Chrome. Вроде бы на превый взгляд задача оч. проста, но бъюсь уже целый день Доп инфо - высота блока и размеры рисунка известны. Особое требование - при изменении масштаба на один …

    Asked by Punsh,

    0 votes
    2 answers

  15. вертикальное выравнивание с text-overflow:ellipsis;

    Привет. Почти как обычно: выровнять блок вертикально по центру родителя, высота блока зависит от контента, родитель должен реагировть на переполнение по Y (переполняет выравниваемый блок) увеличением высоты или появлением скролла. Можно использовать продвинутый (-webkit) css. Проблема в том, что блок содержит детей с overflow:hidden; + white-space:nowrap; + text-overflow:ellipsis; из-за чего стандартные способы ломаются: 1. display:table-cell; + vertical-align:middle; http://jsfiddle.net/7Ewfx/7/ не срабатывает overflow:hidden; . 2. display:flex; + align-items:center; http://jsfiddle.net/7Ewfx/8/ не срабатывает text-overflow:ellipsis; и блок с текстом смещается влево. 3. …

    Asked by Riim,

    0 votes
    1 answer

  16. Вертикальное выравнивание строки ввода и кнопки

    Здравствуйте, дорогие форумчане! Я прошу у Вас помощи в решении вопроса, нисколько не сложного для таких профессионалов, как Вы. На странице: я не могу выровнять по вертикали строку ввода и кнопку "отправить" (кнопка чуть выше строки). Если можете, посоветуйте как это сделать.

    Asked by AlexPa,

    0 votes
    1 answer

  17. Вертикальное Выравнивание Текста

    На просторах интернета нашел такое колдунство: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 10px; } input { height: 200px; line-height: 200px; text-align: center; font-size: 24px; -mos-transform: rotate(-90deg); border: red 1px …

    Asked by Great Rash,

    0 votes
    16 answers

  18. Вертикальное выравнивание текста

    Нужно сделать панель [изображение(N*N)] [текст] как выравнять текст по вертикали, чтобы он был по центру ? т.е так вот (извиняюсь за псевдографику =)): [изображение] [изображение] [изображение] [текст] [изображение] [изображение]

    Asked by NoMe,

    0 votes
    3 answers

  19. Вертикальное выравнивание текста

    Здрасте. У меня есть код цсс: body{ margin: 20px; } #logotext{ text-align: left; vertical-align: bottom; } #header{ background:#bdda7e; margin-bottom: 5px; width: 100%; height: 100px; border:1px solid #a4ce60; border-bottom:1.5px solid; } и код хтмл: ... <body> <div id="header"> <div id="logotext">PopStar</div> </div> <div id="leftcolumn"> ... скриншот. Вопрос: почему не происходить вертикальное позиционирование текста "PopStar"? В чем может быть проблема - не могу понять. Может кто разъяснить нюансы?

    Asked by xunicornx,

    0 votes
    1 answer

  20. Вертикальное выравнивание текста

    Не получается выровнять. Использовал vertical-align: middle; display: inline-block; Не получается. Как это выровнять так, чтобы при добавлении/ удалении текста, он всегда оставался вертикально по середине? http://codepen.io/anon/pen/Ejmbro

    Asked by yaparoff,

    0 votes
    2 answers

  21. Вертикальное выравнивание текста в блоке

    Можно ли как нибудь вертикально выровнять текст без заголовка в блоке. Че только не пытался сделать ничего не прет.

    Asked by USSURISK-MAN,

    0 votes
    8 answers

  22. вертикальное выравнивание элементов

    Опять-доброй ночи. <div class="container2"> <div class="hr">Subsea Enclosures</div> <div class="host"> <p style="margin:30px 0 0 15px" align="left"><span class="text_black">Subsea Enclosures</span></p> <table> <tr> <td width="33%" style="vertical-align:top"><img src="../images/Subsea Enclosures/Subsea Enclosures1.gif" />Metallic Enclosures</td> <td width="33%"><img src="../images/Subsea Enclosures/Subsea Enclosures2.gif" />Plastic Enclosures</td> <td width="33%"><img src="../images/Subsea Enclosures/Subsea Enclosures3.gi…

    Asked by pattaya,

    0 votes
    2 answers

  23. Вертикальное выравние в DIV

    Необходимо сделать в DIV'е вертикальное выравнивание по середине. Задаю display: table-cell; vertical-align: middle; text-align: center; в итоге текст примыкает к верхнему левому углу. В чем проблема, метод вроде нарыл на просторах инета => у кого-то он точно работает. P.S.: браузер - Google chrome

    Asked by Mosya,

    0 votes
    3 answers

  24. Вертикальное вырвнивание по нижнему краю

    Помогите разобраться пож-та. Есть сайт http://203803.ru/ Что то пытаюсь уже давно разными способами выравнять блок с ценой и кнопкой в корзину по нижнему краю. и никак не получается он просто прилип к картинке и не хочется спускаться вниз. Помогите кто чем может

    Asked by lalalag,

    0 votes
    1 answer

  25. Вертикальное дерево

    Кто-нибудь может предложить верстку вертикального дереа (вложенного множества)? Нигде не нашел, сам попытался (3 уровня вложенности), но получилось так себе... У меня не учитывается то, что вложенный уровень должен начинаться не там, где заканчивается его родитель, а там где заканчивается весь блок его родителя. Ну и код должен быть динамичный, т.е. верстка должна учитывать, что он будет формироваться программно, т.е. нельзя скажем позиционированием просто слои поставить как нужно... Кто не понял, мне нужно что-то на подобие следующего:

    Asked by Aliance,

    0 votes
    12 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