Смещение фона в <li>

@SLameN · Регистрация: 29.10.2012

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

Как сделать чтобы у Заголовка - class="nav_active" был фон смещенный влево?
Название: Снимок.PNG
Просмотров: 9

Размер: 5.7 Кб

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="nav_home" style="margin: 0;">
        <ul>
            <li class="nav_active">Заголовок</li></li>
            <li><a href="#">Тест1</a></li>
        </ul>    
    </div>
 
<div id="nav_home" style="margin: 0;">
        <ul>
            <li class="nav_active">Заголовок</li></li>
            <li><a href="#">Тест1</a></li>
        </ul>    
    </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
37
38
39
#nav_home {
        border: 0px solid #ccc;
        float: left;
        list-style: none;
        font-family: Trebuchet MS;
        font-size: 13px;
        width: 229px;
        margin: 0 17px 20px 0px;
        height: 300px;
}
    
    .nav_active {
        background-repeat: no-repeat;
        color: #fff;
        padding: 5px 20px;
    }
    
    #nav_home ul {
        display: inline-block;
    }
    
    #nav_home li {
        float: left;
        position: relative;
        display: block;
        text-align: left;
        margin: 0 0 1px -40px;
        width: 229px;
    }
    
    #nav_home li a {
        display: block;
        color: #333;
        background-repeat: no-repeat;
        background-position: right;
        background-color: #eee;
        text-decoration: none;
        padding: 10px 20px;
    }

@whiteapps · 26.06.2015, 14:29

SLameN,
попробуйте примерно так

CSS
1
2
        position: relative;
        left: -30px;

либо просто

CSS
1
margin: 0  0 0 -30px;

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .