Разметка <DIV>

@Лилёк · Регистрация: 10.05.2012

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

Здравствуйте!

Подскажите, пожалуйста, сделала разметку страницы DIV блоками, примерно так:

HTML5
1
2
3
4
5
6
7
<!-- Тут шапка сайта! -->
<!-- Тут панель набигации! -->
<div id="container">
    <div id="menu"> Тут боковое меню! </div>
    <div id="content"> Тут основной контент! </div>
</div>
<!-- Тут футер! -->

... и задала стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
    margin: 10px auto;
    width: 900px;
    height: auto;
    background-color: #fff;
    padding: 10px;
}
 
#content {
    float: right;
    width: 680px;
    height: auto;
}
 
#menu {
    float: left;
    width: 220px;
    height: 800px;
}

Все стили срабатывают кроме блока #content, если посмотреть код в браузере, он как будто заблокирован. Если в CSS файле #content и #menu поменять местами (очерёдность написания), тоже самое будет с #menu.

В чём проблема?

@AlexZaw · 01.06.2018, 23:35

Задал фон для блоков, что не так?

@Лилёк · 01.06.2018, 23:50 **[ТС]**

Ширина у блока 900px, а должна быть 680px. И в стиле только один параметр - display: block.

@AlexZaw · 02.06.2018, 00:26

В приведенном вами куске кода все нормально, в чем можете убедится сами создав новый файл только с этим кодом.
Ошибка где то в другом месте

@Freeze_Breeze · 02.06.2018, 10:08

Лилёк, может лучше стилизовать блоки не через id, а через class?

CSS
1
<div class="className"></div>

@Лилёк · 02.06.2018, 11:52 **[ТС]**

Сообщение от Freeze_Breeze

может лучше стилизовать блоки не через id, а через class?

По идее надо через id, стилистика для них индивидуальна. Но в любом случае, и через class такая же белеберда.

Тут суть в том, что от порядка id в css файле результат разный. Если оставить порядок как в html файле, сначала #header, потом #container, затем #menu и #content, то блокируются стили и для #menu, и для #content. А если поднять #container выше #header, то блокируется что-то одно из #menu и #content (то что последнее).

Прикрепляю файлы.

@AlexZaw · 02.06.2018, 12:43

Скриншот странички из вашего архива, ничего не менялось:

@AlexZaw · 02.06.2018, 12:44

Может объясните что значит "блокируется"?
ВОзможно ошибка в том что у вас в css не закрыты стили для #navigation

@Лилёк · 02.06.2018, 12:55 **[ТС]**

Сообщение от AlexZaw

Может объясните что значит "блокируется"?

У #container стоят параметры, ширина 900px и по центру. В нем ещё два блока: #menu и #content, один из которых стоит слева, другой справа и имеют ширину 220px и 680px. Если посмотреть код элементов #menu и #content, там стоят параметры из css файла, все норм! А вот у #container только один display: block.

@shvyrevvg · 02.06.2018, 12:57

Сообщение от Лилёк

А вот у #container только один display: block.

Это дефолтные стили браузера(справа вверху написано user agent style..)

@Freeze_Breeze · 02.06.2018, 12:57

Лилёк, а что у Вас собственно не работает? Или даже такой вопрос, что Вы ожидали получить от Ваших заданных стилей? Закройте стили в css у классов #navigation и #footer

@Лилёк · 02.06.2018, 13:01 **[ТС]**

Сообщение от Freeze_Breeze

то Вы ожидали получить от Ваших заданных стилей?

Что бы всё по центру было.

Сообщение от Freeze_Breeze

Закройте стили в css у классов #navigation и #footer

Вся проблема в этом была, я не знала что нельзя просто так оставлять. Спасибо.

@Freeze_Breeze · 02.06.2018, 13:05

Лилёк, Что бы все было по центру Вам надо:

HTML5
1
2
3
4
5
<div class="container">
    <div class="block">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non mollitia eveniet maiores voluptate delectus recusandae fuga libero magnam? Sint accusantium mollitia, magnam unde commodi cupiditate! Porro nobis rem necessitatibus ut.</h1>
    </div>
</div>

CSS
1
2
3
4
.container {
    width: 1140px;
    margin: 0 auto;
}

Новые блоги и статьи Все статьи Все блоги /
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 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	01.06.2018, 23:35
	Задал фон для блоков, что не так? Миниатюры 0

@Лилёк 2 / 2 / 0 Регистрация: 10.05.2012 Сообщений: 141
	01.06.2018, 23:50 [ТС]
	Ширина у блока 900px, а должна быть 680px. И в стиле только один параметр - display: block. Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.06.2018, 00:26
	В приведенном вами куске кода все нормально, в чем можете убедится сами создав новый файл только с этим кодом. Ошибка где то в другом месте 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.06.2018, 12:43
	Скриншот странички из вашего архива, ничего не менялось: Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.06.2018, 12:44
	Может объясните что значит "блокируется"? ВОзможно ошибка в том что у вас в css не закрыты стили для #navigation 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	02.06.2018, 12:57
	Сообщение было отмечено Лилёк как решение Решение Лилёк, а что у Вас собственно не работает? Или даже такой вопрос, что Вы ожидали получить от Ваших заданных стилей? Закройте стили в css у классов `#navigation` и `#footer` 1

Разметка <DIV>

Решение