Фиксированное меню навигации

@The_Fat_Man · Регистрация: 04.03.2014

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

Доброго времени суток! У меня сбоку есть блок фиксированной ширины, в нем элементы header и footer. Проблема такая, что когда увеличиваешь масштаб страницы, то пункты из раздела навигационного меню из-за увеличения шрифта уползают вниз, за монитор, а т.к. блок у нас фиксированный, то естественно и нет возможности на них покликать, только если обратно уменьшить масштаб. Очень хочется знать, можно ли как-то эту проблему решить или как тогда делают менюшки такого типа. P.S. Заранее огромное спасибо!

Код файла index.html:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Maket</title>
    
        <link rel="stylesheet" href="css/new_elements.css">
        <link rel="stylesheet" href="css/style.css">
        
        <script>
            document.createElement('header');
            document.createElement('nav');
            document.createElement('article');
            document.createElement('footer');
            document.createElement('aside');
        </script>
    </head>
    
    <body>
        <div id="header_container">
            <header>
                <div id="logo_container">
                    <a href="index.html">
                        <img src="img/bmw.png" alt="bmw_logo">
                    </a>
                </div>
            
                <nav>   
                    <ul>
                        <li><span><a href="">Пункт 1</a></span></li>               
                        <li><span><a href="">Пункт 2</a></span></li>
                        <li><span><a href="">Пункт 3</a></span></li>
                        <li><span><a href="">Пункт 4</a></span></li>
                        <li><span><a href="">Пункт 5</a></span></li>
                        <li><span><a href="">Пункт 6</a></span></li>
                        <li><span><a href="">Пункт 7</a></span></li>
                    </ul>
                </nav>
            </header>
            
            <footer>
                <p><small>07.10.2014</small></p>
 
                <p>
                    <small>
                        <a href="http://www.bmw.com/com/en/" title="BMW Company" target="_blank">BMW Company</a>
                    </small>
                </p>
            </footer>
        </div>  
    </body> 
</html>

Код файла new_elements.css:

CSS
1
2
3
4
5
6
7
header, nav, footer, article {
    display: block;
}
 
footer {
    clear: both;
}

Код файла style.css:

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
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
* {
  padding: 0;
  margin: 0;
}
 
body {
    min-width: 980px;
    max-width: 2000px;
    margin: 0 auto;
}
 
#header_container {
    width: 22%;
    float: left;
    background-color: #ecebe9;
    font-size: 0.9em;
    position: fixed;
    height: 100%;
}
 
header {
    padding-top: 25%;
    padding-bottom: 1%;
}
 
header a {
    text-decoration: none;
    color: #323236; 
}
 
header a img {
    border: none;
}
 
#logo_container {
    text-align: center;
    margin-bottom: 4%;
}
 
#logo_container img {
    width: 60%;
}
 
header nav {
    margin-top: 0%;
}
 
header nav ul {
    list-style: none;
}
 
header nav ul li {
    text-align: center;
    margin-bottom: 7%;
    padding: 0 2% 0 2%;
}
 
header nav ul li a:hover {
    color: #b05e27;
    font-size: 1.1em;
}
 
header nav ul li a img {
    width: 2em;
}
 
footer {
    text-align: center;
    background-color: red;
}
 
footer a {
    color: #000000;
}

@Fedor92 · 07.10.2014, 14:32

В нэте есть js- код по масштабированию шрифта...

@The_Fat_Man · 07.10.2014, 20:11 **[ТС]**

Спасибо за наводку! Воспользовался jquery.fittext.js.

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

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	07.10.2014, 14:32
	В нэте есть js- код по масштабированию шрифта... 1

@The_Fat_Man 10 / 10 / 3 Регистрация: 04.03.2014 Сообщений: 140
	07.10.2014, 20:11 [ТС]
	Спасибо за наводку! Воспользовался jquery.fittext.js. 0