Как спозиционировать меню вниз шапки?

@emin313 · Регистрация: 05.10.2010

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

скачал скрипт для футера в него встроил шапку а в ней хочу меню внизу шапки но она криво встаёт почему то

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
<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Главная</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
    <div class="wrap">
    <header>
    <img src="img/logo.png">
 
    <div class="menu">
            <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">???????</a></li>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Гавная</a></li>
            </ul>
    </div>
    
    </header>
    <div rel="main">
    <div class="block-news"><div class="block2">
    </div>
    <div class="block1">
    </div>
        </div>
     <footer>
     </footer>
     </div>
<body>
</body>
</html>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
*
{
    margin:0;
    padding:0;
}
 
 
html,
 
 
 
body
 {
  width: 100%;
  background-color: #fff;
}
 
.wrap {
  width: 100%;
  margin: auto;
  background-color: #fff;
}
 
.wrap footer {
  background-color: #00979d;
}
 
html,
body {
  height: 100%;
}
.wrap {
  min-height: 100%;
  position: relative;
}
.wrap [rel="main"] {
  padding-bottom: 100px;
}
.wrap footer {
  position: absolute;
  width:100%;
  height: 100px;
  left: 0;
  bottom: 0;
}
header
{
    width:100%;
    height:160px;
    background-color:#00979d;
    position:relative;
 
}
 
header img
{
    padding:10px 60px;
}
.menu
{
    width:100%;
    position:absolute;
    bottom:0;
 
}
.menu ul
{
    list-style:none;
    padding:0 60px;
}
.menu li
{
    display:block;
    float:left;
    font-family:Arial,sans-serif;
    font-size:13px;
 
}
.menu li a
{
    color:#FFFFFF;
    text-decoration:none;
    padding:10px 15px;
}
.menu li a:hover
{
    background-color:#008184;
    bottom:0;
    
}
 
.clear
{
    clear:both;
}
 
 
.block-news
{
    overflow:hidden;
    margin:10px 60px;
    background-color:#A11dA8;
    width:auto;
    height:500px;
}
.block1
{
    background-color:#9A1A1D;
    height:200px;
    width:400px;
}
.block2
{
    background-color:#9Aff1D;
    height:200px;
    width:400px;
}

@Анар · 11.12.2015, 05:52

emin313, где скрипт-то? Меню выходит за границы шапки потому что к нему применяется "user agent styleheet". Просто замените в:

CSS
1
2
3
4
5
.menu {
    width: 100%;
    position: absolute;
    bottom: 0;
}

bottom с 0 на 10px или на побольше, по вкусу.

<body></body> на на 31-32 строке, ай яй яй!

@emin313 · 11.12.2015, 06:42 **[ТС]**

Анар, да спасибо я уже нашёл это)) но вопрос ещё вот какой как можно сделать блоки допустим в div ещё 3 дива по 400 на 400 пх и стали горизонтально без съезжания фотера а то прописываю float:left и футер съезжает с низу и где то в середине сайта находится

@Анар · 11.12.2015, 06:57

emin313, саму логику вёрстки лучше поменять. Могу посоветовать писать каркас так:

HTML5
1
2
3
<div class="header">шапка</div>
<div class="content">блок контента</div>
<div class="footer">футер</div>

Позиционировать сперва их, а потом внутри каждого блока вставлять следующий каркас. Позиционировать в итоге получается проще, т.к. обычно весь сайт не уезжает.

@emin313 · 11.12.2015, 09:32 **[ТС]**

Анар, место новых тегов html использовать простые дивы? или вообще полностью переделывать сайт?

@GoDr · 11.12.2015, 09:38

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

Анар, место новых тегов html использовать простые дивы?

по желанию

Но Мир (и логика HTML5) движется к "семантике"

@emin313 · 11.12.2015, 10:36 **[ТС]**

GoDr, просто я не понял надо заново писать код или что?

@GoDr · 11.12.2015, 11:24

заново не надо. А когда будешь менять, то лучше прислушаться к HTML5

например, как-то так

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
<!doctype html>
<html lang="ru">
<head>
    <meta charset="windows-1251">
    <title>Главная</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<div class="wrap">
    <header>
        <img src="img/logo.png">
 
        <nav class="menu">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">???????</a></li>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Гавная</a></li>
            </ul>
        </nav>
    </header>
 
    <section class="block-news">
        <article class="block2"></article>
        <article class="block1"></article>
    </section>
 
    <footer>
        <adress></adress>
    </footer>
</div>
 
</body>
</html>

@emin313 · 11.12.2015, 22:12 **[ТС]**

GoDr, да это я понял но 1 но у меня блок футера съезжает при попытке сделать горизонтально блоки в боке новости

@GoDr · 12.12.2015, 14:13

emin313, ты как-то своеобразно вопросы задаёшь... многое не понятно

Надеюсь что я отгадал что ты хочешь...

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="ru">
<head>
    <meta charset="windows-1251">
    <title>Главная</title>
    <style>
        /* Разметка
        ****************************************/
        .wrap {
            width: 100%;
 
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
 
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
 
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
 
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-align-content: stretch;
 
        }
 
        .block-news {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
        }
 
        /* цвета
        *************************/
        .wrap {
            background-color: #fff;
 
        }
 
        .block-news {
            background-color: #A11dA8;
        }
 
        .block1 {
            background-color: #9A1A1D;
        }
 
        .block2 {
            background-color: #9Aff1D;
        }
 
        header {
            background-color: #00979d;
        }
 
        footer {
            background-color: #00979d;
        }
 
        /** Настройки
        ******************************/
        header {
            width: inherit;
            height: 160px;
        }
 
        .block-news {
            width: inherit;
            height: 500px;
 
        }
 
        .block1 {
            height: 200px;
            width: 400px;
        }
 
        .block2 {
            height: 200px;
            width: 400px;
        }
 
        footer {
            height: 100px;
            width: inherit;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
 
<body>
 
<div class="wrap">
    <header>
        <img src="img/logo.png">
 
        <nav class="menu">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">???????</a></li>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Гавная</a></li>
            </ul>
        </nav>
    </header>
 
    <section class="block-news">
        <article class="block2">block2</article>
        <article class="block1">block1</article>
    </section>
 
    <footer>
        footer
    </footer>
</div>
 
</body>
</html>

Добавлено через 1 минуту
Макет на FlexBox. На всех современных браузерах должно работать без проблем. Для старья, напихал "костыли"

Ну на Супер старье конечно не будет работать ...

Добавлено через 1 минуту
Посмотри и скажи что нужно и куда добавить/поправить?

@emin313 · 13.12.2015, 08:05 **[ТС]**

GoDr, спасибо а не проще ли сделать позиционированием ? Как выровнять блоки по горизонтали нашёл эту тему просто код немного попроще насколько она актуальна ведь в 2013 году была создана... У вас в коде многое ничего не понял просто решать за меня можно сказать медвежья услуга пока сам не пойму не будет эфкта мне ведь для свого опыта))) но большо спасибо за помощь а для чего вэбкиты эти для поддержки браузеров?

Добавлено через 2 часа 28 минут
GoDr, я заменил код вашим и ничего не понял футер съехал в середину сайта блин у меня мозг кипит вроде понимаешь логики а потом бац и встаёт вне какой либо логики

@GoDr · 13.12.2015, 09:08

emin313, почитай про FlexBox. Литература есть и нормально написана. Это очень современное направление в вёрстке. Даже Bootstrap на это переходит

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

а не проще ли сделать позиционированием ?

куда уж проще... Сама разметка всего пара строк, остальное просто настройка блоком

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

я заменил код вашим и ничего не понял футер съехал в середину сайта

ну так код покажи или картинку покажи чтобы понять что и как. Или размести код на http://jsfiddle.net/.
Конечно лучшим вариантом было бы если код был бы в сети, а не на локалке... Так можно было бы очень просто решить проблему

@emin313 · 13.12.2015, 10:25 **[ТС]**

GoDr, сначала заменил весь код вашим...потом допёр что надо применить к некоторым свойствам опять получилось не то...потом просто скриптами к HTML прописал вашь скрипт всё нормально стало но при сворачивании браузера опять кривизна получилась мне буст треп не нравится ну слишком он громоздкий FlexBox это тоже что то типа фраймворка?
но почему то позиционированием вышло куда проще....просто немного не понял ваш код наверно

@GoDr · 13.12.2015, 15:00

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

FlexBox это тоже что то типа фраймворка?

Да ты что??

это CSS... Просто верстать через flot или через всякие display: inline-block уже как-то не очень.. много "глюков"

ТЫ кинь мне архив того что у тебя получается.. я гляну и прокомментирую код.. Скорее всего проблемы то и нет, просто где-то ошибка закралась ...

@emin313 · 13.12.2015, 15:21 **[ТС]**

GoDr, я не хочу что бы за меня решали я хочу сам научится))

@GoDr · 14.12.2015, 10:08

emin313, так ты код не показываешь, а найти ошибку ментально не получается

Просишь помочь, а чем именно то?

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью 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 позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	11.12.2015, 06:42 [ТС]
	Анар, да спасибо я уже нашёл это)) но вопрос ещё вот какой как можно сделать блоки допустим в div ещё 3 дива по 400 на 400 пх и стали горизонтально без съезжания фотера а то прописываю float:left и футер съезжает с низу и где то в середине сайта находится 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	11.12.2015, 09:32 [ТС]
	Анар, место новых тегов html использовать простые дивы? или вообще полностью переделывать сайт? 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	11.12.2015, 10:36 [ТС]
	GoDr, просто я не понял надо заново писать код или что? 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	11.12.2015, 22:12 [ТС]
	GoDr, да это я понял но 1 но у меня блок футера съезжает при попытке сделать горизонтально блоки в боке новости 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	13.12.2015, 08:05 [ТС]
	GoDr, спасибо а не проще ли сделать позиционированием ? Как выровнять блоки по горизонтали нашёл эту тему просто код немного попроще насколько она актуальна ведь в 2013 году была создана... У вас в коде многое ничего не понял просто решать за меня можно сказать медвежья услуга пока сам не пойму не будет эфкта мне ведь для свого опыта))) но большо спасибо за помощь а для чего вэбкиты эти для поддержки браузеров? Добавлено через 2 часа 28 минут GoDr, я заменил код вашим и ничего не понял футер съехал в середину сайта блин у меня мозг кипит вроде понимаешь логики а потом бац и встаёт вне какой либо логики 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	13.12.2015, 10:25 [ТС]
	GoDr, сначала заменил весь код вашим...потом допёр что надо применить к некоторым свойствам опять получилось не то...потом просто скриптами к HTML прописал вашь скрипт всё нормально стало но при сворачивании браузера опять кривизна получилась мне буст треп не нравится ну слишком он громоздкий FlexBox это тоже что то типа фраймворка? но почему то позиционированием вышло куда проще....просто немного не понял ваш код наверно 0

@emin313 4 / 4 / 1 Регистрация: 05.10.2010 Сообщений: 426
	13.12.2015, 15:21 [ТС]
	GoDr, я не хочу что бы за меня решали я хочу сам научится)) 0

@GoDr 90 / 79 / 33 Регистрация: 17.08.2015 Сообщений: 512 Записей в блоге: 1
	14.12.2015, 10:08
	emin313, так ты код не показываешь, а найти ошибку ментально не получается Просишь помочь, а чем именно то? 0