FRUTALITY
Пользователь-
Публикации
32 -
Зарегистрирован
-
Посещение
Репутация
1 ОбычнаяО FRUTALITY
-
Звание
Участник
Контактная информация
-
ICQ
0
-
Инверсия цвета части текста (в зависимости от фона)
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Вопрос снимается, совершенно случайно увидел решение в соседней теме, спасибо форумчанам. -
Доброго времени суток. Пытаюсь добиться эффекта, как на изображении Картинка взята с поста на Хабре, там реализация меню с плавным переходом от одного пункта к другому. Мне нужно нечто попроще: есть блок фискированной ширины (назову "родитель"), внутри него еще один блок (ширина любая, не превышающая родительскую — "потомок"). Внутри текст. Та часть текста, что не выходит за границы потомка - одним цветом. А та часть, что выходит - должна быть другим цветом. Как можно добиться этого эффекта? JS можно использовать. Получается что-то вроде прогресс-бара с надписью внутри.
-
Chrome и проблема сохранения пароля
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Не нашел более подходящего раздела. И все-таки проблема с формой, проблема в конкретном браузере. Если что не так, извините и подскажите куда лучше перепостить. -
Добрый день. Обнаружил странную багу. На сайте есть форма входа, там два input'а, у одного name="login", у другого name="password". Браузеры, естественно, предлагают сохранить логин и пароль. Тут все ок, при последующих заходах они корректно вставляются в форму (во всех браузерах). Для авторизованного пользователя есть страница с настройками, где он может указать дату рождения, сменить пароль и т.д. Хром включает здесь автозаполнение. Он заполняет input[name=password] запомненным паролем и поле input[name=birthday] логином. WTF? Все остальные браузеры на этой странице автозаполняют только поле password, дату рождения не трогают. Есть какой-нибудь способ указать браузеру, что на этой странице вообще не нужно автозаполнение? Или для каждого конкретного поля.
-
Сочетание фиксированных и резиновых блоков
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Switch74, благодарю. Как-то про таблицы я не подумал. Сделал пример с display:table. Если верить htmlbook, то это как раз относительно кроссбраузерный способ. -
Сочетание фиксированных и резиновых блоков
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
wwt, это не то, что мне нужно, если я все правильно понял. Вот, накидал примерчик по вашему совету: http://cssdesk.com/R3uf8 Получается, если контента становится много в крайнем правом блоке, то, естественно, он просто переносится на следующую строку. А задача — уменьшить ширину первого "резинового" блока. -
Добрый день. Возникла задачка, решение которой мне никак в голову не приходит. Точнее, я вижу решение с применением JS, но если можно сверстать без этого, то подскажите, как. На схеме ниже указано, что нужно сверстать. Фиксированная ширина контейнера, в нем в одну строку располагаются несколько inline-block элементов. В данном случае, два элемента имеют фиксированную ширину, а два других — должны подстраиваться в зависимости от контента внутри. Блок "2" содержит в себе контент разной ширины. По задумке, если контента в нем много, то блок "1" должен сужаться. Конечно, он не должен "схлопываться" (тут, я полагаю, достаточно выставить min-width), но главная проблема в том, что в сумме эти 4 блока всегда должны давать фиксированное значение по ширине. Накидал пример: cssdesk.com. Можно что-нибудь сделать тут? Сохранив относительную кроссбраузерность (IE8+, да несколько свежих версий остальных браузеров).
-
Горизонтальное выравнивание блочных элементов
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
SelenIT прав, я про Grid Layout.- 14 ответов
-
- grid
- inline-block
-
(и ещё 2)
Теги:
-
Горизонтальное выравнивание блочных элементов
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Да, Flexbox тоже классная штука. Напоминает Grid, которую пропихивает MS. Жаль, что пока ни то, ни другое, не поддерживается всеми браузерами. npofopr, извините, если этой темой ввел вас в заблуждение. Не искал решение сиюминутной проблемы; искал "серебряную пулю", так сказать. Впрочем, насчет "для каждой задачи свое решение" — это вы очень правильно сказали. Не могу не согласиться. P.S. SelenIT, почитал у вас в блоге статью про inline-block, пару новых моментов для себя узнал. Спасибо А флексбоксов / сетку ждут многие, как я посмотрю?- 14 ответов
-
- grid
- inline-block
-
(и ещё 2)
Теги:
-
Горизонтальное выравнивание блочных элементов
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Ну, я, конечно, именно такой пример привел. Очень простой. Но реальность состоит из сложных макетов. И я постоянно нахожусь в поисках идеала не для решения задачек в 10 строк, разумеется Возьмем, к примеру, макет профиля во "ВКонтакте". Специально не смотрю, как он сверстан. Но просто присмотритесь: хэдер состоит из рядом стоящих элементов. Далее - три колонки (меню, колонка с фотографией, колонка с контентом). В каждой колонке (кроме меню) снова элементы, расположенные рядом по горизонтали. По сути, весь макет ими пронизан. И они вложены друг в друга. Вложенность многоуровневая. Мне почему-то не кажется, что макет такой сложности довольно удобно будет верстать с помощью display:table. А особенно поддерживать, добавляя/убирая элементы (или вообще перекомпоновывая). Впрочем, пока у меня это лишь на уровне ощущений. Таких сложных макетов на display:table я не верстал. За ссылки благодарю. Ознакомлюсь.- 14 ответов
-
- grid
- inline-block
-
(и ещё 2)
Теги:
-
Горизонтальное выравнивание блочных элементов
FRUTALITY ответил в вопрос пользователя FRUTALITY в Проблемы верстки
Добавил вариант display:table в опрос. Действительно, этот момент я как-то упустил. Потому что практически не использовал этот вариант. Насколько я понимаю, суть тут, в отличие от таблиц, в принципе не меняется. Представляем макет в виде таблицы (а сложный макет - в виде огромной таблицы с вложенными таблицами), разметку делаем div'ами, но в CSS отмечаем, по сути, все то же самое, что мы бы отметили тегами table, tr, td (и т.д.). Чуть проще, но разве в поддержке не сложно? Про флексбоксы слышал совсем краем уха. Спасибо за напоминание, почитаю на свежую голову завтра (сейчас у нас уже ночь). Но судя по вашему описанию, тоже не подарок. Тут вы правы, я упростил Zverushka, вы не могли бы привести пример? Для макета из моего первого поста. Кажется, или я вас не так понял, или вы меня.- 14 ответов
-
- grid
- inline-block
-
(и ещё 2)
Теги:
-
Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 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/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.
- 14 ответов
-
- 1
-
- grid
- inline-block
-
(и ещё 2)
Теги:
-
FRUTALITY подписался на Горизонтальное выравнивание блочных элементов
-
Почему не рекомендуется использовать идентификаторы?
FRUTALITY ответил в вопрос пользователя FRUTALITY в Для начинающих
О чем я и говорю. Если я точно знаю, что элемент на странице будет один, я использую 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-файлов) Эта комбинация методов меня еще ни разу не подводила.