Один class-header влез в class-main, как так?

@Lianar · Регистрация: 30.01.2018

Студворк — интернет-сервис помощи студентам

В header есть список и в main есть список, но это же 2 разных класса. почему header влез в main?
Я новичок, прошу объяснение на пальцах)

HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title>Первая страница</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <tr class="header">             
            <td colspan="2">
                <ul>
                    <li>Главная</li>
                    <li>Услуги</li>
                    <li>Галерея</li>
                    <li>Новости</li>
                    <li>Контакты</li>
                </ul>
            </td>
        </tr>
        <tr class="main">
            <td>
                <h1>Стильный и современный дизайн</h1>
                <p>Мы считаем, что дизайн интерьера должен быть таким, чтобы даже спустя долгие годы он оставался актуальным, продуманным и свежим. Не важно в каком стиле выполнен интерьер - важен хороший вкус, продуманная планировка, отличная функциональность и эргономика, а также профессиональная работа с цветовыми сочетаниями и освещением.</p>
                <p>Представляя новый образ вашего жилья, задумайтесь, кем вы в нем хотите быть? Царем в тронном зале, дикарем среди джунглей, поп па дивой или просто человеком, которому всегда хочется возвращаться домой. Наша команда воплотит в жизнь ваши мечты!</p>
                <p>Представьте, что эксклюзивный интерьер вашего дома или квартиры отражает вашу индивидуальность, ваши стремления и  мечты. Над ним работают профессионалы, которые знают, как с помощью цветовых решений и фактуры материалов создать уют и передать эмоции.</p>
            </td>
            <td class="img">
                <img src="img/img_1.jpg" alt="Img_1" width="450">
            </td>
        </tr>
        <tr class="main">
            <td class="img">
                <img src="img/img_2.jpg" alt="Img_2" width="450">
            </td>
            <td>
                <h2>В пакет услуг входит:</h2>
            <p>Мы считаем, что дизайн интерьера должен быть таким, чтобы даже спустя долгие годы он оставался актуальным, продуманным и свежим. Не важно в каком стиле выполнен интерьер - важен хороший вкус, продуманная планировка, отличная функциональность и эргономика, а также профессиональная работа с цветовыми сочетаниями и освещением.</p>
            <ul>
                <li><span> Обмерный чертеж с привязкой инженерных коммуникаций</span></li>
                <li><span>План расстановки мебели, 4-5 вариантов и 1 утвержденный</span></li>
                <li><span>Стилевые и световые решения(1-2 варианта)</span></li>
                <li><span>план после перепланировки</span></li>
                <li><span>План строительного демонтажа и монтажа</span></li>
                <li><span>План полов, раскладка материалов</span></li>
                <li><span>План потолков</span></li>
 
            </ul>
            </td>
        </tr>
        <tr class="footer">
            <td colspan="2">
                <h3>Заказать звонок</h3>
                <input type="text" name="name" placeholder="Ваше имя"><br>
                <input type="email" name="email" placeholder="Адресс эл. почта"><br>
                <input type="tel" name="tel" placeholder="Номер телефона"><br>
                <button type="submit">Заказать звонок</button>
            </td>
        </tr>
    </table>
 
</body>
</html>

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
body {
    margin: 0;
    padding: 0;
}
 
table, tr, td {
    border: 1px solid #000;
}
 
.header {
    background-color: #1cb3e5;
}
.header td, ul {
    text-align: center;
}
.header ul, li {
    list-style: none;
    display: inline-block;
    color: #fff;
    margin: 10px 50px;
    text-transform: uppercase;
}
 
.main h1 {
    color: #4a4949;
    font-family: "Museo Sans Cyrl";
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
}
.main h1:after {
    content: "";
    display: block;
    width: 194px;
    height: 3px;
    background-color: #1cb3e5;
}
.main p {
    color: #636363;
    font-family: "Museo Sans Cyrl";
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
body .main td.img {
    text-align: center;
}
 
 
 
 
.main h2 {
    color: #4a4949;
    font-family: "Museo Sans Cyrl";
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}
.main h2:after {
    content: "";
    display: block;
    width: 194px;
    height: 2px;
    background-color: #1cb3e5;
}
 
 .main ul li {
    color: #1cb3e5;
}
 .main ul li span {
    color: #636363;
    font-family: "Museo Sans Cyrl";
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;
}

@gogolik · 17.11.2019, 15:52

Ну так нужно писать .header td, .header ul, согласно вашему коду. Или вообще .header td > ul.

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

@gogolik Супер-модератор 3969 / 2089 / 832 Регистрация: 13.03.2010 Сообщений: 6,890
	17.11.2019, 15:52
	Ну так нужно писать .header td, .header ul, согласно вашему коду. Или вообще .header td > ul. 0