Как вы уже могли заметить, страницы моего блога некоторое время назад стали "резиновыми". Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью поиска наилучшего решения с вашей помощью, уважаемые читатели ...
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью ...
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Комментарии (25)
Конечно дело вкуса, но align="justify" всё портит.
p. s. лебедев и ко за такое сильно матерят и отрывают руки :)
Капец устал глазами центровать твой блог. Он раз 5 перескакивал то к правой стороне то к левой:)А почему ты не хочешь все это чудо запихнуть в таблицы с процентным разбиением. Резиновые таблицы и центруются сами и легче в управлении. Может я не прав, делаешь одну таблицу главную, делишь на 2 столбца, даешь 60% контент и 40% сайдбар. Границы таблицы делаешь невидимыми. Можно 70 и 30. И все, при открытии и сворачивании все отлично.
Мажор, таблицами при разметке не пользуюсь принципиально.
Блин, такую телегу набил, а коммент не прошел. Абыдна, да.
Если вкратце — есть два способа. Извращенный и мега-извращенный:-)
1. Dead centre тебе в помощь для начала: www.wpdfd.com/editorial/thebox/deadcentre4.html
Далее тебе надо будет написать скрипт, определяющий клиентскую ширину окна. Задать фиксированный марджин слева, приплюсовать к нему ширину сайдбара справа. Сумму вычесть из рассчитанной ширины окна. И уже ее использовать для позиционирования контентного блока (см. Dead Centre). Под аяксом и асп подобная задача решаема. Сам именно так и решал:-)
2. Контентный div должен иметь своим родителем окно бровзера. Для этого его надо объявить сразу за body с position: absolute; и задать справа и слева фиксированные отступы (div будет растягиваться и сжиматься динамически, сам видел!).
Мажор, способ простой, но, к сожалению, весьма ограниченный. Дело в том, что 60% (к примеру) от 1024 — это одно количество пикселей. А от 1680 (мое разрешение) — совсем другое. При изменении разрешения сайт визуально будет «худеть». Совсем плохо, если он должен быть на всю ширину окна. Начнет отлипать.
Когда-то мне очень понравилось решение:
www.alistapart.com/articles/switchymclayout
не совсем, может, то что нужно, но, может, сгодится
Dimox,
Дело хорошее, но, скажем, хорошо отравнять инпуты во всех инкарнациях с применением таблиц гораздо проще. Я, скажем, был сильно удивлен, когда в разметке www.artlebedev.ru/ обнаружил тег center. Но потом подумал-подумал, и пришел к выводу, что если это удобно и облегчает жизнь — вполне можно юзать. А к консорциуму мы начнем прислушиваться, когда он предложит простой и приятный способ отбивки дивов по центру:-)
Кстати. Подсвечивание рамки при ховере на контентном диве — это фича?
2sordes:
Неплохо бы пример такой реализации. На словах мне сложно понять.
Я и без таблиц, по-моему, неплохо с ними справляюсь.
Это
:hoverчерез CSS.Анатолий, пример интересный, конечно, но я бы не хотел привязывать динамичность страницы к скрипту.
2gordi:
Я его пробовал — результат тот же, что и сейчас с expression.
Спасибо! Попробую, посмотрим, что получится.
Не к тому блоку фон прицепил просто =) Не суть важно.
Стал пробовать — есть проблема. Заключается в том, что в результате создания этого margin отступ слева присутствует всегда, при любом разрешении. В моем же примере он постепенно исчезает, начиная с 1280×1024 и ниже.Т. е. предложенный тобой вариант при разрешении 1024×768 смотрится совсем уж некрасиво.
Я так полагаю, у меня этот отступ очень удачно исчезает, благодаря эмуляции минимальной ширины, тобой же однажды и предложенной. Имею в виду технику:
body {padding-left: 999px} #wrapper {margin-left: -999px}.Дима, попробуй эти размеры в процентах подобрать или сантимертрах.
Чтобы при смене разрешения происходила компенсация не большая.
Только я понять не могу — зачем…
Привычка верстать фиксированные блоки — это отличная привычка. Не зря все книги похожи одна на одну — потому что так удобнее
Сергей, я как раз в процентах и пробовал.
2ioni:
Чтобы выглядело красиво одновременно на разных разрешениях монитора.
Так, Дима.
Добавь к своим стилям такой expression
* html #wrapper {
width: expression (
(document.compatMode && document. compatMode == 'CSS1Compat')?
(document.documentElement.clientWidth 1300? «1300px»: «auto»)):
(document.body.clientWidth 1300? «1300px»: «auto»)));
}
Размеры нужные поставишь.
И туда же zoom:1;
Все должно работать, проверил :)
Хотя у меня монитор 17″, как на 19″ и более не знаю :)
Гонял на рзных разрешениях, все вроде получается, как тобой задумано.
Угловые скобки улетели :)
* html #wrapper {
width: expression (
(document.compatMode && document. compatMode == 'CSS1Compat')?
(document.documentElement.clientWidth <960 ? "960px" :
(document.documentElement.clientWidth> 1300? «1300px»: «auto»)):
(document.body.clientWidth > 960? «960px»:
(document.body.clientWidth < 1300? «1300px»: «auto»))); }
По моему лучше привычка резиновый диз, только потестить нужно на разных мониторах и видюхах)
Сергей«…резиновый диз…»
Вот когда при резиновом дизайне появится возможность пропорционально уменьшать/увеличивать размер шрифта автоматом, то проблема умрет сама по себе.
Если у вас страница оптимизирована к примеру под 1024*768 и 17″ с резиновой областью контента, то при просмотре/чтении текста при большем разрешении комфорта не будет, это совершенно точно :)
Размер шрифта уменьшится, строка станет длиннее.
Предложенное автором решение на мой взгляд имеет право на жизнь, так, как простым способом достигается ограничение размера макета, без использования скриптов.
Сергей, спасибо! Я думаю, что сейчас получился оптимальный вариант. Не хватало только
zoom:1, а твой последний вариант скрипта дает наилучший результат. Единственный артефакт, который остается — когда сужаю/расширяю окно, местами возникает горизонтальная прокрутка (у меня монитор 24″). По сути это не так уж и страшно, поскольку при стандартных разрешениях этой прокрутки нет.Спасибо! ;)
В общем, будем условно считать, что с задачей справились, а прокрутка в IE6 — это издержки недобраузера.
Всем спасибо! Тему можно считать закрытой =)
Вместо zoom:1; можно попробовать height:1%;
Но проблема спонтанного возникновения горизонтальной прокрутки в IE6 похоже не устранима :(
Что же касается твоей идеи, таким вот образом бороться с не контролируемой растяжкой области контента на всю, ширину окна браузера, считаю ее очень преспективной.
Решение без скриптов это большой плюс, в общем сижу и думаю, надо все это дело конкретно протестировать, и писать пост :)
Есть некоторые наметки, ты тоже не останавливайся на достигнутом :)
Dimox, лови:
<head>
<style>
body
{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<div style="position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;">
</body>
Сохрани код и посмотри полученную веб-страницу:-)
Решение кросс-браузерное, несмотря на то, что ie6 не понимает min-width.
Не работает все это в ie6,7.
Hello!
Уважаю всех товарищей, что умеют работать с кодом.