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. float элемент выходит за нижнюю границу не float элемента

    Есть проблема. У меня есть div, в котором может находится любой текст, картинки, и вс? что угодно, так как это блок новостей, и администратор может размещать свою новость тут. Предположим, что новостной контент состоит из картинки и текста <div> <p><img src="test.jpg" alt="" />some text here</p> </div> Но это не самое красивое размещение текста относительно картинки, и администратор решает картинку сделать обтекаемой справа: <div> <p><img src="test.jpg" alt="" align="left"/>some text here</p> </div> И вот тут возникает проблема, картинка почему-то вываливается ниже нижней границы div'а. Немного поэксперементиро…

    Asked by Altex,

    0 votes
    2 answers

  2. Float элемент странно вырван из потока.

    Давно усвоено, казалось бы, флоат элемент вырван из потока. Каким образом margin-top элемента <nav> в потоке добавляет тот же margin-top элементу <div>, вырванному из потока? http://codepen.io/462960/pen/VaWwYQ

    Asked by seemax,

    0 votes
    1 answer

  3. float ячеек таблицы в ie7

    Пытаюсь встроить содержимое одного из канала youtube на сайт с помощью гугловского же видеобара. http://www.google.com/uds/solutions/wizards/videobar.html В настройках можно установить вертикальную и горизонтальную ориентацию бара. Скрипт выводит картинки с ссылками на видео в однострочной таблице (при горизонтальной ориентации бара), в каждой ячейке по изображению. Однако мне нужно было устроить что-то по типу видео галлереи: чтоб все не влезающие в строку ячейки переносились на следующую. Попробовал так сделать: для бара установил горизонтальную ориентацию, а так же, чтоб он выводил все видеозаписи канала, а не последние четыре. В стилях ячеек таблицы поставил float: l…

    Asked by Adlaran,

    0 votes
    3 answers

  4. float-поведение без переноса

    Подскажите пожалуйста, как такого добиться. Если содержимое зеленого блока может обтекать синий - это стандартная ситуация, а так - я не знаю.

    Asked by leventov,

    0 votes
    7 answers

  5. float, clear, overflov

    Сабж. Не только подробное описание, но и различные трюки. Где почитать очень, ну очень подробно :). Статья, набор статей или раздел книги (название, аффтар, и желательно раздел или страница ). С примерами. На русском.

    Asked by torsar,

    0 votes
    4 answers

  6. Float, Clear... или я усложняю?

    Такой макетец: ┌──────────────────────────────────────────────────┐ │ │ │ Каля-маля │ │ ┌───────────┐ │ │ │ │ ☻ 111111 │ │ │ │ ☻ 222222 │ │ │ Рису- │ ☻ 333333 │ │ │ нок │ │ │ │ │ │ │ │ │ │ │ │ │ ☻ 44444 ☻ 55555 │ │ └───────────┘ ────────────────────────────── │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────┘ Соответственно - картинке задаю float: left, тегу списка 1-2-3 - тоже, но не догоню, как прижать горизонтальный с…

    Asked by alexlut,

    0 votes
    11 answers

  7. Float, выравнивание по ширине

    Здравствуйте. Вопрос по следующей вёрстке: <!DOCTYPE html> <html lang="ru"> <head> <style> .left{ float:left; background:red; } .no_float { background:green; text-align:center; font-size:30px; } </style> <meta charset="utf-8" /> <title>Документ без названия</title> </head> <body> <div class="left"> float:leftrvrcrvrvr </div> <div…

    Asked by den_alex_96,

    0 votes
    4 answers

  8. Float, отступы и media queries

    Привет. Напал с утра жёсткий затуп на меня — понять не могу как правильно сделать. http://jsfiddle.net/sj115o5j/Вот прмерный макет. Один блок-столбик справа и основной слева. Суть в том, что aside мне надо до определённой ширины делать 30%, потом 200px, а потом надо сделать так, чтобы он ушёл под основной блок. Очевидным кажется решение с float left, но я не могу сделать так, чтобы один справа был фиксом, а левый был бы резиновым. Как вообще это делается правильно?

    Asked by Veseloff,

    0 votes
    3 answers

  9. Float: both. Миф или реальность?

    В одном из источников набрёл на both в списке возможных значений для атрибута float. Это какая-то ошибка или реально интерпретируется каким-нибудь браузером?

    Asked by rasmus,

    0 votes
    5 answers

  10. float: left

    http://borber.ru/htmlbook/template5.html Вот тут обычный вариант «двухколоночного макета». Меню идёт с float: left. Далее нам нужно вставить много (неизвестно сколько именно) блоков 100×100, которые бы тоже бы были с float: left; А потом ещё раз такие же блоки. Само собой, надпись «Вторые блоки» тоже попадает под раздачу. Что делать, думаю я про себя. Вставляю пустой блок с clear: left, который до кучи хватает ещё и колонку с меню. http://borber.ru/htmlbook/template6.html Как бы вот так сделать, чтобы и left «почистить» и меню не захватывать?

    Asked by Veseloff,

    0 votes
    6 answers

  11. Float: left

    Вот, посмотрите: http://jsfiddle.net/iKNG/M6yb7/ Надо, чтобы в 1 Div-родителе Div-дети выстраивались в 1 строку, во 2 так же, но в отдельную. То есть так: а не так: Как это реализовать?

    Asked by iKNG,

    0 votes
    2 answers

  12. float: left

    http://jsfiddle.net/ruCgg/1/ Почему при использовании float: left div вылезает из другого? Разве так должно быть? Может я где-то накосячил?

    Asked by GuitarFan,

    0 votes
    5 answers

  13. float: left в резиновом div в ie6

    Как в IE6 сделать так, что бы внешний div по высоте был резиновый, если внутри которого div с float left ? Вот пример: http://local-schillerfan.vws.com.ua/tools/makeup/field_blocks_lite.html Dj всех браузерах отлично работает, кроме ie6

    Asked by VIRUS,

    0 votes
    0 answers

  14. float: left и margin-top

    Есть такой HTML: <div style="float: left;"> a </div> <div style="clear: left; margin-top: 30px;"> b </div> В IE работает нормально, т.е. b отстоит от a на 30 пикселей от a. А вот в Mozilla margin-top никакого влияния не оказывает. Почему? Кто работает по стандартам? Как сделать правльно, чтобы работало везде? PS В поиске искал и форум читал уже 4 часа подряд. Но ввиду сложности подобрать ключевые слова -- ничего не нашел.

    Asked by dsome,

    0 votes
    4 answers

  15. float: left не работает в IE7

    привет, нужна ваша помощь. ситуация банальная ... но я не могу ее решить .. вот код... <div id="test"> <div id="t1"></div> <div id="t2"></div></div>#test { width: 120px; height: 300px; background-color: red; position: relative;}#t1 { width: 50px; height: 50px; background-color: black; float: left;}#t2 { width: 150px; height: 50px; background-color: pink;}одним словом - как заставить IE7 - выполнить условие float:left - когда родительский блок меньше чем дочерний ... всех других браузерах все работает как надо .. а вот здесь как всегда

    Asked by zerofx,

    0 votes
    5 answers

  16. float: left; width: 100%; v2

    Дорогие форумчане. Из наболевшего. Когда ставишь блоки с float, указываешь width: 100%; и padding, то блок вылазит за границы документа и приходится что-то химичить. Если убрать float, все становится в порядке. Указываю пример, но я вроде не должен этого делать, пока ребята не запустят проект. wingwork.ru - типичный пример описанного. Раньше костыли делал через JS и почти точно это не по христиански совсем. Подскажите, как работать с такими ситуациями. Очень хочется избавиться от этого костыля.

    Asked by html_do_man,

    0 votes
    5 answers

  17. float:left

    В чем проблема не пойму когда нет float все нормально работает а с float почему то фон пропадает.Может кто то обьеснит почему так? Скрин шаблона: http://s48.radikal.ru/i119/1109/b3/9be71e624ce7.jpg Css http://ggggftmggg.ucoz.ru/Style.css HTML http://ggggftmggg.ucoz.ru/1.txt float:left присутствует float:left не присутствует Фон серый есть!

    Asked by Gvard,

    0 votes
    6 answers

  18. float:left

    У меня выводится 4 изображения в горизонтальном порядке и до бесконечности в вертикальном. CSS: #img { float: left; width: 200px; height: 150px; margin: 10px; } HTML: <a href='view.php?id=$mass[id]'><img src='traffic/$mass[url]' id='img'/></a> Мне надо, чтобы под каждым изображением выводилось ещё одно значение, допустим текст Привет (позже вставлю переменную), как реализовать? Делаю таблицей у меня всё сползает или отображает только три изображения, прошу вашей помощи.

    Asked by epog333,

    0 votes
    1 answer

  19. float:left

    при изменений окна браузера в Firefox, #right флоат заезжает на #out, кто как решает проблему? оба элемеента обязательно должны быть float:left body{ margin: auto; } .container{ margin: auto; width: 400px; } #out{ float: left; width: 100%; margin-right: -30%; } #right{ float: left; width: 30%; background: silver; } #center{ margin: 0 30% 0 0; background: blue; } <div class="container"> <div id="out"> <div id="center">center center center center center center center center</div> </div> <div id="right">right right right right</div> </div>

    Asked by valera,

    0 votes
    2 answers

  20. float:left — выталкивание нижестоящего контейнера

    Приветствую, односельчане Прошу о небольшой помощи по верстке — буду очень признателен вам за советы. Поставил фотогалерею NextGEN на этот сайт. И заметил, что фотографии странно себя ведут: Привожу html-код левой верхней фотографии (см. скриншот выше) <div class="ngg-gallery-thumbnail-box" id="ngg-image-26"> <div class="ngg-gallery-thumbnail"> <a rel="lightbox[set_4]" title="Применение сигнализаторов загазованности RGD" href="http://seitron.ru/wp-content/gallery/objects/obj1.jpg" class="cboxElement"> <img width="250" height="188" src="http://seitron.ru/wp-content/gallery/objects/thumbs/thumbs_obj1.jpg" alt=" " title=" "> </a> &l…

    Asked by dreamcutter,

    0 votes
    9 answers

  21. float:left блоки равной высоты в несколько строк

    Добрый день, уважаемые форумчане! Делаю сайт, левая колонка фиксированной ширины, правая (контент) резиновая. В правой колонке выводится список изображений с заголовками: css: .img { width: 200px; float: left; margin: 0 10px 10px 0; } html: <div class="img"> <img src="image.jpg" alt="" /> <h3>Title</h3> </div> <div class="img"> <img src="image1.jpg" alt="" /> <h3>Title</h3> </div> ... <div class="img"> <img src="imageN.jpg" alt="" /> <h3>Title</h3> </div> в итоге зрительно должно получиться подобие таблицы, где по ширине экрана выстраивается столько изображений, сколько позв…

    Asked by AKyHuH,

    0 votes
    46 answers

  22. float:left для выравнивании по верхней стороне или лучше что-то другое?

    Здравствуйте снова На сайте надо блоки "Подарки и сувениры", "Дизайн" упорядочить по верхней границе. Попробовал стиль: float: left;для div.rt-block.cp - справляется, надо только будет тогда display: inline-block; у них убрать. Это правильный метод или лучше что-то другое использовать для div.rt-block.cp, у которых сейчас display: inline-block; ?

    Asked by borus,

    0 votes
    2 answers

  23. float:left и выравнивание по центру

    Добрый день, есть простой код: <div style="width:auto; height:150px; margin:0 auto;"> <?php for ($x = 0; $x < count($arraypath); $x++) { ?> <div style="width:100px; height:102px; margin:28px 10px 0 0; float:left;"> <img src="<?php echo $arraypath[$x]; ?>" title="" alt="" style="width:100px; height:102px; cursor:pointer;" onclick="chadphoto(this);" /> </div> <?php } ?> </div> Как сделать, что б картинки, вне зависимости от их кол-ва, были всегда по центру div'а ? В данном примере они все прижаты к левому краю.

    Asked by bobo,

    0 votes
    2 answers

  24. float:left и новая строка

    Есть код <img src="..." align="left" height="400px" />asdf asfasfa sf asdfsadfasdf asdf asdf sadfa sfasf sdfasdf <div class="newline_layer"> text from new line</div> Так вот, какие стили влепить, чтобы слой newline_layer пошел сразу после картинки(под ней), а не справа от нее. (иначе кроме как сделать кучу <br/> до конца картинки и добавить слой не получается). Может есть решение?

    Asked by dima-u,

    0 votes
    3 answers

  25. float:left и прозрачный фон

    Когда я вставляю стиль float:left то блок становится белым и закрывает фоновое изображение родительского дива. поиск в интернете не дал ни чего вразумительного. подскажите, кто знает, это глюк, недокументированная особенность? как победить?

    Asked by alexd73,

    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