Связать <body> и <wrapper>

@Sp · Регистрация: 02.11.2009

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

Здравствуйте!
Подскажите как связать <body> и <wrapper>

Смысл такой когда браузер развернут все нормально рис-2, когда растянут обертка (розовая линия) уходит рис-1

Если можно подскажите где куда и что вставить, чтобы обертка была всегда по центру.

Заранее благодарен.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мир красоты</title>
<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css"> 
</head>
 
<body> 
 
    <div id="wrapper"> <!--Обертка--> 
    
        <div id="header"> <!--рабочая область-->                      
        </div>              
                            
    </div>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
margin:0;
padding:0;
width:100%;
height:100%;
background-image:url(../img/bok.jpg);
background-repeat:no-repeat;
background-color:#000000;
background-position:center top;
background-attachment: fixed;
min-width:1024px;
max-width:1600px;
min-height:768px;
 
}
 
div#wrapper{
width:1000px;
height:768px;
background:100% 100% ;
border: 5px solid #FF00AE;
margin:0 auto;
}

@xaus · 08.02.2013, 21:45

попробуй все в один див, обертку и раб.область, обертку под стиль запили.

@Sp · 09.02.2013, 00:23 **[ТС]**

Спасибо, но если не сложно, можно написать код, а то я после книг и опробывания всего что можно не могу понять как это писать.

Заранее благодарен.

Добавлено через 36 минут
Так у меня рабочая область не задействована. У меня именно обертка уходит. Я рабочую область убирал полностью эффект тот же.

Добавлено через 1 час 55 минут
И еще интересно при открытии в браузере обертка становится в середину тела, а при растягивании смещается в крайний левый край почему так происходит???

@sheila · 09.02.2013, 03:06

смущает строчка

CSS
1
background:100% 100% ;

, сама по себе странная и точка с запятой поставлена через пробел - это может вызывать проблемы в макете.
нет доктайпа

HTML5
1
2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

margin и padding лучше присвоить всему документу

CSS
1
2
3
4
5
6
7
8
9
* {
margin: 0; 
padding: 0; }
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}

wrapper безопаснее написать так

CSS
1
2
3
4
5
6
7
8
div#wrapper{
width:1000px;
margin:0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
border: 5px solid #FF00AE;
}

не знаю, насколько это правильно, но у меня при таком коде во всех браузерах все на месте

Добавлено через 1 минуту
вот здесь можно сгенерировать любой макет и проверить, в чем ошибка

@Sp · 09.02.2013, 11:25 **[ТС]**

Не у меня не получилось съезжает.

Добавлено через 1 час 54 минуты
В общем так заработало.

Единственное не раздул ли я код???

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мир красоты</title>
<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css"> 
</head>
 
<body> 
 
    <div id="wrapper"> <!--Обертка--> 
    
        <div id="header"> <!--рабочая область-->                      
        </div>              
                            
    </div>
 
</body>
</html>

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
html,body {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
background-color:#000000;
}
 
div#wrapper  {
margin:0 auto;
padding:0;
width:100%;
height:100%;
background-image:url(../img/bok.jpg);
background-repeat:no-repeat;
background-color:#000000;
background-position:center top;
background-attachment: fixed;
min-width:1024px;
max-width:1600px;
min-height:768px;
overflow:auto;
 
}
 
div#header {
margin:0 auto;
padding:0;
width:1000px;
height:768px;
border: 2px solid #D0FF00; /*желтая*/
}

@sheila · 09.02.2013, 14:31

background можно покороче

CSS
1
background:#000000 url(../img/bok.jpg) no-repeat fixed center top;

подробнее тут
при

CSS
1
overflow:auto;

появится нижний скролл, лучше

CSS
1
overflow:hidden;

link лучше написать строчными, подробнее здесь

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты 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 - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@xaus 10 / 10 / 0 Регистрация: 30.01.2013 Сообщений: 93
	08.02.2013, 21:45
	попробуй все в один див, обертку и раб.область, обертку под стиль запили. 1

@Sp 5 / 5 / 2 Регистрация: 02.11.2009 Сообщений: 236 Записей в блоге: 1
	09.02.2013, 00:23 [ТС]
	Спасибо, но если не сложно, можно написать код, а то я после книг и опробывания всего что можно не могу понять как это писать. Заранее благодарен. Добавлено через 36 минут Так у меня рабочая область не задействована. У меня именно обертка уходит. Я рабочую область убирал полностью эффект тот же. Добавлено через 1 час 55 минут И еще интересно при открытии в браузере обертка становится в середину тела, а при растягивании смещается в крайний левый край почему так происходит??? 0