Launder
-
Posts
293 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Launder
-
Кстати, похоже, что да. Посмотрим как это будет работать, если всё это дело немного усложить
-
И, если теперь это отдельный элемент (ul), то можно ли сделать их размеры (li и находящегося внутри него ul) взаимообусловленными?
-
По умолчанию, у инлайн-блока, ширина как у строчного элемента. Ну ясно, в принципе, если его явно не растянуть, по умолчанию блок его не растянет.
-
Да, что-то я перемудрил. Убрал фиксированные размеры li. И добавил .menu ul свойство position: absolute Я правильно понимаю, что теперь этот список (ul) 1. располагается относительно li (поскольку li - родительский элемент и у него position: relative) 2. но при этом, он (ul) уже В НЕГО (li) НЕ ВХОДИТ? http://jsfiddle.net/Launder/buok0m1s/
-
С учётом того, что li у нас inline-block разве его размер не должен зависеть как раз от размера вложенных блоков? а с учётом того, что блок, по умолчанию, занимает всю доступную ширину, разве не должен он растягивать весь элемент?
-
http://jsfiddle.net/Launder/d70c2kg1/4/ <ul class="menu"> <li><a href="#">Разные вкусности</a> <ul> <li><a href="#">Суп с клёцками</a></li> <li><a href="#">Пироги с капустой и яйцом</a></li> <li><a href="#">Торт Медовый</a></li> </ul> </li> <li><a href="#">Узбекская кухня</a> <ul> <li><a href="#">Плов по-бухарски с изюмом</a></li> <li><a href="#">Плов с бараниной и нутом</a></li> <li><a href="#">Халва из ядрышек урюка</a></li> <li><a href="#">Лагман по-хорезмски</a></li> </ul> </li> <li><a href="#">Итальянская кухня</a> <ul> <li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li> <li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li> <li><a href="#">Кролик по-лигурийски с красным вином</a></li> <li><a href="#">Миндальные бискотти с медом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; width: 200px; height: 75px; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; position: relative; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }.menu > li:hover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: inset 0 0 10px #777; -moz-box-shadow: inset 0 0 10px #777; box-shadow: inset 0 0 10px #777; }Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его? Я это говорю, потому что вижу, что выделяет тень (при наведении на блок). С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список. Как объяснить такое двойное поведение?
-
http://jsfiddle.net/Launder/38femeh7/2/ <ul class="menu"> <li><a href="#">Русская кухня</a> <ul> <li><a href="#">Филе рябчика фаршированное в сухарях </a></li> <li><a href="#">Заливной пирог с картофелем и белыми грибами</a></li> <li><a href="#">Щи суточные с расстегайчиками</a></li> </ul> </li> <li><a href="#">Украинская кухня</a> <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li> </ul> </li> <li><a href="#">Немецкая кухня</a> <ul> <li><a href="#">Гусь по-берлински</a></li> <li><a href="#">Пирог яблочный с грецкими орехами</a></li> <li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }Почему когда ставишь .menu a {display: block}, а, как блочный элемент, с не заданной шириной, не растягивает li, который является inline-блоком и, по-идее, его размеры должны определяться размерами внутренних элементов?
-
Интересно, что НИЧЕГО не меняя в исходном коде, приведённого в первом посте, кроме изменения межстрочного расстояния для label, можно добиться, как раз, выравнивания текста по форме. http://jsfiddle.net/ugvt8zu5/1/ (добавлено ещё свойство border-box) Для этого нужно просто уменьшеть line-height. Если же мы увеличиваем межстрочное расстояние, то расстояние между формами не увеличивается, а достигая какой-то критичной точки, просто съезжает. Если же уменьшать межстрочное расстояние, то текст движется вверх и вверх, а при значении нуль, форма просто наезжает на текст. В первом приближении, думаю что дело в том, что расстояние между формами определяется отступами блока p (поэтому оно и не зависит от межстрочного расстояния label, которое свойством float выведено из общего потока). А высота текста относительно форм, связана с тем, что хоть float-элемент и принимает значение dislpay-block, всё же текст отображается от базовой линии, которая тем выше, чем межстрочное расстояние меньше. Соответственно, она, видимо, отсчитывается от некоей воображаемой базовой линии предыдущей строки, которая должна быть либо чуть выше границы блока, либо совпадать с ней. Соответственно величина line-height, это расстояние между ней и местом где проходит базовая линия текущего текста (так я понял). При увеличение же межстрочного расстояния до критического, нижнему label "кажется" что на него наедут, и плавающий элемент как бы сдвигает его влево на расстояние равное его ширине. Если дальше увеличивать межстрочное расстояние, то три label выстроившись по диагонали спускаются вниз. При этом формы также выстроившись по диагонали остаются на месте. Получается плавающий элемент живёт как бы двойной жизнью: с одной стороны он с лёгкостью выходит за границы блока, в котором лежит, а с другой, межстрочное расстояние между самими плавающими элементами определяется не свойствами line-height, а расстояниями между теми блоками, в котрых находятся плавающие элементы. Интересное поведение... UPD: когда размер line-height, лежащего в плавающем элементе, больше размера "его" родительского блока он просто сдвигает нижний плавающий элемента вправо, как он и должен делать. А почему он спокойно уходить вниз, при большом размере своего line-height, при этом родитель его практически не замечает - потому что плавающий элемент вырван из потока, и для блоков практически прозрачен, но влияет на строчное содержимое блоков. Но флоаты "видят" друг друга, поэтому и происходит их сдвиг. А дальше они уже двигают строчное содержимое "своих" блоков. http://habrahabr.ru/post/136622/ Вот не плохая статья на тему, где отмечены некоторые интересные особенности плавающих элементов.
-
Почему же строчный элемент при прочих равных занимает больше места? Это как-то связанно с базовой линией текста?
-
Jack_V, так это в самом первом моём посте код и приведён.
-
Оказывается межстрочное расстояние увеличилось после того, как я убрал свойство float - почему?
-
Одно время вообще не работал, а последние несколько дней при попытке открытия любого раздела пишет: Кстати, а почему тема во флейме? Вроде же сайт имеет прямое отношение к этому форуму.
-
В общем, по сути, нужно было к Вашему первому примеру добавить правый отступ (margin) для надписи перед формой и немного выровнять размер контейнера и можно использовать свойство flex-end.
-
Именно межстрочное расстояние почему-то увеличивается. То есть между блоками <P>. И оно увеличивается после того, как преобразовал label в inline-block. Ощущение что есть некий отступ по умолчанию (для блоков P он и должен быть), а когда внутри форма label, то он его как бы уменьшает. Что особенно странно, поскольку подпись справо перед формой - текст. В общем непонятно за счёт чего идёт это увеличение межстрочного расстояния.
-
Я как раз по этому поводу тему открывал: http://htmlforum.ru/index.php?showtopic=53005
-
Спасибо Вам огромное! Ну пару вопросиков всё-таки есть. 1. Почему после преобразования в inline-block пришлось уменьшить межстрочное расстояние? 2. Можно ли было сделать аналогичную вёрстку с помощью указанного модуля flexbox? P.S. Что с сайтом webref.ru не в курсе?
-
По правому краю самого себя: чтоб все формы в линейку, а текст как бы к ним прижимался, с небольшим отступом. Вот, пожалуй, как-то так: http://jsfiddle.net/Launder/ttxpzujv/ label { margin-right: 5px; width: 50px; line-height: 23px; }label, input { display: inline-block; text-align: right; }#Name, #Mail, #type { box-sizing: border-box; width: 250px; box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); color: #6d6d37; padding: 1px; padding-left: 10px; }
-
Если честно, всё равно, не совсем понятно, как сделать, чтоб сам текст был выровнен по правому краю. Ставлю justify-content: flex-end, но в этом случае, текст прижимается к форме. Можно, конечно, проблелами это исправить, но это, в целом, как-то криво. Можно как-то это с помощью только CSS реализовать? Да, здорово, что в flex-блоках matgin: auto работает для вертикального выравнивания.
-
Шикарный вариант Вы привели! Просто и красиво.
-
http://html5.by/blog/flexbox/ вот это мне понравилось.
-
Что-то я курю про flexbox и не вижу чтоб она была такая уж простая. Идея-то простая и интуитивно-логичная но вот свойств у неё чуть менее, чем до фига, и, честно говоря, не вижу, где бы это достаточно подробно и наглядно изложили. Если есть ссылочки где это объясняется исчерпывающе, и с хорошей визуальной иллюстрацией, буду рад... Заранее спасибо.
-
Обалденно! Спасибо большое! Сейчас поразбираюсь.
-
Ну, пожалуй, можно и так... Спасибо! Я правильно понимаю, что Вы убрали float, убрали text-align, как уже не нужный, и просто сделали пару пробелов в html, для выравнивания? А можно ли как-то сделать так, чтоб было как изначально, но только текст чуть повыше? То есть, формы будут выравнены по левому краю, а текст, соответственно по правому? И ещё, почему width: 250px; для всех трёх форм, последняя уже? Как можно сделать одинаковой ширины?
-
http://jsfiddle.net/Launder/1tahrusy/ <div class="feedback"> <p> Вы можете воспользоваться данной формой, для того, чтоб отправить нам сообщение. Мы будем рады почитать содержательный отзыв и надеемся на плодотворное сотрудничество! </p> <form action="#" method="post"> <p> <label for="Name">Имя:</label> <input type="name" name="autor" id="Name"> </p> <p> <label for="Mail">Email:</label> <input type="email" name="autormail" id="Mail"> </p> <p> <label for="type">Вид:</label> <select name="sort" form="mail" id="type"> <option value="general">общие вопросы</option> <option value="tech">технические вопросы</option> </select> </p> <p><b>Введите Ваше сообщение:</b></p> <p> <textarea class="announcement" name="comment"> </textarea> </p> <p><input type="submit" value="Отправить"></p> </form> </div>label { margin-right: 5px; width: 50px; text-align: right; float: left; line-height: 28px; }#Name, #Mail, #type { width: 250px; box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); color: #6d6d37; padding: 1px; padding-left: 10px; }Как сделать выравнивание label? Иными словами, надписи перед тремя верхними формами, сдвинуть чуть-чуть вверх?
