SelenIT
-
Posts
4,327 -
Joined
-
Last visited
-
Days Won
140
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SelenIT
-
Когда значок валидности вешается на свалку заголовков, не являющихся заголовками — это ни разу не по делу, это издевательство над спецификацией и здравым смыслом.
-
От всего сердца присоединяюсь ко всему вышесказанному!
-
Если #content фиксированный, то, имхо, проще всего задать #pre-content'у min-height: 100% и фоновую картинку, имитирующую фон #content-а. А сам #content пусть принимает высоту по содержимому. Кстати, в синих полосках будет какой-то контент (кнопки, баннеры...) или там чисто декоративные элементы? Если второе — имхо, #pre-content как отдельная прослойка вообще не нужен. Да и баннеры можно спокойно засунуть в #content, а потом высунуть наружу отрицательными маргинами...
-
Поменять border-bottom last-child'а на border-top first-child'а нельзя? Тот, насколько я в курсе, и в IE7 работает нативно...
-
Ширина #content резиновая или нет?
-
Еще минус — фоновые картинки, в отличие от img, по умолчанию не печатаются. Но есть вариант вставки картинок с помощью стилей, свободный от этого недостатка (только в IE7- не работает без выкрутасов). Впрочем, если лого (или, как минимум, его главная часть) чисто текстовое и может без перенапряжения быть воспроизведено стандартными/внедряемыми шрифтами — то, сугубо имхо, текстом его и надо делать...
-
«Любые значения, кроме ’none’ (т.е. left/right/both — прим. моё) могут приводить к введению „просвета“ (clearance). „Просвет“ запрещает схлопывание margin-ов и работает как пространство над верхним margin-ом элемента. Он используется для „отпихивания“ элемента вниз по вертикали, под „поплавок“» И чуть ниже в спеке разными словами три раза сказано примерно одно и то же: если верхний margin блока с clear больше, чем выступающая вниз из предыдущего блока нижняя часть «поплавка», то этот margin и работает, если же нет, то к нему добавляется clearance, чтобы итоговый отступ блока с clear от его верхнего соседа по потоку стал в точности равен высоте этой торчащей части «поплавка».
-
Ознакомьтесь пожалуйста здесь: http://htmlbook.ru/css/float Справочник — вещь хорошая, но исчерпывающее описание лучше искать не в нем, а в спецификации. С ней тоже полезно хотя бы ознакомиться . Например, для контекста форматирования блоков (наш случай) там сказано следующее:
-
Советую начинать с этого сайта: http://phpfaq.ru/ (он небольшой, можно выучить наизусть, и все традиционные для новичков грабли там разобраны по атомам).
-
Кстати, работает — если есть от чего рассчитывать и пока размер картинки меньше реального. Последнюю проблему в IE и Хроме до некоторой степени решает добавление к картинке zoom: <!DOCTYPE html> <meta charset="utf-8"> <title>Пример</title> <style> * { margin:0; padding:0; } html, body { height:100%; } #img { display: block; max-width: 100%; max-height: 100%; zoom: 5; } </style> <img id="img" src="http://silverflame.at.tut.by/img/per_aspera.jpg"> Размер картинки оказывается "как бы с запасом", и при разумных допущениях она ведет себя почти как надо (в IE при некоторых размерах окна появляется скроллинг из-за ошибок округления). Но вот в FF и Опере (через -нечто-transform:scale(5)) так не получилось — судя по всему, трансформация применяется после -max-нечто, а не до, как zoom. Как вариант, можно использовать финт с max-размерами и zoom для старых IE (вместо скрипта) в моем предыдущем примере. Но со скриптом результат красивее
-
Вот так вроде получилось: <!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>Пример</title> <style> * { margin:0; padding:0; } html, body { height:100%; } #img { display: block; } @media screen and (max-aspect-ratio: 4/3) { #img { width: 100%; } } @media screen and (min-aspect-ratio: 4/3) { #img { height: 100%; } } </style> <!--[if lte IE 8]> <script> onload = onresize = function() { var i = document.getElementById('img'); i.style.width = document.body.clientHeight/document.body.clientWidth < .75 ? 'auto' : '100%'; i.style.height = document.body.clientHeight/document.body.clientWidth < .75 ? '100%' : 'auto'; } </script> <![endif]--> </head> <body> <img id="img" src="http://silverflame.at.tut.by/img/per_aspera.jpg"> </body></html> Эх, жалко, в IE8 media queries еще не работают, а экспрешны — уже...
-
Левая колонка цепляется за выступ "Календаря" из предшествующего блока .pages. Поставьте этому блоку overflow:hidden или clearfix (в общем, сделайте что-нибудь, чтобы вернуть в поток календарь и его соседей), и эта проблема решится.
-
Да, для таких кнопок однозначно инлайн (или инлайн-блок) лучше. "Поплавки" ведут себя как блоки в том, что касается бордеров-паддингов, переносов строк внутри, игнорирования соседних пробелов в коде и т.п. Но ширина их при этом определяется по содержимому, и они стремятся "всплыть" (коснуться своим верхним краем верхней границы контейнера), выстраиваясь рядом друг с другом по горизонтали, пока для этого хватает места. Поэтому их и используют чаще всего для выстраивания колонок в ряд. Инлайн-блоки тоже ужимаются по содержимому, зато пробелы между ними учитываются. Но у них есть и плюсы — они не выпадают из потока, поэтому для них не нужны выкрутасы типа clearfix-а для контейнера. И у них больше возможностей для вертикального выравнивания.
-
htmlbr, а можно хоть примерную картинку, что это за элементы и в каком они контексте? Просто у каждого способа выравнивания — свои плюсы и минусы, вне контекста трудно решить, что оптимальнее.
-
Т.е. картинка должна всегда вплотную вписываться в окно браузера по одному измерению и оставлять запас по оставшемуся? Тогда единственное, что приходит на ум сходу — засунуть картинку во флеш, а флешке задать размеры 100%?100% и scale="showall"... иначе разве что скриптами. Можно, конечно, поколдовать через media queries (напр., при aspect-ratio в одних пределах задавать картинке только width:100%, а за этими пределами — только height:100%), но старые IEшки пролетают...
-
Инлайны (и инлайн-блоки) выравниваются через text-align предка (как слова текста). Если надо выровнять по разным краям, чуть сложнее, но тоже решаемо (хотя для всего двух элементов, пожалуй, float уместнее).
-
Да, мешает. Плавающий блок автоматически становится блочным. Указание display:inline для плавающих элементов повелось с давних времен как лекарство от старого бага IE6 (удвоения margin-ов крайних элементов) и прижилось именно благодаря своей безопасности, т.к. в норм. браузерах inline при float игнорируется полностью.
-
Как вариант, <button type="button">...</button>. По стандарту <button> дефолтно имеет type="submit" (только в старых IE было иначе).
-
HTML5 CSS Таблица. Расстояние между ячейками
SelenIT replied to Samenfaden's question in HTML Coding
Вот же (а старые ишаки — в историю). Хотя, если через разрывы не должен просвечивать хитрый фон, то можно и так (и в старых ишаках в том числе)... -
Ближе к сабжу, у этого же маньяка меня впечатлила вот такая новогодняя ёлочка в 1 кб (включая графику, без фреймворков!). Правда, у меня притормаживает, бяка. И это действительно долго и муторно . Но зато!..
-
min-height контентному блоку?
-
А этот "Up and running", случаем, не печатная версия онлайнового "Dive into..."? Если так (а по содержанию более чем похоже), то перевод второго есть и поближе
-
Насколько я понимаю, задача стоит в том, чтобы сабмиттилка формы выглядела как обычная ссылка, но работала независимо от скрипта. Подход одобряю . Решения есть (вот, например, и еще, правда, больше для type="submit").
-
А я вот, наоборот, озадачился . Всё-таки больше всего похоже, что это баг Оперы. Сделал минимальный пример и послал им багрепорт, посмотрю, что ответят... Пожалуй, в реальной практике действительно проще ваять такие штуки старыми добрыми таблицами
-
Да, в Опере недосмотрел я (в FF, Хроме и даже IE7-9 было нормально). Путем выборочного убирания разных кусков выяснилось, что этой своенравной наследнице викингов не нравятся две вещи — padding-bottom у body (это я еще кое-как могу понять) и... vertical-align: bottom у .menu (казалось бы, причем тут это?). После убирания первого и замены второго на baseline вроде пофиксилось. Но так эта северная красавица давно меня не удивляла, версии, наверное, с 8-й...
