Atilla

Появились проблемы при вёрстке следующего макета: Красный блок (тот что сверху) обладает фиксированной высотой в 200px и шириной в 100% от окна броузера. С этим блоком проблем нет. Проблемы появляются при верстке зелёного блока. Ширина зависит от содержимого. Высота тоже зависит от содержимого, но минимум его высота должна быть равна высоте окна броузера за вычетом 200px - высоты красного блока. И всё совсем грустно с синим блоком. Его ширина должна быть равна ширине окна броузера за вычетом ширины зелёного (который в свою очередь зависит от содержимого). Высота зависит от содержимого, но минимум должна быть равна высоте окна броузера за вычетом 200px - высоты красного блока. Как это всё можно сверстать без таблиц?

Помогло, спасибо.

Надо горизонтально сверстать страницу. Есть основной блок (id="main") и блоки поменьше (class="block"), шириной и высотой равные ширине и высоте страницы: <div id="main"> <div class="block"> ... </div> <div class="block"> ... </div> <div class="block"> ... </div> <div class="block"> ... </div> ... </div> Как при помощи css сверстать так, чтобы блоки class="block" стояли друг за дружкой по горизонтали, даже если выходят за границу экрана? P.S. В интернетах рецепт при помощи javascript изменять ширину основного блока и float:left для блоков поменьше. Не хотелось бы использовать javascript...

Хе, если долго покопаться... Вобщем нашел такое: -webkit-transform-origin:0 0; И соответственно, -webkit-transform-origin/-moz-transform-origin/-o-transform-origin. Задаёт относительно какой части вращать блок. А в ИЕ вроде как writing-mode:tb-rl; нормально работает. Так что возможно и получится...

Похоже пока не наступило Царство Современного и Хорошего Браузера придётся заливать картинкой. P.S. Как ни странно в ишачке поворот текста работал. Причём с самого 5.5... В первый раз проблема не в ИЕ...

а как ещё можно текст вращать?

Поворачиваю текст на 90 градусов вот так: <h1 style="-webkit-transform: rotate(90deg); display:inline-block;">Это текст</h1> Но поворачивается текст вокруг центра, и получается какая-то фигня: Было: Стало: Как повернуть текст так, чтобы левый верхний угол исходной совпадал с левым верхним уже повёрнутой: ?

Помогло такое: <a href="./misc/game/index.html" class="link"> <img src="./images/misc/hover.png" alt="Нету рисунка" /> Игрушко, типо </a> .link {font-size:2em; display:block; margin:1em 0;} .link img {border:0.1em solid #ccc; margin:0 2em 0 0; padding:0.5em; display:inline; vertical-align:middle;} Спасибо.

Есть изображение (~130x130px) и ссылка. надо из расположить в линию, как на рисунке: Пока удается добиться такого только при помощи таблицы. При помощи css получается вот так: То есть ссылка "прилипает" к нижнему краю изображения. Как сделать это при помощи css?

Есть три элемента, внутри header: <div id="header"> <img src="..." id="t1" /> <img src="..." id="t2" /> <div id="t3"> ... </div> </div> #header {width:100%; height:100px;} #header #t1 {display:inline-block; width:80px; height:80px;} #header #t2 {display:inline-block; width:230px; height:80px;} #header #t3 {display:inline-block;} Как расположить их так, чтобы t1 был прижат к левому краю, t2 по середине, а t3 прижат к правому краю?