Резиновый контейнер, как правильно выровнять?

@prizrak115 · Регистрация: 19.02.2018

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

Как правильно выравнить контейнер?
Мне надо чтоб контейнер ровно встал.
Ровно этому контейнеру, и чтоб были отступы.
Конечно я margit пробывал(только в одну сторону работоло)
Всё же потом смогу и сделал ровный контейнер с отступами, но на маленьком экране он опять вылазить..
Кто не понял на скринах.
Не оброщайте внимание на класс .containerO так всё не так, просто я тестил так и осталось.
Если будет нужен размер картинки напишите

Код 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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=1024" />
 
  <link rel="stylesheet" href="css/style.css">
  <title>SilenceTest</title>
</head>
<body>
  <header>
    <nav>
    <div class="navmenu">
      <a href="" class="">О нас</a>
      <a href="" class="">Форум</a>
      <a href="" class="">Блог</a>
      <a href="" class="">Правила</a>
      <a href="" class="">Услуги</a>
      <a href="" class="">Саппорт</a>
    </div>
  </nav>
  </header>
  <div class="containerImg">
    <img src="img/1.png" alt="BetaSil">
  </div>
  <main>
    <div class="containerO">
 
    </div>
  </main>
</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
78
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 
}
 
 
body{
  border-top: 1px solid transparent;
  font-size: 1em;
  background-color: rgb(0, 0, 0);
 
}
 
a{
  text-decoration: none
}
 
 
.containerO{
  width: 100%;
  height: 900px;
  margin:  0 auto;
  margin-top: 10px;
  background-color: #666;
  display: block;
 
}
 
.containerImg{
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 73px;
  border: 2px groove #666;
 
}
 
.containerImg img{
  margin: auto;
  width: 100%;
 
}
 
 
header{
  width: 100%;
  height: 62px;
  margin-top: -1px;
  background-color: rgba(0, 0, 0, 0.95);
  border: 2px groove #666;
  overflow: hidden;
  position: fixed;
 
 
}
 
.navmenu{
 
  max-width: 960px;
  margin: 0 auto;
  margin-top: -3px;
  display: flex;
  justify-content: space-between;
}
 
.navmenu a{
  color: #666;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 21px;
  padding: 20px;
}
 
.navmenu a:hover{
  color: rgb(255, 255, 255);
  transition: 0.15s;
}

@prizrak115 · 27.06.2018, 14:01 **[ТС]**

Если вам нужен более пример кода css , а если точнее контейнера
То вот

CSS
1
2
3
4
5
6
7
8
9
.containerO{
  width: 1797px;
  height: 900px;
  margin:  0 auto;
  margin-top: 10px;
  background-color: #666;
  display: block;
 
}

@prizrak115 · 27.06.2018, 14:10 **[ТС]**

Чётко встаёт под размер контейнера с картинкой. Ну при уменьшении экрана всё очень плохо, уходит в право

@prizrak115 · 27.06.2018, 18:09 **[ТС]**

Всё сам решил

@shao2004 · 01.07.2018, 18:20

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

Всё сам решил

Поделитесь - как ?

@prizrak115 · 01.07.2018, 18:31 **[ТС]**

Я просто забил, и перестал делать материал на всю страницу, и тебе не советую, а выровнить можно с помощью flexbox контейнеров
, ну я уже забил, и занимаюсь другим делом. Я тут сам новичёк чтоб советовать, лучше создай тему.

@shao2004 · 02.07.2018, 17:28

prizrak115, Пока вопросов нет, чтоб создавать тему для них.
Думал, что вы для себя нашли решение. Вот и спросил поделиться результатом для накопления информации.
При уменьшении размера экрана, думаю, можно регулировать расположение контейнера с помощью медиазапросов @media screen и т.д.

@prizrak115 · 03.07.2018, 11:29 **[ТС]**

Хорошо, лично медиа-запросами пользоваться буду редко, так как я сделал резиновую старницу, а насчёт медиа-запросов и блоков... Проще задать ширину в %, и использовать FlexBox + резину.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	27.06.2018, 14:10 [ТС]
	Чётко встаёт под размер контейнера с картинкой. Ну при уменьшении экрана всё очень плохо, уходит в право Миниатюры 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	27.06.2018, 18:09 [ТС]
	Всё сам решил 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	01.07.2018, 18:31 [ТС]
	Я просто забил, и перестал делать материал на всю страницу, и тебе не советую, а выровнить можно с помощью flexbox контейнеров , ну я уже забил, и занимаюсь другим делом. Я тут сам новичёк чтоб советовать, лучше создай тему. 0

@shao2004 0 / 0 / 0 Регистрация: 26.11.2017 Сообщений: 9
	02.07.2018, 17:28
	prizrak115, Пока вопросов нет, чтоб создавать тему для них. Думал, что вы для себя нашли решение. Вот и спросил поделиться результатом для накопления информации. При уменьшении размера экрана, думаю, можно регулировать расположение контейнера с помощью медиазапросов @media screen и т.д. 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	03.07.2018, 11:29 [ТС]
	Хорошо, лично медиа-запросами пользоваться буду редко, так как я сделал резиновую старницу, а насчёт медиа-запросов и блоков... Проще задать ширину в %, и использовать FlexBox + резину. 0