VPF::Вложенный div не "вкладывается".

Avaj

Дата 22.3.2010, 17:30 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 14.7.2008
Где: Владивосток.

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

3 дня изучаю вёрстку и наткнулся на проблему - некоторые div's не вкладываются в другой div. Вот пример:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Сайт Кафедры Программного обеспечения ЭВМ ДВГУ">
        
        <link rel="stylesheet" href="MainStyle.css" type="text/css"/>
        
        <title>Сайт Кафедры Программного Обеспечения ЭВМ ДВГУ | Главная</title>

    </head>
    

    <body>


        <div id="container">

            <div id="nav">

                <ul>

                    <li><a href="#">Главная</a></li>

                    <li><a href="#">Студентам и преподавателям</a></li>

                    <li><a href="#">Информация о кафедре</a></li>

                    <li><a href="#">Связь</a></li>

                    <li><a href="#">Ссылки</a></li>

                </ul>

            </div>


            <div id="news">

                <h3>QQQ</h3>

                <ul>

                    <li><a href="#">qqq</a></li>

                    <li><a href="#">qqq</a></li>

                    <li><a href="#">qqq</a></li>

                </ul>

            </div>
            
        </div>


    </body>

</html>

Код


* {
    margin: 0;
    padding: 0;
    border: 0;
}

/*------------------------------------------*/

body {
    padding: 1% 0 0;
    background: white;
    color: black;
    font-family: sans-serif;
}

/*----------------------------------------------*/

#container {
    width: 1024px;
    margin: 0 auto;
    color: black;
    border-color: black;
    border-width: 1px;
    border-style: groove;
}

/*------------------------------------------------*/

#nav {
    color: black;
    /*font-size: 120;*/
    /*line-height: 1.5em;*/
    text-align: center;
}


#nav ul {
    list-style-type: none;
}


#nav li {
    display: inline;
    margin: 0 10px;
}


#nav li a {
    color:black;
}


#nav li a:hover {
    color: gray;
}


a {
    text-decoration: none;
}

/*-----------------------------------------------------*/

#news {
    width: 300px;
    margin: 5px 2px 0 5px;
    padding: 5px 5px;
    /*border-color: black;
    border-width: 1px;
    border-style: groove;*/
    float: right;
}


#news h3{
    text-decoration: underline;
}


#news ul {
    list-style-type: none;
}


#news li{
    margin: 10px 0;
}


#news li a {
    color:black;
}


#news li a:hover {
    color: gray;
}

И тут <div id="nav"> вкладывается в <div id="container">, а <div id="news"> никак не хочет. В чём же проблема?

PS. заодно хотел спросить какой-нибудь адекватный инструмент для отладки HTML, CSS, желательно для linux.

Guedda

Дата 22.3.2010, 18:07 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Цитата(Avaj @ 22.3.2010, 17:30

)

PS. заодно хотел спросить какой-нибудь адекватный инструмент для отладки HTML, CSS, желательно для linux.

Дополнение FireBug для Firefox

--------------------

Ll 2

bars80080

Дата 22.3.2010, 19:25 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

ну так конечно, ты его сделал плавающим, вот он и уплыл.

поробуй разные разности, навроде задачи для контейнера position: relative; или поставить после плавающего слоя очиститель:

Код


<div style="clear:both;"></div>

Avaj

Дата 23.3.2010, 01:47 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 14.7.2008
Где: Владивосток.

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

bars80080,

Цитата

Это помогло, спасибо. А что делает этот очиститель, и почему не отображается как надо без него?

Guedda

Дата 23.3.2010, 10:07 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Цитата(Avaj @ 23.3.2010, 01:47

)

А что делает этот очиститель, и почему не отображается как надо без него?

Дорогой мой друг, пройдите на сайт http://htmlbook.ru и прочитайте про аттрибуты и стили цсс. Зачем такие простые вопросы задавать? Ведь быстрее же самому прочитать (полезная практика ;))

--------------------

Ll 2

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