Форум программистов [Powered by Invision Power Board]

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Сайт в две колонки</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">

    <div id="header">
    Хейдер сайта. Лого и главная навигация
    </div> <!-- кончился header -->
    
    <div id="sidebar">
        <div class="menuha">
        <h1>Навигация</h1>
        <a href="#">Ссылка 1</a>
        <a href="#">Ссылка 1</a>
        <a href="#">Ссылка 1</a>
        </div>    
    </div> <!-- кончился sidebar -->
    
    <div id="main">
        <h1>Заголовок главного раздела</h1>
        <table width="100%" class="tablica">
            <tr>
                <th colspan="2">Заголовок таблицы</th>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Заполнение таблицы</td>
            </tr>
        </table>        
    </div> <!-- кончился main -->
    
    <div id="cleaner"></div>
    
    <div id="footer">
    Футер сайта. Копирайты и всякая ерунда
    </div> <!-- кончился footer -->

</div> <!-- кончился wrap -->
</body>
</html>

Код



body{
    margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        background-color: #E6E6E6;
    font-size:1em;
        line-height:1.25em;
}
#wrap {
    margin:0 auto;
    min-width: 980px;
    width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 980 ? '980px' : 'auto'); /* для ИЕ */
    max-width: 1200px;
    width: expression((documentElement.offsetWidth || document.body.offsetWidth) > 1200 ? '1200px' : 'auto'); /* для ИЕ */
    background-color: #C6D0C4;
    border: 1px solid black; /* рамка */
}
#header {
    font-size: 2em;
    font-weight:bold;
    color: white;
    text-align:center;
    padding: 20px;
    background-color: #444;
    border: 1px solid black; /* рамка */
}
#sidebar {
    float:left; /* менюха */
    width:200px;
    padding: 8px; /* отступы внутрь контейнера */
    background-color: #BBB;
        border: 1px solid orange; /* рамка */
}
#main {
    margin-left:230px; /* главный контейнер*/
    padding: 8px; /* отступы внутрь контейнера */
    border: 1px solid blue; /* рамка */
    text-align: center; /* по центру */
}
#cleaner{
        clear: both;
        height: 0;
        overflow: hidden;
        line-height: 0;
        font-size: 0;
    border: 1px solid red; /* рамка */
}
#footer {
    padding: 6px 0 6px 0;
    background-color: #666;
    color: white;
    text-align:center;
    border: 1px solid black; /* рамка */
}
.menuha{
    border: 1px solid yellow; /* рамка */
}
.menuha a {
    display:block;
    margin: 0 0 3px 6px;
}
.menuha h1 {
    display:block;
    background-color: #333;
    color: white;
    padding: 6px;
    margin: 0 0 3px 0;
    font-size: 1.7em;
}
.tablica {
    border-collapse: collapse; 
    border-spacing: 0;        
    border: 1px solid #333; /* рамка */
}
.tablica td {
    border: 1px dashed black;
}
h1 {
    margin: 6px 0 12px 0;
}