More Related Content Similar to Crossbrowser Css layout (20) 1. Кроссбраузерная CSS- вёрстка CSS 2 - crash course Вёрстка макета по шагам © 2009, Коновалов Андрей 14. Популярные виды макетов http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts Самый распространённый 3 column layout Left menu layout Right menu Floating boxes Double page Full page Multi-column stacked 15. 3 column liquid layout http://matthewjamestaylor.com/blog/perfect-3-column.htm Рис. 1 Размерности блоков Рис.2 Структура вложенности 16. Пример макета с содержимым http://matthewjamestaylor.com/blog/perfect-3-column.htm 18. Как же верстать? <body> <div id="header"> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> </div> <div class="col2"> </div> <div class="col3"> </div> </div> </div> </div> <div id="footer"> </div> </body> <!– Это не истина в последней инстанции! --> http://matthewjamestaylor.com/blog/perfect-3-column.htm 22. Фиксированный «подвал» CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } HTML <div id="container"> <div id="header"> header</div> <div id="body"> body</div> <div id="footer"> foother</div> </div> http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 23. На закуску http://csszengarden.com/ http://www.mezzoblue.com/zengarden/resources/
![Часть I. Что такое CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)