Контент по центру а фон на всю ширину

@drakonolom · Регистрация: 18.11.2012

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

Привет!
Чет я пропустил урок по этой теме, короче объясните как сделать следующее:

Картинка сайта [del]

Нужно чтобы любой контент который я буду вставлять в сайт находился в полях красного цвета.
Я смастерил так - обернул черный хэдер в див у которого 100% ширина и черный бэкграунд но так как такое нужно будет проделывать с каждым элементом в котором есть контент я думаю это очень плохое решение данной проблемы.
Посоветуйте как лучше?

@andyyy · 19.07.2017, 14:31

Например так

CSS
1
2
3
html {background: red;}
 
body {background: yellow; margin-left: 20%; margin-right: 20%;}

@drakonolom · 19.07.2017, 14:47 **[ТС]**

[del]

Не, это не то. Нужно чтоб все эти текста, ссылки были в красной области а бэкграунд колор был во всю ширину экрана. Как шапка в Вк

Я тут так по сайтам полазил, в коде как делал и я - обертывание с помощью дива и наложение на него бэкграунда и т.д. Может быть это и правильно, не знаю...

@andyyy · 19.07.2017, 14:52

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

не, это не то. Нужно чтоб все эти текста, ссылки были в красной области а бэкграунд колор был во всю ширину экрана. Как шапка в Вк

у меня красная это цельный фон, вы там хотите чтобы ссылки были или в желтом квадрате?

По вашей ссылке тоже самое примерно просто цветов больше

@drakonolom · 19.07.2017, 15:03 **[ТС]**

не, совсем не то что нужно. Вы мне просто дали код который делает фон на целом хтмл документе - красным а боди сузили на 20 процентов с права и лева. Мне нужно просто чтобы бэкграунд дивов с контентом был 100% ширины а сам контент был в (допустим) 930пикселей по середине экрана, понятно?

@AlexZaw · 19.07.2017, 17:04

HTML5
1
2
3
4
5
6
7
<div class="outer">
  <div class="inner">
    <input type="search">
     <input type="button" class="log" value="Login">
     <input type="button" class="reg" value="Register">
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.outer{
  background-color: #000;
  padding:10px;
}
.inner{
  max-width:500px;
  margin:0 auto;
  overflow:hidden;
}
 
input[type="button"]{
  float:right;
}

@SiarheiSiarhei · 20.07.2017, 10:23

Нужно чтобы любой контент который я буду вставлять в сайт находился в полях красного цвета.
между шапкой и ботиками - слой.. движение по гор.

CSS
1
2
3
4
5
6
7
8
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
}

Добавлено через 1 минуту
вертикали...

CSS
1
2
3
4
5
6
7
8
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

@andyyy · 20.07.2017, 11:34

я лично не понял, извиняюсь((( нарисуйте конкретно в фотошопе все! Если хотите

@AlexZaw · 20.07.2017, 12:15

да обычный вложенный блок с маржин 0 auto ему нужен

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка 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 и т. д. Сборка примера Скачайте. . .

@drakonolom 0 / 0 / 1 Регистрация: 18.11.2012 Сообщений: 75

	Контент по центру а фон на всю ширину 19.07.2017, 14:26. Показов 4975. Ответов 8 Метки css, header, html, width (Все метки) Привет! Чет я пропустил урок по этой теме, короче объясните как сделать следующее: Картинка сайта [del] Нужно чтобы любой контент который я буду вставлять в сайт находился в полях красного цвета. Я смастерил так - обернул черный хэдер в див у которого 100% ширина и черный бэкграунд но так как такое нужно будет проделывать с каждым элементом в котором есть контент я думаю это очень плохое решение данной проблемы. Посоветуйте как лучше? 0

@drakonolom 0 / 0 / 1 Регистрация: 18.11.2012 Сообщений: 75
	19.07.2017, 14:47 [ТС]
	[del] Не, это не то. Нужно чтоб все эти текста, ссылки были в красной области а бэкграунд колор был во всю ширину экрана. Как шапка в Вк Я тут так по сайтам полазил, в коде как делал и я - обертывание с помощью дива и наложение на него бэкграунда и т.д. Может быть это и правильно, не знаю... 0

@drakonolom 0 / 0 / 1 Регистрация: 18.11.2012 Сообщений: 75
	19.07.2017, 15:03 [ТС]
	не, совсем не то что нужно. Вы мне просто дали код который делает фон на целом хтмл документе - красным а боди сузили на 20 процентов с права и лева. Мне нужно просто чтобы бэкграунд дивов с контентом был 100% ширины а сам контент был в (допустим) 930пикселей по середине экрана, понятно? 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	20.07.2017, 11:34
	я лично не понял, извиняюсь((( нарисуйте конкретно в фотошопе все! Если хотите 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	20.07.2017, 12:15
	Сообщение было отмечено drakonolom как решение Решение да обычный вложенный блок с маржин 0 auto ему нужен 0

Контент по центру а фон на всю ширину

Решение