08.11.2008, 18:19
|
|
Познавший АНТИЧАТ
Регистрация: 12.03.2008
Сообщений: 1,379
Провел на форуме:
5866479
Репутация:
1809
|
|
Безтабличная вёрстка!
Верстаем без таблиц!
Вот пример, работающий во всех броузерах, в том числе и в IE5
Стандартная страничка с хидером, меню, контентом и футером (футер всегда внизу  ):
Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Верстаем без таблиц</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
* {padding: 0; margin: 0; font: normal 100.1% 'Times New Roman'}
body {min-height: 100%; height: 100%; color: #000; background: url('bg.gif') 30% 0 repeat-y}
html {height: 100%}
body, html, #root {min-width: 600px}
H3 {font: bold 25px Arial; color: #888}
#nav H3, #content H3 {margin: 0 0 5px 0}
#root {height: auto; width: 100%; min-height: 100%}
#head {background: #e4e4e4; height: 68px}
#nav {float: left; width: 30%}
#nav P A {background: #e9e9e9; color: #444; border: 1px solid #333; font: bold 90% Georgia; text-decoration: none; display: block; width: 100%; margin: 1px auto}
#content {float: right; width: 70%}
#footer, #wrapper {clear: both; height: 50px}
#footer {background: #e4e4e4; z-index: 9999; margin: -50px 0 0 0}
</style>
<!--[if lt IE 7]>
<style type='text/css'>
#root {height: 100%}
#nav {margin-right: -100%}
#content {margin-left: 30%; display: inline}
#nav, #content {z-index: 1; padding: 0 0 50px 0}
</style>
<![endif]-->
</head>
<body>
<div id='root'>
<div id='head'>
<h3>Header</h3>
</div>
<div id='content'>
<h3>Content</h3>
</div>
<div id='nav'>
<h3>Navigation</h3>
</div>
<div id='wrapper'>
</div>
</div>
<div id='footer'>
<h3>Footer</h3>
</div>
</body>
</html>
Дерзайте!
|
|
|