Макет как у yahoo.com

[godima]

Добрый день!

Вот изучал тут дизайны vkontakte.ru и yahoo.com и увидел интересную деталь.

Вот когда нажимаешь Ctrl+прокрутка колеса мыши размер шрифта начинает меняться.

вконтакте ломается весь при таком действии, а yahoo - нифига. Причем yahoo не ломается ни в лисичке, ни в ослике.

Почитав этот сайт про резиновые макеты страниц и опробовав в лисичке убедился - это не то.

Вопрос: как делается такая фича, чтобы сайт вслед за текстом увеличивал свои размеры, как на yahoo.com

Всем спасибо за ответы заранее.

[Vitesse]

ну как я понимаю, основной принцип такого поведения - ширина контейнера указана в em, а ширина блоков внутри него в процентах.

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

[SibBear]

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

А как указывать в em контейнер? это же относительный размер, если у меня все в px, как перевести на em? или может я не правильно понимаю эту систему?

Будем менят!

[Mordraug]

система такая, что сначала вы указываете величину базового шрифта на странице..например 100%

html, body {
font-size:100%; /* для всех кроме <=IE6 это будет эквивалентно 16px */
}

затем все размеры указываете в em..

#container {
font-size: .75em /* 0.75em равно 12px. если базовый размер равен 100%=16px */
}

содержимое такого контейнера будет иметь размер шрифта по умолчанию равным 75% от базового размера, тоесть 12px примерно (округляется до 12).

соответственно размеры блоков можно тоже указывать в em основываясь на базовом размере шрифта.

Следует заметить, что например для IE6 вам придется писать отдельно объявление базового размера шрифта, чтобы привести его к единому знаменателю с остальными браузерами. И еще нужно не забывать, что разные браузеры по-разному отрисовывают отступы "по-умолчанию".. в том числе и параметр line-height может различаться.. поэтому будет не лишним все умолчания сначала сбросить на 0, а затем установить требуемые, тогда все будет более или менее идиентично во всех браузерах.

Вообще при наличии какого-то количества графических элементов, и тем более картинок ? реализовать такой масштабируемый макет достаточно сложно, но возможно