Фон заливкой по центру

@Itachi261092 · Регистрация: 23.01.2012

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

Есть <div></div> с плавающей высотой. есть нужда сделать заливку фоном, но не всего дива а только центральной части, то есть фон с отступами. никакие background-size, margin, position не помогают - либо вообще никак не меняется либо меняет положение всего div'a. Мне нужно например сделать фон через background-color: #111111 в ширину 280px и чтобы он располагался по центру дива, с отступом сверху на 30px. картинкой сделать не предлагать. кто что может посоветовать?

Добавлено через 19 минут
Если кто то может предложить другие реализации такого шаблона (прилагаю картинку) выслушаю всех.
http://ipic.lv/i4/a52e703e/ab2... review.jpg

@dolte · 15.05.2013, 15:22

сделать фон отдельным дивом.
или картинкой через repeat

@Itachi261092 · 15.05.2013, 15:43 **[ТС]**

dolte, кодом можно? я как раз сейчас пытаюсь отдельным дивом. у меня вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="content row-fluid">
        <div class="span3">
            <ul class="nav">
                <li class="active">
                    <a href="#">На главную</a>
                </li>
                <li><a href="#">Ссылка 1</a></li>
                <li><a href="#">Ссылка 2</a></li>
                <li><a href="#">Ссылка 3</a></li>
            </ul>
        </div>
    </div>

для span3 какие нужно параметры прописать чтобы он и список с меню в себе держал (получается будут за его границы выезжать) и заливку показывал

@malframe · 15.05.2013, 20:26

Код на коленке:

HTML5
1
2
3
4
5
<div class="main_div">
<div class="left">Текст слева</div>
<div class="center">Центр</div>
<div class="right">Текст справа</div>
</div>

CSS
1
2
3
4
.main_div {width: 600px; height: 900px;}
.left {float: left; width: 100px; height: 900px;}
.center {float: left;width: 300px;height:900px;background-color: #eeeeee;}
.right {float: left; width: 200px; height: 900px;}

не знаю, возможно лишнее в коде, но суть такая.

@dolte · 15.05.2013, 21:39

Накидал немного, дальше сами оптимизируйте, и переделывайте как надо

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
<html>
<head>
  <style>
body{font-family: Tahoma;}
.menu{position: relative;top: 350px;left: 350px;}
ul.menu{position: relative;background: #333333;width: 150px;height: auto;list-style: none;padding: 0px 0px 5px 0px;}
.menu li{position: relative;width: 160px;height: 25px;background: #454545;margin: 15px 0px 15px 0px;right: 15px;width: 180px;border: 1px solid transparent;}
.menu li span{position: relative;left: 50px;top: 3px}
.menu li span a{color: #fff;text-decoration:none;}
.menu li:hover span a {color:#b5d535;}
.menu li:hover{border: 1px solid #b5d535;}
.btn{background: #2F2F2F;border: 1px solid transparent;height: 32px;left: -2px;position: absolute;top: -3px;width: 32px;}
.menu li:hover .btn{border: 1px solid #b5d535;}
.head_m{position: relative;width: 182px;height: 30px;background: #454545;right:15px;}
.head_m span{position: relative; color: #fff;top: 5px;left:35px;}
  </style>
</head>
<body>
    <div id="menu">
        
    <ul class="menu">
        <div class="head_m"><span>МЕНЮ САЙТА</span></div>
        <li><div class="btn"></div><span><a href="#">Меню 1</a></span></li>
        <li><div class="btn"></div><span><a href="#">Меню 2</a></span></li>
        <li><div class="btn"></div><span><a href="#">Меню 3</a></span></li>
        <li><div class="btn"></div><span><a href="#">Меню 4</a></span></li>
    </ul>
</div>
</body>
<html>

@Itachi261092 · 17.05.2013, 14:21 **[ТС]**

dolte, огромнейшее спасибо! Вы гений! но боюсь мне придётся немного упростить схему и вместо управления цветом сделань фон и раскраску кнопок - картинками. боюсь у меня не получится иначе настроить

@dolte · 17.05.2013, 15:47

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

dolte, огромнейшее спасибо! Вы гений! но боюсь мне придётся немного упростить схему и вместо управления цветом сделань фон и раскраску кнопок - картинками. боюсь у меня не получится иначе настроить

я только предоставил пример, остальное на ваше усмотрение.

@Itachi261092 · 22.05.2013, 10:05 **[ТС]**

Для всех интересующихся новичков выкладываю то что получилось после доработки

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
  <style>
.left-menu{
    margin: 20px auto;
    background-color: #515151;
    width: 280px;
    height: 120%;
}
.left-menu ul li{
    position: relative;
    right: 35px;
    list-style-type: none;
    height: 40px;
    background-color: #444444;
    margin: 15px 0 0 0;
    width: 300px;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,1); /* Параметры тени */
}
.left-menu-head{
    position: relative;
    right: 35px;
    width: 300px;
    height: 50px;
    background: #333333;
    list-style: none;
}
.left-menu-head span{
    font-family: Tahoma, bold;
    font-size: 24px;
    color: #cccccc;
    position: relative;
    top: 15px;
    left: 25%;
}
.square{
    background-image: url("images/btn_square.png");
    height: 40px;
    position: absolute;
    width: 40px;
}
.line{
    position: absolute;
    left: 43px;
    width: 254px;
    height: 34px;
}
.left-menu li span{
    position: relative;
    left: 50px;
    top: 10px;
}
.left-menu li span a{
    font-family: Tahoma, bold;
    font-size: 18px;
    color: #cccccc;
    text-decoration:none;
}
.left-menu li:hover span a {
    color: #99cc33;
}
.left-menu li:hover .square{
    background-image: url("images/btn_square_active.png");
    border-radius: 3px;
    left: -3px;
    top: -3px;
    border: 3px solid  #99cc33;
}
.left-menu li:hover .line{
    border: 3px solid  #99cc33;
    border-left: none;
}
  </style>
</head>
<body>
   <div class="header"></div>
   <div class="content row-fluid">
        <div class="span4">
            <div class=left-menu>
                <ul>
                    <div class="left-menu-head"><span>МЕНЮ САЙТА</span></div>
                    <li><div class="square"></div><div class="line"></div><span><a href="#">Меню 1</a></span></li>
                    <li><div class="square"></div><div class="line"></div><span><a href="#">Меню 2</a></span></li>
                    <li><div class="square"></div><div class="line"></div><span><a href="#">Меню 3</a></span></li>
                    <li><div class="square"></div><div class="line"></div><span><a href="#">Меню 4</a></span></li>
                </ul>
            </div>
        <div class="span8 ">КОНТЕНТ</div>
    </div>
</body>
<html>

*прим. автора:

Вёрстка на бутстрапе. все стили отсутствующие в CSS но имеющиеся в html можно найти в оригинальном twitter.bootstrap
картинки добавленные в шаблон это квадратики со стрелкой вырезанные из дизайна. соответственно не_активный с серой стрелкой, активный с зелёной. при желании можно обойтись даже без этих картинок, залить див фоном, и добавить в спан символ открытой скобки большого размера и менять его цвет при выделении мышью

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью в конфигурации КА2. Данные берутся из регистра сведений, по. . .

@Itachi261092 Веб-Разработчик 82 / 82 / 9 Регистрация: 23.01.2012 Сообщений: 702

	Фон заливкой по центру 15.05.2013, 14:42. Показов 3051. Ответов 7 Метки нет (Все метки) Есть <div></div> с плавающей высотой. есть нужда сделать заливку фоном, но не всего дива а только центральной части, то есть фон с отступами. никакие background-size, margin, position не помогают - либо вообще никак не меняется либо меняет положение всего div'a. Мне нужно например сделать фон через background-color: #111111 в ширину 280px и чтобы он располагался по центру дива, с отступом сверху на 30px. картинкой сделать не предлагать. кто что может посоветовать? Добавлено через 19 минут Если кто то может предложить другие реализации такого шаблона (прилагаю картинку) выслушаю всех. http://ipic.lv/i4/a52e703e/ab2... review.jpg 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,224
	15.05.2013, 15:22
	сделать фон отдельным дивом. или картинкой через repeat 1

@Itachi261092 Веб-Разработчик 82 / 82 / 9 Регистрация: 23.01.2012 Сообщений: 702
	17.05.2013, 14:21 [ТС]
	dolte, огромнейшее спасибо! Вы гений! но боюсь мне придётся немного упростить схему и вместо управления цветом сделань фон и раскраску кнопок - картинками. боюсь у меня не получится иначе настроить 0