Собственно пришлось отложить покупку дизайна для личного сайта и сразу же встала проблема временного сайта с контактами. Задумка была простая: полностью по центру, на сероватом фоне большими, белыми буквами было написано, что мол "сайт в стадии разработки, бла-бла-бла". То есть грубо говоря не было известно ни ширины, ни высоты этого микроконтента, который в добавок ещё нужно было отцентрировать по горизонтали и вертикали. Покопавшись в инете не нашёл решения для себя. Всё было или на таблицах, или фикс. размера. Просидев часа два за этим делом я решил, что если таки сделаю задумку на 100%, то обязательно отпишу о ней. И вот, результат:
Глобальные стили:
- * { margin: 0; padding: 0; }
- html, body { width: 100%; height: 100%; border: 0; }
- body { font: 12px/18px 'Segoe UI', serif; color: #fff; background-color: #666; text-align: left; }
- h1 { font: bold 36px/40px 'Segoe UI'; }
Стили идентификаторов:
- #page { width: 800px; min-height: 100%; margin: 0 auto; overflow: hidden; position: relative; }
- #padding { width: 800px; height: 160px; position: relative; }
- #content { left: 50%; top: 50%; position: absolute; }
- #wrapper { left: -50%; top: -50%; margin-top: -80px; white-space: nowrap; text-align: center; position: relative; }
- #footer { width: 800px; height: 80px; margin: -80px auto 0 auto; position: relative; }
- #footer ul { margin: 0; padding: 0 0 0 3em; list-style: none; }
И собственно сам html код:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="styles/main.css" />
- <!--[if IE 6]>
- <link rel="stylesheet" type="text/css" href="styles/ie6.css" />
- </head>
- <body>
- <div id="page">
- <div id="padding"></div>
- <div id="content">
- <div id="wrapper">
- <h1>Сайт находится на реконструкции...</h1>
- </div>
- </div>
- </div>
- <div id="footer">
- <p>Футер прибит к низу</p>
- </div>
- </body>
- </html>
Конечно метод не универсальный, но лучше я не нашёл. Хотя возможно и недостаточно хорошо искал.
Работает везде, начиная от ИЕ6. А посмотреть рабочий, так сказать, пример можно
здесь
Буду рад, если кому пригодится заметка.