нестандартное центрирование

@Heleg · Регистрация: 23.10.2011

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

верстка: фиксированный блок шапки находится по центру, причем текстура фона должна прилегать к нему справа и слева, чтобы не было видно стыков. в итоге приходится делать три блока, расположенные вряд. первый резиновый для текстуры, background-position: right. второй, собственно сама шапка. третий такой же, как первый - background-position: left. все бы ничего, но ширина шапки шире некоторых мониторов, поэтому всегда появляются полосы прокрутки. как этого избежать? может быть есть другой вариант верстки?

@Heleg · 13.07.2012, 14:23 **[ТС]**

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

Vovan-VE · 13.07.2012, 16:42

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

фиксированный блок шапки находится по центру

Т.е. его ширина == константе.

Вот такой вариант. http://jsfiddle.net/ZvLdz/

HTML5
1
2
3
4
5
6
7
<div class="screen">
    <header>
        <div class="logo"></div>
        <div class="cat left"></div>
        <div class="cat right"></div>
    </header>
</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
.screen {
    border: #ccc solid 10px;
    width: 300px;
    min-height: 400px;
    margin: 0 auto;
}
header {
    position: relative;
    overflow: hidden;
    border: #080 dashed 1px;
}
header .logo {
    width: 200px;
    height: 50px;
    background: #fee;
    border: #c00 solid 1px;
    margin: 0 auto;
}
header .cat {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    border: #00c solid 1px;
    background: #eef url('https://www.cyberforum.ru/customavatars/avatar203840_1.gif') no-repeat;
}
header .cat.left {
    right: 50%;
    margin-right: 101px; /* пол-логотипа */
    background-position: right center;
}
header .cat.right {
    left: 50%;
    margin-left: 101px; /* пол-логотипа */
    background-position: left center;
}

@Heleg · 13.07.2012, 16:53 **[ТС]**

великолепный вариант! только коты должны занимать оставшуюся часть рабочей области. в принципе им можно задать любой размер, например 100%

Vovan-VE · 13.07.2012, 17:26

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

только коты должны занимать оставшуюся часть рабочей области

Тогда на крайней стороне left/right:0 вместо ширины.

@Heleg · 13.07.2012, 22:21 **[ТС]**

учиться мне ещё и учиться

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	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 полиномов. . .

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971

	нестандартное центрирование 13.07.2012, 14:10. Показов 1230. Ответов 5 Метки нет (Все метки) верстка: фиксированный блок шапки находится по центру, причем текстура фона должна прилегать к нему справа и слева, чтобы не было видно стыков. в итоге приходится делать три блока, расположенные вряд. первый резиновый для текстуры, background-position: right. второй, собственно сама шапка. третий такой же, как первый - background-position: left. все бы ничего, но ширина шапки шире некоторых мониторов, поэтому всегда появляются полосы прокрутки. как этого избежать? может быть есть другой вариант верстки? 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	13.07.2012, 14:23 [ТС]
	для наглядности прикрепил изображение с примерной целью. серая рамка - рабочая область браузера Миниатюры 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	13.07.2012, 16:53 [ТС]
	великолепный вариант! только коты должны занимать оставшуюся часть рабочей области. в принципе им можно задать любой размер, например 100% 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	13.07.2012, 22:21 [ТС]
	учиться мне ещё и учиться 0