VPF::Почему ломается верстка - Форум программистов

nullpoint

Дата 31.1.2015, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 4.6.2013

Репутация: нет
Всего: нет

Вроде ничего сложного не делаю, но выходит все неправильно... Подскажите в чем ошибка? Почему появился отступ между header'ом и body? Центральный div съехал куда-то вниз, правый непонятно как расположен?
Вот код страницы и стиля:

Код


<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Название</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
        <!-- start page -->
        <div id="page">
            <!-- start header -->
            <div id="header">
                 <h1><center>Шапка сайта</center></h1>
            </div>    
            <!-- end header -->
            <div id="pg_left">
                <div id="left_menu">
                    <div id="menu_l">
                        <h2>Меню</h2>
                    </div>
                        <ul>                
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                </div>
                <div id="right_menu" class="pg_menu">
                    <h3>bllll</h3>
                    <div type="calendar" id="datepicker">
                    </div>
                </div>
                <!-- start content -->
                <div id="content">
                    <h3>div content</h3>
                    sfd        
                </div>
                <!-- end content -->
            </div>
        </div>
        <!-- end page -->
    <div id="footer">
        
    </div>
</body>
</html>

Код


body {
    margin-top: 10px;
    padding: 0;
    background: #787878;
    text-align: justify;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    color: #616161;
}

#header {
    width: 100%;
    height: 40px;
    background-color: #ccbbaa;
    border: 2px;
    border-radius: 10px;
}

#page {
    width: 1000px;
    margin: 0px auto;
}

#pg_left{
    width: 800px;
    background-color: #cc3315;
}

#left_menu{
    margin: 0px 0px 0px 0px;
    width: 200px;
    background-color: #444444;
}

#menu_l{
    border: 2px;
    border-radius: 10px;
    background-color: #112233;
    text-align: center;
    margin-top: 0px;
    height: 30px;
}

#right_menu{
    margin: 0px 0px 0px 800px;
    width: 20%;
    background-color: #431265;
}

#content{
    width: 600px;
    margin: 0px 200px 0px 200px;
    background-color: #555555;
}

.pg_menu {
    font-size: 12px;
}

Присоединённый файл ( Кол-во скачиваний: 0 )

Безымянный.png 13,35 Kb

bork

Дата 16.2.2015, 12:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 98
Регистрация: 4.1.2008

Репутация: нет
Всего: нет

Код


 <html>
 <head>
 <style type="text/css">
.container {min-width:600px;}
.main {float:left; width:100%;}
.content {margin: 0 200px;}

.left {float:left; width:200px; margin-left:-100%; background:#B9CAFF}
.right {float:left; width:200px; margin-left:-200px; background:#FF8539}

.footer {clear:left; width:100%; background: #333; color: #FFF}
 </style>

 </head>
 <body>
<div class="container">
    <div class="main">
        <div class="content">
            Контент
        </div>
    </div>

    <div class="left">
        Левый блок
    </div>

    <div class="right">
        Правый блок
    </div>

</div>

<div class="footer">Футер</div>

 </body>
 </html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »