можно например сделать интерактивными детали резюме, с картинками / генерацией «имадж мэпов» (пусть даже сделанных при помощи стилей) это гораздо менее гибко
Вот решение основанное на display:table-cell для нормальных и display:inline с hasLayout для инвалидов;
Сегодня использовал в проекте; Работает в фф2/3, сафари3, опера 9.5, ие6/7, больше не тестил;
Метод Токмакова можно улучшить, если клиринг использовать не :after {content:'' и т.д.} а overflow:auto для блока, относительно которого центрируешь. Хотя один лишний див все-таки остается, да.
На самом деле, возможность ориентироваться в большом потоке информации должна (очевидно) быть предоставлена ресурсом. Раньше была лента для того, чтобы читать блоги, на которые я подписан. Так можно было хотя немного понизить количество топиков. Сейчас вообще никакой возможности не предоставлено. Обещают, вроде как, что все будет круто. И, тогда, никаких ящиков не потребуется. Я вообще помню, что обещали какую-то «ленту 2.0», в которой как-то можно будет работать с потоками информации.
Вот и она:
www.google.com/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=%D0%9C%D0%B0%D0%B3%D0%B8%D1%8F+%D0%BC%D0%BE%D0%B7%D0%B3%D0%B0+%D0%B8+%D0%BB%D0%B0%D0%B1%D0%B8%D1%80%D0%B8%D0%BD%D1%82%D1%8B+%D0%B6%D0%B8%D0%B7%D0%BD%D0%B8
хороший пример использования rgba с graceful degradation можно увидеть на 24ways.org/
только, наверное, не «внуки», а «дети» или «потомки»?
Сегодня использовал в проекте; Работает в фф2/3, сафари3, опера 9.5, ие6/7, больше не тестил;
<style type="text/css"> #header { background:black; font-size:1.4em; } #header a { color:#fff; } #header div { margin:0 auto; display:table; } #mainmenu,#languages { display:table-cell; list-style:none; } #mainmenu li, #languages li { float:left; margin-left:0.3em; } </style> <!--[if lt IE 8]> <style type="text/css" media="all"> #header div {/* block with centered inline-blocks elements */ display: block; text-align:center; } #mainmenu, #languages {/* setting blocks to be "inline-blocks" (display:inline with hasLayout)*/ display:inline; zoom:1; } </style> <![endif]--> <div id="header"> <div> <ul id="mainmenu"> <li> <a href="#">Download</a> </li> <li> <a href="#">Cashier</a> </li> <li> <a href="#">About Us</a> </li> </ul> <ul id="languages"> <li> <a href="#">English</a> </li> <li> <a href="#">FRANÇAIS</a> </li> <li> <a href="#">Deutsch</a> </li> <li> <a href="#">ESPAŇOL</a> </li> </ul> </div> </div><style type="text/css"> .align_center { position: relative; width: 100%; overflow:auto; } .align_center_to_left { position: relative; right: 50%; float: right; } .align_center_to_right { position: relative; z-index: 1; right: -50%; } </style> <div class="align_center" style="border: 1px dashed red; color: red;"> Выравниваем относительно этого блока. <div class="align_center_to_left"> <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;"> Ширина блока зависит от размера надписи. </div> </div> </div>