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-файлов) Эта комбинация методов меня еще ни разу не подводила.

Доброго всем времени суток! В последнее время все чаще слышу (в основном, на Хабре), что оформлять элементы следует только с помощью классов, но никак не с помощью идентификаторов. Учился я основам верстки давно, во всех книжках тогда предлагалось верстать так: если одинаковых элементов более одного, то используем класс. Если один на страницу - id. В связи с чем такие изменения в сознании?

Хак, действительно, работает. Спасибо за подсказку. Но не хотелось бы на этом останавливаться - не люблю я "хаки". К тому же, на довольно большой странице, весь код которой приводить здесь нет смысла, у меня встречается несколько подобных форм с кнопкой, и IE прекрасно их показывает. А именно с этой что-то не так. Буду копать дальше, если разберусь - сообщу. Если у кого есть еще идеи - пишите, тему мониторю. Спасибо всем, кто отозвался. UPDATE: обнаружил нечто странное. Пока страница была на локальной машине, отображалось "криво" - как на скриншоте. Выгрузил в интернет - стало отображаться нормально. Я пока не знаю, почему это произошло, но факт остается фактом.

О как. Контейнер достаточной ширины. Я использую IE Developer Toolbar для проверки (это аналог Firebug). Если я правильно понял, у вас установлен IE8? Если не сложно, проверьте на локальном компьютере: <!doctype html> <html> <head> <title>Тест</title> <link href="/media/css/style.css" rel="stylesheet"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <form action='/search' method='GET'> <input type='text' name='search_user' placeholder='Поиск по имени и фамилии' /> <div class='inline-button width100 center' id='start-search-button'>Поиск</div> </form> </body> </html> CSS можно брать с jsfiddle.

Да без проблем, ссылки выше дали; просто работает градиент на CSS еще не везде.

Все очень просто. Кнопка - скажем, div. В css нужно прописать background-image, дав ссылку на картинку-градиент. Картинка может быть шириной 1 пиксель и высотой, равной высоте кнопки. Используйте атрибут repeat-x.

Доброго времени суток. Задача: около input'а нарисовать свою кнопку. Кнопка должна находиться справа от input'а. Решение очень простое - http://jsfiddle.net/kZN3r/ Однако, в IE8 кнопка сползает под input. Что странно, так это тот факт, что на странице, которую я верстаю, используется такая структура много раз. И там все отображается как надо. Я подумал, что дело может быть в родительском/соседних элементах, но пример по ссылке на jsfiddle - проще некуда, и в прогрессивных браузерах отображается как надо. Проверял код на validator.w3.org - все валидно. В чем проблема?

Great Rash, спасибо за идейку с letter-spacing. Осталось потестить на разных браузерах Gaspode, psywalker, вам тоже спасибо большое. Тему можно считать закрытой

Ну, допустим, про то, что float:left автоматически подразумевает блочность элемента, не знал. Спасибо, что просвятили. Но проблема не в этом, что вы так к этому прицепились. Спасибо Gaspode и Great Rash, что объяснили, почему inline-block ведет себя так, а не иначе. Это многое объясняет upd: psywalker, то, что ИЕ не понимает inline-block, имхо, не является проблемой. Мой 8 ИЕ понимал, 9, соответственно, тоже понимает. А старье меня в данном контексте не интересует, но это уже оффтоп.

Gaspode, это, конечно, ответ, достойный Капитана Очевидность. Я прекрасно понимаю, что расстояние только при использовании inline-block. При использовании обычного block, этого расстояния нет, но для выстраивания div'ов в ряд приходится юзать float. Неужели inline-block по стандарту подразумевает некое расстояние между блоками? Звучит как то глупо. psywalker, простите, что именно бред? Использование этой связки прекрасно решает проблему. div'ы становятся рядом (в строку), расстояние между ними пропадает. Но мне не нравится этот способ из-за использования float, да и вопрос у меня скорее познавательный, почему происходит так, а не иначе. А ИЕ тут вообще не причем - я проверяю сейчас в Firefox 4.0.1. upd. Попробовал сделать так, как посоветовал Gaspode - помогло. Но почему? >.< Изменилось только то, что новый div начинается в исходном коде на той же строке. Какая разница браузеру, с какой строки начинается код?Он же должен сами теги и стили интерпретировать. Или я чего-то не понимаю.

Доброго времени суток. Простейший блок на странице ввел меня в замешательство. <style type='text/css'> section{ display:block; } #container{ margin:0 auto; width:900px; } #divsection div{ display:inline-block; /*float:left;*/ width:150px; border:1px solid black; margin:0; } </style> <section id='container'> <section id='divsection'> <div id='active-tab'><a href=''>Пункт 1</a></div> <div><a href=''>Пункт 2</a></div> <div><a href=''>Пункт 3</a></div> <div><a href=''>Пункт 4</a></div> </section> <section id='undermenu'> Атата </section> </section> Появляется "пустое" место между div'ами с "Пунктами 1-4". Я знаю, как это можно обойти (display:block + float:left), но хочется знать, почему возникает расстояние между блоками?