Верстка сложного фона

02.12.2011, 03:00. **Показов** 4540. **Ответов** 3

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

Привет.
Возникла проблема с версткой, целый день мучаюсь.
Суть в следующем, мне надо сделать страницу с фоном, состоящим из 3х частей, середина должна быть резиновой. Можно было бы не париться и запилить таблицу из 3 строк, но данный метод мне не подходит. Верстку дивами начал недавно осваивать, поэтому, я может что-то не досмотрел.
Вот примерная схема требуемого решения.
Название: filedquestionjpg.jpg
Просмотров: 715

Размер: 6.3 Кб

Название: filedquestionjpg.jpg
Просмотров: 715

Размер: 6.3 Кб

Кто чем подскажет? Спасибо заранее.

02.12.2011, 05:28

Может один из способов Вам поможет
http://zodios.net/htmlcss/downfooter.html

@Xander Bass · 02.12.2011, 08:07

В своё время делал сайт своего игрового клана (faniar.xbworld.org). Так вот там была похожая проблема. Решил следующим способом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="block">
  <div class="block-layer">
    <div class="block-lt">
      <div class="block-rb">
        <div class="block-inner">
CONTENT
        </div>
      </div>
    </div>
  </div>
</div>

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
div.block { padding: 40px 80px; margin: 10px 0; }
div.block-comp { padding: 0 80px; }
 
div.block-layer {
 overflow: visible;
 background: url('/dot.png');
 border: 1px solid rgb(200,220,255);
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 box-shadow: 0 0 10px rgb(200,220,255);
 -moz-box-shadow: 0 0 10px rgb(200,220,255);
 -webkit-box-shadow: 0 0 10px rgb(200,220,255);
}
 
div.block-comp div.block-layer { padding: 10px; }
 
div.block-lt {
 background: url('corn_a_lt.png') no-repeat left top;
 position: relative;
 left: -80px;
 top: -40px;
}
div.block-rb {
 background: url('corn_a_rb.png') no-repeat right bottom;
 position: relative;
 left: 160px;
 top: 80px;
}
div.block-inner { 
 position: relative;
 left: -80px;
 top: -40px;
 padding: 40px 60px;
}

Здесь dot.png - полупрозрачная точка фона блока, corn_a_lt.png - рисунок левого верхнего уголка, corn_a_rb.png - рисунок правого нижнего уголка. Естественно размеры надо подгонять под рисунки. А так сам блок прекрасно резинится. Иллюстрацией работы данного метода может послужить адрес выше.

@Taras_Z · 02.12.2011, 09:38

Сообщение от Xander Bass

В своё время делал сайт своего игрового клана (faniar.xbworld.org). Так вот там была похожая проблема. Решил следующим способом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="block">
  <div class="block-layer">
    <div class="block-lt">
      <div class="block-rb">
        <div class="block-inner">
CONTENT
        </div>
      </div>
    </div>
  </div>
</div>

Код 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 div.block { padding: 40px 80px; margin: 10px 0; } div.block-comp { padding: 0 80px; } div.block-layer { overflow: visible; background: url('/dot.png'); border: 1px solid rgb(200,220,255); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 10px rgb(200,220,255); -moz-box-shadow: 0 0 10px rgb(200,220,255); -webkit-box-shadow: 0 0 10px rgb(200,220,255); } div.block-comp div.block-layer { padding: 10px; } div.block-lt { background: url('corn_a_lt.png') no-repeat left top; position: relative; left: -80px; top: -40px; } div.block-rb { background: url('corn_a_rb.png') no-repeat right bottom; position: relative; left: 160px; top: 80px; } div.block-inner { position: relative; left: -80px; top: -40px; padding: 40px 60px; }

Здесь dot.png - полупрозрачная точка фона блока, corn_a_lt.png - рисунок левого верхнего уголка, corn_a_rb.png - рисунок правого нижнего уголка. Естественно размеры надо подгонять под рисунки. А так сам блок прекрасно резинится. Иллюстрацией работы данного метода может послужить адрес выше.

да попробуй так у меня сайт тоже такойи норм

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Boozy

	Верстка сложного фона 02.12.2011, 03:00. Показов 4540. Ответов 3 Метки нет (Все метки) Привет. Возникла проблема с версткой, целый день мучаюсь. Суть в следующем, мне надо сделать страницу с фоном, состоящим из 3х частей, середина должна быть резиновой. Можно было бы не париться и запилить таблицу из 3 строк, но данный метод мне не подходит. Верстку дивами начал недавно осваивать, поэтому, я может что-то не досмотрел. Вот примерная схема требуемого решения. Кто чем подскажет? Спасибо заранее.

rhineheart
	02.12.2011, 05:28
	Может один из способов Вам поможет http://zodios.net/htmlcss/downfooter.html