bOntONweb » layouts http://www.bontonweb.com development Thu, 28 Oct 2010 18:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Layout #1. Резина. Три колонки (ширина в %) http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html#comments Thu, 13 Dec 2007 07:47:01 +0000 coder http://www.bontonweb.com/texnologii/html/layouts/33.html Layout #1
Резина 100%. Ширина всех колонок в %.

PLAIN TEXT
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4. <title>Layout 1</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. html, body {
  8.     margin:0;
  9.     padding:0
  10. }
  11. div#wrapper {
  12.     float:left;
  13.     width:100%
  14. }
  15. div#content {
  16.     margin: 0 25%
  17. }
  18. div#navigation {
  19.     float:left;
  20.     width:25%;
  21.     margin-left:-100%
  22. }
  23. div#extra {
  24.     float:left;
  25.     width:25%;
  26.     margin-left:-25%
  27. }
  28. div#footer {
  29.     clear:left;
  30.     width:100%
  31. }
  32. </style>
  33. </head>
  35. <div id="container">
  36.   <div id="header">
  37.     <h1>Header</h1>
  38.   </div>
  39.   <div id="wrapper">
  40.     <div id="content">
  41.     </div>
  42.   </div>
  43.   <div id="navigation">
  44.   </div>
  45.   <div id="extra">
  46.   </div>
  47.   <div id="footer">
  48.   </div>
  49. </div>
  50. </body>
  51. </html>

]]> http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html/feed 0 Шаблоны разметки страниц. Вступление. http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html#comments Tue, 11 Dec 2007 13:57:46 +0000 coder http://www.bontonweb.com/layouts/shablony-razmetki-stranic-vstuplenie-2.html На этапе верстки сайта возникает проблема создания разметки которая должна соответствовать следующим требованиям:

  1. Валидность HTML
  2. Валидность CSS
  3. Кроссбраузерность.
  4. Отсутствие CSS-хаков.


В сети есть множество библиотек с шаблонами лейаутов. Наиболее оптимальным на мой взгляд решением является галерея лейаутов http://blog.html.it/layoutgala/ .Эти лейауты выполнены с использованием отрицательный отступов и обеспечивают:

  1. Валидный HTML и CSS
  2. Совместимость с браузерами Internet Explorer/win 5.0, 5.5, 6, 7; Opera 8.5+, Firefox 1.5+, Safari 2.
  3. Семантический код.

В общем виде разметка страницы имеет вид:

PLAIN TEXT
HTML:
  1. <div id="container">
  2.   <div id="header">Header</div>
  3.   <div id="wrapper">
  4.     <div id="content">Content</div>
  5.   </div>
  6.   <div id="navigation">Navigation</div>
  7.   <div id="extra">Extra stuff</div>
  8.   <div id="footer">Footer</div>
  9. </div>

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

]]> http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html/feed 0