Комментарии 80
В опере есть горизонтальная прокрутка справа.
Притом, что вёрстка таки режется: lh4.ggpht.com/_1_TkZrguBPE/TMXAcZaVbWI/AAAAAAAAAVo/JaVIzpn1IgM/s512/tmp.1JpKpfRtuN.png
аналогично. опера 11, кубунту 10.04 х86_64
Проблему с оперой ршить не могу. Кто поможет, буду рад.
#corper {
min-width: 680px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
min-width: 680px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
Логика простая. Нужен родительский блок для всей конструкции, у которого будет position:relative; overflow:hidden; width:100%;
В вашем первом примере нужно только добавить к #corper{ position: relative; width: 100%; } — скролл исчезнет.
В вашем первом примере нужно только добавить к #corper{ position: relative; width: 100%; } — скролл исчезнет.
А зачем разные уши (лефт, райт)?
делаем div, например #header, шириной в 100%, там делается нужный фон, а внутрь вкладываем, например div с классом .content с «margin: auto auto;» в свойствах CSS.
ну и doctype xhtml-евский, чтобы IE нормально понимал, что нужно отцентровать. и всё.
что-то подобное, если есть желаение, можете посмотреть у меня на сайтах (урлы в профиле, сюда не скидываю в целях сохранения [censored])
делаем div, например #header, шириной в 100%, там делается нужный фон, а внутрь вкладываем, например div с классом .content с «margin: auto auto;» в свойствах CSS.
ну и doctype xhtml-евский, чтобы IE нормально понимал, что нужно отцентровать. и всё.
что-то подобное, если есть желаение, можете посмотреть у меня на сайтах (урлы в профиле, сюда не скидываю в целях сохранения [censored])
[offtopic]и чтоб ты изошел поносом, упырь влепивший минуса в карму и ничего не ответевший на коммент[/offtopic]
Успокойтесь Вы, не в карме счастье. У меня тут был акк с сотней оной и что? Сейчас хочу получить плашку тролля адекватными комментариями, этакий челлендж.
а я хочу сейчас пост интересный запостить, посему нужно в 5+ точно быть :)
— Ты с ума сошел?! А в чем же еще?! (С)
О, это легко! Просто заходите в топики, где линуксоиды рассказывают о том, как им сухо и комфортно и давайте ссылки на эксплоиты для ядра, что регулярно вылазят. А потом добивайте их статьями на тему, что в исходниках некоторые ошибки не найти, ибо виноват компилятор, который по разному обрабатывает один и тот же код, но по-разному написанный.
И будет у вас карма улетать в самое дно как у меня — со скоростью света. Главное фактов приводить по-больше и красноглазикам тогда голову просто напрочь сносит.
Вот смотрите, сейчас опять у меня карма упадёт и текст прозрачным станет.
И будет у вас карма улетать в самое дно как у меня — со скоростью света. Главное фактов приводить по-больше и красноглазикам тогда голову просто напрочь сносит.
Вот смотрите, сейчас опять у меня карма упадёт и текст прозрачным станет.
а вы Чаку пожалуйтесь — думаю он найдет и исправит того минусятора.
Предлагаю всем поставить в карму этому товарищу по плюсу.
mcdb, не знаю кто тебе в карму так сказать «плюнул», но я поставил тебе плюс. Не обижайся на людей.
Добрее надо быть, добрее.
mcdb, не знаю кто тебе в карму так сказать «плюнул», но я поставил тебе плюс. Не обижайся на людей.
Добрее надо быть, добрее.
Просто doctype достаточно, xhtml тут не причём
Остальное верно, кстати. У автора же бред какой-то
А в чём смысл?
Отсутствие горизонтальной прокрутки при размере окна меньше 980px
IE 8.0 / Chrome 8.0 dev (Win 7)
IE 8.0 / Chrome 8.0 dev (Win 7)
Плохо получилось. Поторопился.
Надо подумать. На счёт иправления.
Надо подумать. На счёт иправления.
Не проще ли сделать одну картинку фоном на тег <BODY>? Тогда фон удобнее будет заменять, как, например, сделано на многих киносайтах.
Я имел ввиду когда ещё есть фон повторяющийся из небольшой картинки например. Тут факт в том что получается экономия, у нас две небольшие картинки на «уши» и одна на повторяющийся фон.
А в случае с одной большой она по сути получиться больше по размеру (в килобайтах).
А в случае с одной большой она по сути получиться больше по размеру (в килобайтах).
Тогда, если следовать такой логике, «уши» совсем не нужны, достаточно иметь внешний слой-обёртку (в данном случае #corp). Нужную картинку повесить ему на бэкграунд. Одна полупрозрачная картинка будет весить меньше, чем две полупрозрачных.
При желании можно псевдоэлементы ::before / ::after использовать, вместо ненужных div'ов.
Не всегда счастье только в килобайтах, есть еще
1. Количество запросов.
2. Размер заголовков запросов.
Заголовки, допустим, можно померять, а вот со скорость установки нового соединения как повезет… Мое имхо: лучше +2-5 КБ, чем лишний запрос.
1. Количество запросов.
2. Размер заголовков запросов.
Заголовки, допустим, можно померять, а вот со скорость установки нового соединения как повезет… Мое имхо: лучше +2-5 КБ, чем лишний запрос.
Лирическое отступление:
Сейчас на работе разрабытываем очередную версию модуля для CMS, руки несколько связаны: никаких CDN, никакой свободы с настройкой дополнительных субдоменов. Когда я увидел около 90 запросов к статическим ресурсам, в каждом из которых отправляется около 2 КБ печенья, я рыдал. Это количество удалось снизить до 30, но все-равно, присутствует некая неудовлетворенность…
Сейчас на работе разрабытываем очередную версию модуля для CMS, руки несколько связаны: никаких CDN, никакой свободы с настройкой дополнительных субдоменов. Когда я увидел около 90 запросов к статическим ресурсам, в каждом из которых отправляется около 2 КБ печенья, я рыдал. Это количество удалось снизить до 30, но все-равно, присутствует некая неудовлетворенность…
не всегда это подойдёт.
например самый простой случай, когда фон всегда должен быть по бокам, а сам сайт растягивающийся.
например самый простой случай, когда фон всегда должен быть по бокам, а сам сайт растягивающийся.
Я всего лишь начинающий, и, возможно, сейчас фигню скажу, но не легче замостить по фону одну повторяющуюся картинку, а основной контент выровнять по центру? Просто то что вы предлагается выглядит как костыли.
Это не очень хорошо когда справа и слева видно по пол-уха. Как бы намекает: «Хреновый у тебя нетбук. Что, развернул на весь экран, а ухи полностью все равно не видно?»
Лучше их скрывать насовсем или убирать вниз/центр, как тут: goo.gl/86W7
Лучше их скрывать насовсем или убирать вниз/центр, как тут: goo.gl/86W7
В Опере выглядит криво — уши не убираются, скролл горизонтальный появляется
habreffect.ru/files/b6e/d5ce74be3/markup-bug.jpg
habreffect.ru/files/b6e/d5ce74be3/markup-bug.jpg
Как и пишут здесь люди, самым беспроблемным вариантом это помещение «ушей» фоновыми изображениями во вложенные блоки, сколько нужно, а уж в внутри этой «матрешки» поместить #content.
В принципе и предложеный вариант жизнеспособен, если побороть все особенности «одинакового» позиционирования в браузерах, но только в случае, если ушам нужно быть интерактивными. (Не представляю такого изврата, но по закону подлости завтра же подвернется)
В принципе и предложеный вариант жизнеспособен, если побороть все особенности «одинакового» позиционирования в браузерах, но только в случае, если ушам нужно быть интерактивными. (Не представляю такого изврата, но по закону подлости завтра же подвернется)
Просто интересно :) А почему warp и corp?
Коли уж так, то напрашиваются haed и cnotent :)
Коли уж так, то напрашиваются haed и cnotent :)
А что тут такого волшебного?? ) )
Всё обычно. Так, как и должно работать. Overflow, position: absolute…
Всё обычно. Так, как и должно работать. Overflow, position: absolute…
Непонятно, зачем. Проще использовать обертки и центрированный контент. А если «уши» со смыслом (баннеры) — то яваскриптом проверяем, лезут ли они в экран, и если лезут — то позиционируем абсолютно и показываем. Для баннерных систем, запрещающих прятать баннеры — показываем снизу, если по бокам не влезают.
Мда, супер конечно, я-то надеялся! Блок фиксированной ширины любой дурак отцентрирует, а вот попробуйте тоже сделать при условии того, что основной блок должен быть резиной, скажем, от 960px до 1300px. Вот это задача интересная (и насколько мне известно не имеющая решения).
Довольно странное решение несуществующей проблемы. Дело в том, что нужно идти от задачи и все случаи когда что-то должно быть за контентом нельзя косить под одну гребенку. В большинстве случаев подойдет и max-width и margin:0 auto для body и некий бэкграунд для html.
Да, поздравляю, вы открыли для себя overflow:hidden, и отрицательные значения свойств, но чего вы добились — непонятно.
А вот проблем в вашей верстке — масса. Начать с того, что когда окно браузера меньше 980px у нас нет горизонтальной прокрутки и совершенно непонятно, как мне смотреть этот сайт со своей нокии, у которой разрешение 640x480. И почему верстка не резиновая это тоже большой вопрос.
Да, поздравляю, вы открыли для себя overflow:hidden, и отрицательные значения свойств, но чего вы добились — непонятно.
А вот проблем в вашей верстке — масса. Начать с того, что когда окно браузера меньше 980px у нас нет горизонтальной прокрутки и совершенно непонятно, как мне смотреть этот сайт со своей нокии, у которой разрешение 640x480. И почему верстка не резиновая это тоже большой вопрос.
Обычно, такие уши представляют собой простой фон и причин, делать его как-либо иначе, кроме как, фоном у body или у какого-нибудь родительского контейнера я не вижу.
з.ы. lfet-head и rgiht-haed забыли =)
з.ы. lfet-head и rgiht-haed забыли =)
НЛО прилетело и опубликовало эту надпись здесь
1. Прекрасно прячется.
2. Javascript конечно можно использовать. Флаг в руки, используйте.
3. Он нужен для того что бы обрезать абсолютно позиционированные блоки («уши»), которые выходят за рамки экрана. Кстати по той же причине и остаётся полоса прокрутки у оперы, потому что опера думает что страница, шире, хотя на самом деле нет, потому что обрезана #corper'ом.
Скачайте пример, уберите #corper и посмотрите сами.
2. Javascript конечно можно использовать. Флаг в руки, используйте.
3. Он нужен для того что бы обрезать абсолютно позиционированные блоки («уши»), которые выходят за рамки экрана. Кстати по той же причине и остаётся полоса прокрутки у оперы, потому что опера думает что страница, шире, хотя на самом деле нет, потому что обрезана #corper'ом.
Скачайте пример, уберите #corper и посмотрите сами.
НЛО прилетело и опубликовало эту надпись здесь
В статье речь идет о том, что за край экрана без полосы прокрутки прячется та часть ушей, что не поместилась на экране. а не все уши.
Оно так и должно работать. Я не писал что ушидолжны пропасть, они аккуратно уходят за экран. Если подвигать размером окна браузера это будет заметно, причём они убираются так, что контент остаётся по середине.
И, внимание, для всех. Возможно я не правильно подобрал значения максимальной ширины и по этому на некоторых разрешениях выглядит некрасиво, но я показываю технологию, которою можно взять на вооружение если правильно применить, не не готовый к продаже продукт.
p.s. думайте своими мозгами…
И, внимание, для всех. Возможно я не правильно подобрал значения максимальной ширины и по этому на некоторых разрешениях выглядит некрасиво, но я показываю технологию, которою можно взять на вооружение если правильно применить, не не готовый к продаже продукт.
p.s. думайте своими мозгами…
НЛО прилетело и опубликовало эту надпись здесь
Я, хоть убейте, не понимаю почему не используется javascript при решении этой задачи.
После этого предложения я перестал читать ваш комментарий
Сегодня полдня ломал голову, как бы мне пустить широкие поля вокруг всего контента (исключая шапку и подвал — там всё просто), но чтобы они были видны только при разрешении больше 1024 по горизонтали. Этакий padding, но без горизонтальной прокрутки и без абсолютного позиционирования.
Вечером зашел на Хабр — уже почти обрадовался, что вот оно решение. А нет, не то.
С контентной частью делать через фоновый рисунок как-то не спортивно.
Вечером зашел на Хабр — уже почти обрадовался, что вот оно решение. А нет, не то.
С контентной частью делать через фоновый рисунок как-то не спортивно.
Исправьте, пожалуйста: «посредине» вместо «по середине». Режет глаз.
Нет никакой экономии, только лишняя картинка и лишний запрос и куча лишних блоков и кода. Рисуйте большую фоновую картинку с «ушами» и дыркой в центре с ширину контента (дырка — это один цвет для лучшей компрессии) и все, готово. Ширину «дырки» нужно сделать на пару пикселей меньше ширины контента, чтоб из-за погрешности в округлении не было заметно скача в 1px при ресайзе окна браузера.
Если на фоне лежит текстура — то просто надо ее нарисовать в фотошопе из центра макета (по дефолту паттерн множится из 0,0) и совместить потом с картинкой с ушами. Не нужно все ТАК усложнять как в вашем примере.
Если на фоне лежит текстура — то просто надо ее нарисовать в фотошопе из центра макета (по дефолту паттерн множится из 0,0) и совместить потом с картинкой с ушами. Не нужно все ТАК усложнять как в вашем примере.
Круто, спасибо! Не люблю верстку, но всегда приходится с ней возиться, полезная статья!
А возможно ли решить через фреймование при помощи clip?
Тоже пытался решить данную задачу для IE7. Так и не смог убрать горизонтальный скролл.
Задачу не решил, но провернул пару забав. Исходники тут:
pastie.org/1249167
pastie.org/1249165
— картинки все на «Хабрэффекте»
pastie.org/1249167
pastie.org/1249165
— картинки все на «Хабрэффекте»
Cделал так www.novopavlovsk.ru
А footer прижать к низу ;)?
месяц назад искал решение данного вопроса, в итоге забил на эти уши)
corper — croper
warp — wrap
warp — wrap
кроссбраузерности IE8+ — метка «не для практики».
вот решение для ие7 с подвалом прижатым книзу и контентом идущим первым
dl.dropbox.com/u/585674/test/index.html
dl.dropbox.com/u/585674/test/index.html
картинки отвалились :(
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Вёрстка c «Ушами»