FRUTALITY

Вопрос снимается, совершенно случайно увидел решение в соседней теме, спасибо форумчанам.

Доброго времени суток. Пытаюсь добиться эффекта, как на изображении Картинка взята с поста на Хабре, там реализация меню с плавным переходом от одного пункта к другому. Мне нужно нечто попроще: есть блок фискированной ширины (назову "родитель"), внутри него еще один блок (ширина любая, не превышающая родительскую — "потомок"). Внутри текст. Та часть текста, что не выходит за границы потомка - одним цветом. А та часть, что выходит - должна быть другим цветом. Как можно добиться этого эффекта? JS можно использовать. Получается что-то вроде прогресс-бара с надписью внутри.

Не нашел более подходящего раздела. И все-таки проблема с формой, проблема в конкретном браузере. Если что не так, извините и подскажите куда лучше перепостить.

Добрый день. Обнаружил странную багу. На сайте есть форма входа, там два input'а, у одного name="login", у другого name="password". Браузеры, естественно, предлагают сохранить логин и пароль. Тут все ок, при последующих заходах они корректно вставляются в форму (во всех браузерах). Для авторизованного пользователя есть страница с настройками, где он может указать дату рождения, сменить пароль и т.д. Хром включает здесь автозаполнение. Он заполняет input[name=password] запомненным паролем и поле input[name=birthday] логином. WTF? Все остальные браузеры на этой странице автозаполняют только поле password, дату рождения не трогают. Есть какой-нибудь способ указать браузеру, что на этой странице вообще не нужно автозаполнение? Или для каждого конкретного поля.

Switch74, благодарю. Как-то про таблицы я не подумал. Сделал пример с display:table. Если верить htmlbook, то это как раз относительно кроссбраузерный способ.

wwt, это не то, что мне нужно, если я все правильно понял. Вот, накидал примерчик по вашему совету: http://cssdesk.com/R3uf8 Получается, если контента становится много в крайнем правом блоке, то, естественно, он просто переносится на следующую строку. А задача — уменьшить ширину первого "резинового" блока.

Добрый день. Возникла задачка, решение которой мне никак в голову не приходит. Точнее, я вижу решение с применением JS, но если можно сверстать без этого, то подскажите, как. На схеме ниже указано, что нужно сверстать. Фиксированная ширина контейнера, в нем в одну строку располагаются несколько inline-block элементов. В данном случае, два элемента имеют фиксированную ширину, а два других — должны подстраиваться в зависимости от контента внутри. Блок "2" содержит в себе контент разной ширины. По задумке, если контента в нем много, то блок "1" должен сужаться. Конечно, он не должен "схлопываться" (тут, я полагаю, достаточно выставить min-width), но главная проблема в том, что в сумме эти 4 блока всегда должны давать фиксированное значение по ширине. Накидал пример: cssdesk.com. Можно что-нибудь сделать тут? Сохранив относительную кроссбраузерность (IE8+, да несколько свежих версий остальных браузеров).

SelenIT прав, я про Grid Layout.

Да, Flexbox тоже классная штука. Напоминает Grid, которую пропихивает MS. Жаль, что пока ни то, ни другое, не поддерживается всеми браузерами. npofopr, извините, если этой темой ввел вас в заблуждение. Не искал решение сиюминутной проблемы; искал "серебряную пулю", так сказать. Впрочем, насчет "для каждой задачи свое решение" — это вы очень правильно сказали. Не могу не согласиться. P.S. SelenIT, почитал у вас в блоге статью про inline-block, пару новых моментов для себя узнал. Спасибо А флексбоксов / сетку ждут многие, как я посмотрю?

Ну, я, конечно, именно такой пример привел. Очень простой. Но реальность состоит из сложных макетов. И я постоянно нахожусь в поисках идеала не для решения задачек в 10 строк, разумеется Возьмем, к примеру, макет профиля во "ВКонтакте". Специально не смотрю, как он сверстан. Но просто присмотритесь: хэдер состоит из рядом стоящих элементов. Далее - три колонки (меню, колонка с фотографией, колонка с контентом). В каждой колонке (кроме меню) снова элементы, расположенные рядом по горизонтали. По сути, весь макет ими пронизан. И они вложены друг в друга. Вложенность многоуровневая. Мне почему-то не кажется, что макет такой сложности довольно удобно будет верстать с помощью display:table. А особенно поддерживать, добавляя/убирая элементы (или вообще перекомпоновывая). Впрочем, пока у меня это лишь на уровне ощущений. Таких сложных макетов на display:table я не верстал. За ссылки благодарю. Ознакомлюсь.

Добавил вариант display:table в опрос. Действительно, этот момент я как-то упустил. Потому что практически не использовал этот вариант. Насколько я понимаю, суть тут, в отличие от таблиц, в принципе не меняется. Представляем макет в виде таблицы (а сложный макет - в виде огромной таблицы с вложенными таблицами), разметку делаем div'ами, но в CSS отмечаем, по сути, все то же самое, что мы бы отметили тегами table, tr, td (и т.д.). Чуть проще, но разве в поддержке не сложно? Про флексбоксы слышал совсем краем уха. Спасибо за напоминание, почитаю на свежую голову завтра (сейчас у нас уже ночь). Но судя по вашему описанию, тоже не подарок. Тут вы правы, я упростил Zverushka, вы не могли бы привести пример? Для макета из моего первого поста. Кажется, или я вас не так понял, или вы меня.

Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 1. Старые добрые таблицы. Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно. 2. Способ классический. Использовать float: left/right. Код: <!doctype html> <html> <head> <title>Способ классический: float</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; float:left; text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Плюсы: кроссбраузерно. Минусы: если нужно вставить элемент ниже, то нужно применять clear:both. А когда макет действительно сложный, становится слишком много усложнений - конструкция превращается в монструозную. если высота элементов не фиксированная, то в достаточно типичных макетах случаются разные неприятности (http://habrahabr.ru/post/117109/ - 3 абзац) 3. "Все правильные ребята уже давно прочитали статью в блоге Мозиллы" (с) Сергей Чикуёнок. Речь о display: inline-block, конечно же. Способ почти идеальный. Если честно, я предпочитаю именно его, но тут есть свои заморочки. Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами. Перепишу стили для примера выше (разметку не трогаю): <!doctype html> <html> <head> <title>Способ правильный: inline-block</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ display:inline-block; /* Это добавили */ text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Взгляните на скриншот, что у нас получилось: (Я использую Firebug для подсветки элементов на странице) Обратите внимание на зеленые стрелки: первая указывает на зазор в 4 пикселя между inline-block-элементами. Вторая указывает на последствие - из-за этих зазоров уменьшилось расстояние до правой границы контейнера. А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась. Как с этим бороться: 1. Достаточно "вытянуть" в одну строку html-код элементов 1-3 (зазор пропадет) 2. Либо прописывать font-size:0 для контейнера и font-size:%ваше значение% для блоков 1-3 3. Либо использовать для блоков 1-3 margin-right: -0.3em 4. Либо еще какой-нибудь костыль (полный список в комментариях здесь: http://chikuyonok.ru...vertical-align/) 5. Либо "подгонять" margin-ы между элементами. Итак, плюсы: довольно изящное решение, все максимально понятно Минусы: без вытягивания кода или использования костылей отображается браузерами не так, как хотелось бы. 4. Абсолютное позиционирование. Вся соль в использовании position:absolute. Перепишу все тот же несчастный пример (разметку снова не трогаем, меняется только CSS): <!doctype html> <html> <head> <title>Способ pixel-perfect: position:absolute</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; position:relative; /* Добавили */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ position:absolute; /* Добавили */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ left:15px; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ left:130px; /* Добавили */ width:59px; } #block-3{ left:205px; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> На этот раз, изменений больше. Способ работает совсем идеально. С точностью до пикселя. Плюсы: получено именно то, чего хотелось, и без костылей. Минусы: без калькулятора не обойтись - на любое изменение одного блока нужно менять и все остальные. элементы страницы ведут себя так, будто абсолютно позиционированных элементов на странице нет, и это иногда не очень классно. 5. Способ прогрессивный. Верстка по настоящей сетке с использованием display:grid. Снова поменяю пример: <!doctype html> <html> <head> <title>Способ прогрессивный: display:grid</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; display:-ms-grid; /* Добавили */ -ms-grid-columns:15px 99px 16px 59px 16px 180px; /* Добавили */ padding:40px 0; /*position:relative; Убрали */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ /*position:absolute; Убрали */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ /*left:15px; Убрали */ -ms-grid-column:2; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ /*left:130px; Убрали */ -ms-grid-column:4; /* Добавили */ width:59px; } #block-3{ /*left:205px; Убрали */ -ms-grid-column:6; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Вот он, способ моей мечты. Подробно можно почитать на Хабре (http://habrahabr.ru/...ft/blog/140715/). Если вкратце: описываем контейнер как сетку. Каждому элементу назначаем место в этой сетке. И все классно. Но есть существенные минусы: в чистом виде, без префиксов, не работает вообще ни в одном браузере (это еще не стандарт, только черновик) с префиксами работает только в IE 10 и выше Пока что этот способ - в мечтах. Можно, конечно, использовать JS-библиотеки, реализующие поддержку Grid в браузерах (например, http://ecsstender.org/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.

О чем я и говорю. Если я точно знаю, что элемент на странице будет один, я использую id. Но ведь люди советую всегда использовать классы для оформления. Даже для одного элемента создавать класс и описывать цвет, шрифт, границы и т.д. Где-то на том же хабре промелькнул однажды комментарий, что классы, вроде, по производительности лучше (для браузера), но этот комментарий я найти не могу уже, а видел давно.

1. Сам файл нужно сохранять в кодировке UTF-8, об этом говорили. 2. Если это php-скрипт, в самом начале делайте так: header('Content-type: text/html; charset=utf-8'); (внимание! эта строка должна быть до любого вывода в браузер. Не должно быть пустых строк перед ней, пробелов и т.д.) 3. Если этого недостаточно, или вы просто показываете html-страничку, и ваш сервер работает на Apache (а это скорее всего так), то укажите в файле .htaccess следующую строку: AddType "text/html; charset=utf-8" .html (это для html-файлов) Эта комбинация методов меня еще ни разу не подводила.