В поисках идеала

[antyrat]

В закладки однозначно

[404]

на мониторе от 1600px - левые уголки отваливаются. Нужно либо ограничение по ширине ставить, либо что-то переделывать.

[Austinate]

Угу, та же ситуация :)

[GruZZ]

Просто ширина картинки - 1600px. Решил поставить max-width:1580px; и не заморачиваться с этим :)

[3hrek]

нехорошо. мониторы 1600 довольо распространены..
а так - отличная верстка!

[minixan]

1600 я редко сейчас вижу. в основном 1680х1050 берут. Фильмы на них удобнее смотреть )

[nicothin]

собственно, один очень известный в области юзабилити товарищ недавно писал про большие мониторы (активно их всем советовал) и в его статье раза два точно упоминалось, что на больших мониторах окно браузера довольно редко развернуто во весь экран.

в это есть, как минимум, доля истины: лично я, работая в разрешении 1280* крайне редко вижу всю ширину в 1280 пикс - 99% времени в моем FF слева открыта панель закладок (или другие информационные панели).
при верстке макетов я, чаще всего (читай - там, где это уместно), фиксирую ширину макета так, чтоб комфортно было просматривать сайт с разрешением 1024*.
да и пока жив шестой ишак с его отношением к max-width...

возможно, ограничивать горизонтальную картинку нужно 2000-ми пикс...

[Hitryi_Pryanik]

распространены, но веб смотреть неудобно. Проще увеличение делать сразу.

[3hrek]

Блин, о чем вы говорите? Хорошая верстка должна удовлетворять ЛЮБЫМ разрешениям! Разве не так?

[crwin]

нет конечно. может его ещё и на плазме смотреть будут, теперь что, дрочиться с размерами под кинотеатры?
стандартное расширение для интернета - 1024*768, постепенно оно растёт, хоть и крайне медленно

[3hrek]

А что разве трудно сделать верстку под разрешение кинотеатра? :)

Может быть вам сложно при верстке удовлетворить, скажем, шести наиболее распространенным разрешениям. Отсюда и нежелание верстать ни подо что, кроме 1024. Кстати я не уверен что оно самое распространенное в интернете.

[Hitryi_Pryanik]

Конечно же! Хорошая книга должна удовлетворять любому зрению читателя, даже если у него -14!

Хорошая вёрстка должна быть хороша композиционно (соответствие размеров и стилей шрифтов), а так же видна на среднем мониторе. Это значит что мне надо равняться не на свой ламповый особо яркий из линейки про и разрешение 1600х1200, а на офисное плоское [фекалии] со стандартными 1024х768 и слабой цветопередачей, которая де-факто чуть хуже 16 бит Включаем зум и кайфуем (благо шрифты изначально векторные).

[Hitryi_Pryanik]

И ещё: даже если экран туеву хучу пикселей в ширину, это не значит, что абзац тоже должен. Абзац должне быть удобочитаем (5-8 слов)

[murr]

>> макет не разваливается при изменении размеров страницы и масштабировании шрифтов;
в Опере 9.1 при увеличении масштаба (минус на клавиатуре) верхняя и нижняя часть внешней рамки сьезжает ближе к середине

[GruZZ]

Спасибо. Если удастся раздобыть Оперу 9.1, то постараюсь это исправить. Хотя странно, от старой Оперы такого поведения никак не ожидал...

[Tishka17]

опера 9.51.
закрываем вкладку и восстанавливаем её из корзины. Подвал уползает снизу вверх до последних символов в стобцах..

[whybenormal]

Мог бы поставить плюс — поставил бы!

[Hitryi_Pryanik]

вместо этого могли бы просто сказать «Спасибо» — это не сложно.

[serzhb]

Спасибо за статью. Со всеми пунктами согласен, кроме
>содержимое обрамляется красивой рамкой со скругленными углами;
По моему, это уже на усмотрение дизайнера, не думаю, что стоить делать это обязательным условием хорошего шаблона.

[GruZZ]

Естественно. Просто полгода назад я верстал похожий макет и не смогу реализовать все требования ТЗ. Там как раз была похожая рамочка. А ведь с ней сложнее, чем без неё ;-)

[tony]

в опере 9.51 не растягивается на весь экран

[GruZZ]

Угу. Такое поведение новой Оперы для меня стало неприятным сюрпризом. И как это лечится, я пока не в курсе. В принципе, все становится на свои места, если попробовать: помасштабировать страничку; поизменять размеры окна просмотра; нажать F5 в конце концов.

[tony]

угу, заметил тоже. Причём Ф5 через раз возвращает - то схлопывает, то расширяет вид(((

спасибо за отличную вёрстку ;)

[Glook]

итак, пошагово:
Doctype XHTML 1.0 Strict
а нахуя (простите) козе баян? что такого в этом strict? сам всегда тоже придерживался этого типа, но последнее время документ верстаю или в XHTML 1.0 Transitional или в HTML Strict. Почему? Вот вам пара (думаю их больше) причин: frame и target
Ах да? фреймы конечно зло, как и таргет, Тока вот баннерный код размещают в iframe. Можно конечно сделать через object, но я хотел бы посмотреть на такое решение, где в Internet Explorerне будет отображаться полоска скроллбара. Про target в ссылках и рекомендации использовать для этой цели скрипты (!) я даже упоминать не хочу...

дальше-больше...

[Glook]

«А разве в HTML Strict iframe и target есть? »

Да, вы знаете, есть.

[Glook]

[vithar]

+1

[catsmeetman]

Согласен

[besisland]

Правильно, незачем использовать XHTML 1.0. Используйте XHTML 1.1 — он включает mod Target.

[besisland]

В той ссылке, что я предоставил.

[besisland]

Я сам теряюсь в догадках.

[besisland]

История тёмная, да.

Кстати, в этом DTD указана версия 1.1 от 16 июля 2008, а в этом — 4.0 от 2 февраля 2001. Забавно, не правда ли?

Но идентификаторы в обоих указывают, что основной адрес — http://www.w3.org/MarkUp/DTD/xhtml-targe…

В DTD для XHTML 1.1 написано: <!ENTITY % xhtml-target.module "INCLUDE" >. Если это не означает подключение модуля target, то даже и не знаю.

[pepelsbey]

–1, Transitional — это «извините, но не могу в Strict, ибо б*дские баннеры», а тут стерильный пример, так почему не Strict? Мне кажется, вы слишком нервно отреагировали.

[tapazukk]

Mожно в Strict через object без скроллбара.

[dimonline]

Мне мой макет нравится больше тем, что там нет отдельного стиля для IE)

[GruZZ]

Это нормально, что вам ваш макет нравится больше ;-) Просто мой немного посложнее, как, опять же, мне, кажется.

[Alexti]

отдельного стиля нет так как у вас верстка не фиксированная, без значений максимальной и минимальной ширины, а IE min-width не понимает

[JIP]

заявленный доктайп "Doctype XHTML 1.0 Strict" существенно ограничивает заявленную кроссбраузерность. MSIE не знает что такое XHTML

[besisland]

MSIE должен знать, что такое DTD и как его использовать (а если не знает, то какой же он браузер? К кроссбраузерности тогда отношения не имеет и иметь не может).

[not_ice]

на первый взгляд весьма респектно :)

[Alexti]

посмотрел по внимательнее, все смотрится отлично, за исключением пустых дивов, но без них все разваливается..

спасибо за проделанную работу, особенно порадовала полукруглая рамочка

[Delka]

как можно было бы оптимизировать данный макет?

[Delka]

факинь парсер съел мой коммент((

как можно было бы оптимизировать данный макет?

- уже есть другие способы, намного проще моего и удовлетворяют всем описанным выше требованиям.

здесь всё очень плохо и не только из-за несемантических элементов, а в самой основе плохо: логически ненужные padding для контэйнера, полёты во сне и наяву отрицательным margin и position-relative...

проблема в том что вы изначально взяли очень плохой пример за основу.
сверстайте всё сами, с нуля, тут всё очень просто и у вас в принципе всё есть:

• overflow:hidden и hasLayout для контэйнера
• float: left и * html display: inline для блоков
• отрицательный margin для перемещения столбцов
• :after/before и insertAdjacentHTML для закруглений

[Delka]

IE5-7,OP8-9,FF,SF - очень даже кросбраузерно
там где "и ..." - реализация для IE, остальное везьде и так работает.

[GruZZ]

Спасибо за ценный комментарий. В свою защиту могу сказать только то, что я понамешал здесь очень много всего и сразу. Обошелся 3 картинками вместо 4 или 6 - это дополнительные блоки плюс проблемы, возникающие с их позиционированием. Еще я очень хотел, чтобы ,было как можно меньше скриптов. Вы все верно говорите, я согласен. Можно и нужно в реальной работе упрощать и делать так, как будет лучше (быстрее, надежнее) для данного проекта. За упоминание insertAdjacentHTML большое спасибо, не знал.

[ithilion]

Посмотрите еще мой вариант (сайт не принадлежит мне, только этот файл): http://nick123.ru/test/uuu.html
Преимущество этого макета в минимальном количестве блоков.

[GruZZ]

Количество блоков минимально, не спорю. Но не выполняется ряд придуманных мною требований, а именно: валидность (ибо хаки и валидатор вываливает непонятную ошибку) и положение контента в коде перед содержимым боковых панелей. Глубже не копал.

[XVII]

спасибо! очень полезный шаблон для обучения!!!!!!
Ну а на счет косячков — ничего идеального не бывает.
Проэкты со сложным дизайном чаще всего имеют отдельный код для разных браузеров, я так думаю))

[Galar]

Не надо думать, надо читать книжки и знать точно ;)

[besisland]

Думать надо всегда.

[Galar]

Человек написал: "Проэкты со сложным дизайном чаще всего имеют отдельный код для разных браузеров, я так думаю))"
перед тем как он это написал, он подумал. Делаем вывод, что ему пока не надо думать на эту тему, так как он не знает этого.

[besisland]

Думать надо прежде всего о том, чего не знаешь.

[Galar]

Много придумать можно на тему, которую не знаешь :)

[besisland]

Именно поэтому и надо думать.

[Galar]

делаем вывод, я не подумал когда написал, а пост из-за которого это все началось, подумал ;)

[XVII]

Спасибо за совет)) Не хочу что бы это звучало как оправдание, но я вообще-то по образованию юрист, а вебом занялся без 5 дней - неделя... Так что не хочу отказываться от мысли на счет того, что это "очень полезный шаблон для обучения". Код откомментирован и отформатирован, в общем будет удобно разобрать как он работает, хотя он и не идеален.. А на счет книжек я с радостью выслушаю ваши предложения.

[Glook]

я продолжу. про доктайп написал, теперь буквально два слова про
макет не разваливается при изменении размеров страницы и масштабировании шрифтов

с одной оговоркой, если браузер не Mozilla Firefox 2
тут как не крути, при таком методе масштабирования, вёрстка разлезется по-любому

[GruZZ]

Вы правы, в некоторых моментах без таблиц и скриптов не обойтись. Но как же хочется... :)

[Panya]

Вы выбрали плохой метод создания колонок одинаковой высоты. Существует вариант в котором этот баг не проявляется, но он слишком перегружен лишними элементами. На данный момент, самый хороший метод это сделать — faux columns

[Panya]

Блин, ссылки нельзя ставить)

плохой: http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

вариант: http://www.satzansatz.de/cssd/companions/percpercpercfsa.html

faux columns: http://www.communitymx.com/content/article.cfm?cid=afc58

[GruZZ]

Очень интересно. Надо будет на досуге поразбираться с "плохими" вариантами. Хороший вариант всем хорош, но некрасив с отключенными картинками. А я решил, что для меня в данном случае это важно :-)
В работе я, как правило, всегда пользуюсь faux columns

[Protasov]

вариант: http://www.satzansatz.de/cssd/companions/percpercpercfsa.html в опере, так же лагает как и все макеты здесь представленные — при масштабировании окна браузера, футер прижимается к верху.

[Panya]

Я и не говорил, что это хороший вариант, в нём просто нет бага с анкорам.

[XAMelleOH]

Только мне кажется, что javascript для min-width это плохо?

[Kozlovski]

В FF 2.0.0.12 косяк, содержимое контейнера прячется за боковыми панелями (хотя firebug обрамляет див с контентом в нужном месте %\ ).
И про какую "красивую рамку со скругленными углами" вы говорите?!

[r3s3t]

На счёт последнего пункта. Было бы здорово, если бы было:

<div>Header</div>
<div>Left</div>
<div>Main</div>
<div>Right</div>
<div>Footer</div>

…и ничего лишнего. Блин, о чём я говорю… Забудьте. :)

[aps]

JS вам в помощь :)

[jcd]

Спасибо конечно за статью, но на настоящий момент хотелось бы больше информации по верстке с помощью CSS Tables (IE8 будет поддерживать) & display: inline-block (поддерживает Firefox 3).

[sfelde]

а если добавит вместо пустых div, следуйшее:

<div class="bi">
<div class="bt"><div></div></div>
=>
<div class="bi">
<div class="bt clear"></div>
.clear:after {
height: 0;
content: ".";
clear: both;
visibility: hidden;
display: block;
}
.clear { display: block; }

[GruZZ]

Смысл этих блоков в том, что они содержат бэкграундом картинку скругленного угла, а не в том, что они нужны для очистки. Про самоочистку float я в курсе. Кстати, предпочтительнее в таких случаях использовать overflow:hidden;
Полезная статья по теме.

[Glook]

а по-поводу приведённого примера создания гибких рамок хочу сказать вот что: это конечно всё интересно, но уж слишком элементарно. Давайте усложним задачу, а? Давайте представим, что нужно сверстать блок с полупрозрачной тенью (png), со скруглёнными углами (png), без фиксированной ширины (определяемой содержимым), да ещё и абсолютно позиционированный. Вот это действительно задачка над которой можно cломать голову. Если у вас есть готовое решение или видели нечто такое работаюott в Internet Explorer 6, выложите пожалуйста ссылку.

[GruZZ]

Идеального варианта я не встречал. Могу предложить вылизанный и отредактированный мной вариант от студии Лебедева: http://gruzzilkin.110mb.com/artlebedev-p….

Оригинал

[Glook]

как-то вылизан он не очень... уменьшите окно браузера по ширине пикселей так до 500

[GruZZ]

А вот это будет вам домашним заданием. Подсказка: подумать над размером картинки и над min-width for IE.

[GruZZ]

http://gruzzilkin.110mb.com/png-corners - посмотрите. Метод пока не отлажен и не оптимизирован, но думаю, он получше и попроще варианта студии Лебедева.

[micbsv]

В Win Safari ни фига не работает - виден только хидер и контент.

[Protasov]

Хрен с ними со скругленными краями, от них никакого толку, только мусор один графический.

Тут хоть кто-нибудь знает как сделать что бы этот макет масштабировался нормально в Опере?

[Glook]

нашёл серьёзный баг при тестировании «идеального» макета
Если в кололнку (допустим среднюю) поместить абсолютно позиционированный блок (позиционируем его относительно дополнительного блока контейнера с position:relative) то этот блок некорректно отображается. его содержимое просто "обрезается", а не растягивает колонку по вертикали

[Glook]

вы меня не так поняли, я имел ввиду что этот блок не виден ввиду того что для корректной работы «идеального» макета у колонки выставлено правило overflow:hidden , соотвественно такое содержимое будет обрезаться.

[RVK]

Извините за то что позаимствовал вашу верстку (хотите копирайт поставлю), но я программист, не верстальщик. Заодно потестировал. Изменений в верстке минимум, но (извините если вина моя) заметил пару багов.

1. http://rsmfans.ru/index.php?module=Blogs…
Браузер проматывает страницу вниз до комментов, но все что выше скрывается где-то за границами браузера. Firefox 3

2. В IE 6 футер закрывает половину страницы вместе с текстом и столбцами

[RVK]

скриншотs:
1.
2.

[GruZZ]

Для вашего макета я бы посоветовал пофиксить высоту подвала в

#item1 .sap-content,#item2 .sap-content,#item3 .sap-content {
padding-bottom:5em; /* Отступ снизу равный высоте подвала */
}

И еще. Зря вы взяли шаблон целиком и впихнули его к себе на сайт. Многие вещи, используемые в моем шаблоне, на реальном портале не нужны. Это

padding-bottom:1000em;
margin-bottom:-1000em;

и пляски с overflow:hidden

А разбираться в вашем сайте у меня сейчас нет ни времени, ни особого желания. Т.к. данный макет, как я уже успел убедиться, не годен для использования в реальных условиях.

[RVK]

Разбираться не нужно, просто указал на найденные ошибки. Спасибо за ответ. Понял что придется посвятить верстке все таки больше времени чем планировал.

[RUQ]

Продемонстрируйте новую версию «Holy Graal» (годную для использования в реальных условиях)

[Glook]

да, я тоже обнаружил баг с "якорями" (при переходе на "якорь", всё что выше него куда-то прячется) но думаю проблема не у автора кода. я делал подобную вёрстку сам и немного по-другому, однако принцип создания колонок одинаковых по высоте у меня тот же. пока не понял в чём дело...

[madnut]

troll detected

[alex_and_r]

как уже выше отмечалось, про скругленные углы спорно, а так, надо запомнить это топик…