HTML Coding

29,542 questions in this forum

1. flexbox и nth-last-child

   Добрый день. Возникла проблема следую щего плана, нужна адаптивная верстка с mobile-first. При этой верстке я сначла сверстал mobile получилась как на pictute1 picture1.psd. Чтобы сделать расстояние между блоками, которые я обвел бордером я задал margi-bottom, а у последнего элемента я его соответственно почистил. Но затем на tablet версииpicture2.psd и desktop picture3.psd у последнего элемента высота стала больше чем у остальных трех. При margin-bottom 0; для последнего элемента ничего не меняется. Что это за лишняя высота у последнего блока, откуда она появилась и как ее убрать?

   Asked by Romario1985, April 13, 2021

   0 votes
   2 answers
2. FlexBox и адаптив

   У меня такой вопрос: Если я сверстал сайт на FlexBox, стоит вообще использовать медиа запросы? Или использования FlexBox достаточно для адаптива?

   Asked by John106, March 24, 2017

   0 votes
   4 answers
3. FlexBox или нет...

   Добрый день. Подскажите пожалуйста как добиться такого, что бы новые блоки добавлялись по порядку (по высоте). Ширина блоков и окна статична, по высоте блоки двух типов. На скрине черным пронумерованы по порядку добавления блоки которые уже есть, а красным обозначены места для последующего добавления.

   Asked by Ubhra, March 17, 2018

   0 votes
   7 answers
4. Flexbox, разочарование или нет?

   Казалось бы, реализовывать с помощью флексбоксов галереи или карточки товаров должно быть намного более удобно, чем через флоаты или инлайн-блок. Но вот мне так и не удолось добиться того, что бы красные плитки шли одна за другой, а именно, что бы не было пустого места между 7 и 8 плиткой ( а это, как раз, типичная модель галереи или карточек товаров должна получиться ) http://jsfiddle.net/3zkAf/ Что же делать?

   Asked by Evkaky, December 17, 2013

   0 votes
   4 answers
5. flexie.js - не работает?

   Собственно, проблемы с кроссбраузерностью flexbox Использую полифилл flexie.js - но не помогает В IE 9 это выглядит так: Может не так пользуюсь? https://jsfiddle.net/jysd1us0/1/

   Asked by yaparoff, February 15, 2016

   • flexie
   • flexbox
   0 votes
   1 answer
6. Flexslider

   http://www.woothemes.com/flexslider/ Решил воспользоваться этим слайдером, т.к. он адаптивный. Все работает, кроме того, что стрелки передвижения слайдов не visible. Они есть, т.к. при наведении курсора курсор меняется. Я сделал отдельный документ *.html без другого контента, только слайдер. Стрелки появились. Следовательно проблема в родителях, но мне ее не найти. Помогите пожалуйста! Вот css для стрелок: /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(components/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-…

   Asked by Michael Myers, June 2, 2013

   0 votes
   3 answers
7. floaf и overflow: auto

   Здравствуйте. Проблема такая. Имеем подобную структуру http://codepen.io/usf/pen/enGgE В хроме при overflow: auto ширина блока blockquote ведет себя правильно. А вот в мозилле ширина блока составляет на 200 пикселей меньше. То есть, чтобы они вели себя одинакового нужно добавить margin-left(или padding) 200px. НО! В моем случае размер блока слева может быть разным, не только 200, как заставить ФФ вести себя точно так же, как хром, чтобы получить верное значение ширины блока blockquote (отсутствие переносов и прокрутки)

   Asked by USF, August 5, 2014

   0 votes
   8 answers
8. float

   Вобщем, необходимо используя дивы и float сделать шесть див - голову, контейнер, лево, право, центр, футер Вот примерно схема _______________________________________________________________________ | header | |______________________________________________________________________| ______________________________________________________________________ | __________________________________________________________________ | | | left | center | right | | | |____|___________…

   Asked by Boris.d, March 8, 2009

   0 votes
   4 answers
9. float

   Задача: Выставить в ряд 3 float:left, но запретить им перенос друг под друга при нехватке длины родителя. Есть варианты? А может float тут вообще не при чем? Может поставить в линию без переноса 3 резиновых блока можно как-то по-другому?

   Asked by RoleXXX, April 8, 2009

   0 votes
   11 answers
10. Float

    замаялся....уже не знаю что делать.... вот такая таблица: ############## # 1 # 2 # 3 # 77# ########### 77# # 4 # 5 # 6 # 77# ############## 1-7 картинки, причем 7 на 2 строки хтмл: <div id="1"><img src="img/bluzka00304.jpg" height="237" width="180"/></div> <div id="2"><img src="img/bluzka00302.jpg" height="237" width="180"/></div> <div id="t3"><img src="img/bluzka00305.jpg" height="237" width="180"/></div> <div id="4"><img src="img/bluzka00303.jpg" height="237" width="180"/> </div> <div id="5"><img src="img/bluzka00306.jpg"height="237" width="180"/> </div> <div id="6"><im…

    Asked by sol, May 23, 2009

    0 votes
    4 answers
11. float

    Доброго времени суток. Подскажите пожалуйста как решить проблему с float'ом. Собственно линк на сетку: http://inkrasnodar.ru/w/GOVNO/index.html Проблема очевидна. Левая колонка ниразу не левая Спасибо.

    Asked by nomn, July 2, 2011

    0 votes
    29 answers
12. Float

    Подскажите пожалуйста почему так вот два блока один плавающий 2ой нет ,2ой находится под ним.Почему он его не обтекает с левой стороны а ноходится под ним и у него пропадает фон?? [ code ]http://savepic.su/638264.jpg[ /code ] .blok1 { width:200px; height:150px; background:orange; border:1px solid; float:left; } .blok2 { width:200px; height:150px; background:yellow; border:1px solid; } <div class="blok1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div> <div class="blok2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam …

    Asked by mr.Dassler, November 2, 2011

    0 votes
    11 answers
13. float

    Имеется каркас: <div id="left_block"></div> <div id="center_block"></div> <div id="bottom"></div> #left_block { width:100px; height:10px; float:left; } #center_block { width:200px; height:10px; margin-left:110px; } 1. Нижняя часть "bottom", не хочет растягиваться по высоте левой части "left_block" Что делать в такой ситуации? clear: left не помогает... Данная ситуация во всех браузерах 2. в IE 8 такое ощущение, что он не понимает float и ставит center_block ниже left_block, в остальных браузерах все хорошо. Извините если туплю, новенький в этом деле...

    Asked by SLameN, February 12, 2012

    0 votes
    1 answer
14. float

    Здравствуйте, подскажите пожалуйста как отцентрировать картинку справа, не задавая ширину абзацу? http://jsfiddle.net/ShootingStar/EQuwu/

    Asked by ShootingStar, June 22, 2012

    0 votes
    5 answers
15. float

    как можно сделать, чтобы плаваюший div#center учитывал пустой div#left ? body{ margin: auto; } #left{ float: left; width: 200px; background: yellow; } #center{ float: left; width: 200px; background: #ccc; } <div id="left"></div> <div id="center">center</div>

    Asked by valera, August 14, 2013

    0 votes
    3 answers
16. float

    Здравствуйте, уважаемые форумчане. Такой вопрос: Если использовать float, то объект как бы вырывается из верстки, тоесть если <div id = "main"> <div id="left"></div> <div id="right"></div></div><style> #main{ background-color: #fff; } #left{ float: left; } #right{ float: right; }</style>то объект main будет нулевого размера. Правильно? А как сделать, что бы left и right не вырывались из main?

    Asked by Todmy, September 20, 2014

    • float
    • обтекание
    0 votes
    3 answers
17. float -ы

    <!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="ru" lang="ru"> <head> <title></title> <style type="text/css"> .left {float: left; width: 15%; border: 1px solid green;} .right {float: right; width: 15%; border: 1px solid green;} .center {border: 1px solid red; width: 60%; margin-left: 20%;} </style> </head> <body> <div class="left">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/></div> <div class="right">2<br/>2&…

    Asked by Razor, December 7, 2009

    0 votes
    1 answer
18. float & ie6

    Приветствую всех, вот такая загвоздка. #cont {width:100%;} #left {float:left; width:100px; height:20px;} #center {margin:0 30px 0 100px; height:20px;} #right {float:right; width:30px; height:20px;} <div id="cont"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> в ie6 у div#center есть маленькие отступы по несколько пикселей справа и слева от div#right и div#left соответственно как с этим справится не подскажите?

    Asked by rutt, May 24, 2011

    0 votes
    11 answers
19. Float & Position

    Приветствую! Просматривал недавно разметку одного известного сайта, который клепает туториалы различные, и заметил интересную. для меня. во всяком случае, вещь. Есть блок-родитель с position: relative, у этого родителя есть дочерний блок с position: relative И с float: left, а позиционирован с помощью margin . Читал в какой-то книжке, по-моему у МакФарланда, что так делать не круто и вообще смысла в этом совершенно нет. Зачем, в таком случае, нужна такая разметка?

    Asked by SuperJerk, January 12, 2013

    0 votes
    3 answers
20. float + задний фон

    Доброе время суток. Есть вот такая проблема. Когда раскидывал по сторонам "Новости" и "Мониторинг", получилось так, что задний фон не растягивается относительно контента HTML: <div class="content"><div class="content-left">Новостная лента<img src="/template/assets/images/logotype.png"></div><div class="content-right">Мониторинг<br>s</div></div>CSS: .content { padding: 10px; margin-left: 300px; margin-right: 300px; background: #fff;}.content-left { float: left;}.content-right { float: right;}Подскажите пожалуйста как с этим бороться

    Asked by Florens, January 1, 2015

    0 votes
    3 answers
21. Float in Float

    Привет всем! Вот недавно для себя обнаружил еще 1 странное поведение ие6,7. Вот решил поделиться с вами, возможно конечно кто-то уже в теме, но думаю тем не менее некоторым тоже будет полезно узнать Скажем есть внешний блок, он зафлоачен лефтом! В нем есть 3 блока (как бэ мы делаем растягивающуюся менюху с закругленными краями по бокам, высота фиксированная). Эти 3 блока (включая правый) нужно все флоатить по лефту! Если правый блок (уголок) зафлоатить райт, то в ие 6,7 это растянет внешний блок (в данном примере .menu_item) с флоатом лефт на всю ширину экрана. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra…

    Asked by TonKhaO, April 26, 2010

    0 votes
    15 answers
22. float lef и float right - проблема с clear в разных браузерах?

    простейший пример я думаю, что никого не удивить тем, что IE и Firefox отоброжают это по-разному. однако логика именно файрфокса мне непонятна. мне лично кажется, что по спецификации IE отображает данных пример корректно. если я не прав - объясните почему. хочется, естественно, сделать так, чтобы в разных браузерах этот пример отображался одинаково (так как в IE). свойствами css это возможно? p.s. при этом нужно чтобы в html части дивы шли именно в этом порядке: 1 l l l ... 2 r r r ...

    Asked by slopen, September 23, 2007

    0 votes
    16 answers
23. Float vs Position

    В разделе "Верстка с помощью слоев" (_htmlbook.ru). Описаны два метода расположения блоков (слоев) с помощью обтекания (Float) и позиционирования (Position). Оба метода мной испробованы. Хотелось бы уточнить, каким методом верстают профессионалы и в чем разница этих методов? Их достоинства и недостатки.

    Asked by Selen, February 4, 2011

    0 votes
    2 answers
24. float без обтекания снизу

    Где-то читал, но потерял где именно, есть какое-то свойство к float запрещающее обтекание снизу

    Asked by ShumNo, May 8, 2011

    0 votes
    3 answers
25. float в inline-block

    Добрый день. Как известно инлайн блоки выстраиваются по базовой линии самой нижней строки текста(а если пустой - то нижняя граница элемента). Так вот - http://jsfiddle.net/DPWUP/2/ собственно пример это демонстрирует. Теперь, если блоку inner-2 задать float то все по прежнему как ожидается - текст выровнен по общей базовой линии. А теперь удаляем нижний span, и в итоге блок прыгает наверх. Собственно я понимаю, что блочные элементы выпадают из потока, но что происходит в данном случае конкретно? С точки зрения спецификации.

    Asked by USF, August 21, 2012

    0 votes
    2 answers