Один 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.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

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