Расположить меню в шапке

@Teshuhack · Регистрация: 25.07.2015

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

Здравствуйте! Верстаю шаблон по макету. Нужно разместить меню внутри шапки. Не совсем получается это сделать.
Стоит оборачивать заголовок и меню в отдельный блок?

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <title>Document</title>
</head>
 
<body>
    <header>
        <p>
            <span class="titleFirstWord">HAPPY</span>
            <span class="titleSecondWord">HANDYMAN</span>
        </p>
        <span class="underTitleText">PROFESSIONAL REPAIR SERVICES</span>
        <nav>
            <ul>
                <li>HOME PAGE
                    <br>
                    <span class="underMenuText">WELCOME</span>
                </li>
                <li>ABOUT US
                    <br>
                    <span class="underMenuText">WHO WE ARE</span>
                </li>
                <li>SERVICES
                    <br>
                    <span class="underMenuText">WHAT WE DO</span>
                </li>
                <li>TIPS n IDEAS
                    <br>
                    <span class="underMenuText">DO-IT-YOURSELF</span>
                </li>
                <li>CONTACT US
                    <br>
                    <span class="underMenuText">CALL FOR HELP</span>
                </li>
            </ul>
        </nav>
    </header>
 
 
</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
body {
  background-image: url("../images/pattern.png");
  margin: 0 125px 0 125px;
}
 
header {
  background-color: #ffcccc;
  width: 100%;
  height: 160px;
  float: left;
}
 
p {
  font-family: DINEngschriftStd;
  font-size: 30pt;
  margin: 60px 0 0 80px;
}
 
nav {
  float: right;
  margin-right: 25px;
  height:auto;
  width:auto;
  position: absolute;
  top:40px;
  right:100px;
}
 
ul li {
  display: inline-block;
  margin: 0 30px 0 0;
  font-family: KlavikaMedCaps-SC;
  font-size: 12pt;
  color: #32383a;
}
 
.underMenuText {
  font-family: DINMittelschriftStd;
  font-size: 8pt;
  color: #8d9799;
}
 
.titleFirstWord {
  color: #088f95;
}
 
.titleSecondWord {
  color: #fdaa04;
}
 
.underTitleText {
  font-family: DINMittelschriftStd;
  font-size: 10.5pt;
  color: #8d9799;
  margin: 0 0 0 80px;
}

Архивы с макетом и тем, что получилось прикрепляю.

@Freeze_Breeze · 09.03.2018, 22:24

Teshuhack, а что именно не получается?

@Freeze_Breeze · 09.03.2018, 22:34

Ну вот такая вложенность спан элементов в параграфы, это конечно, не есть гуд. Менюшка тоже стремновато сделана, а именно абсолютное позиционирование и две эти строчки width: auto и height: auto, если нужно то используй процентное отношение и свойства различного рода display: inline-block, vertical-align: middle, почитайте про них.

Новые блоги и статьи Все статьи Все блоги /
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 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.03.2018, 22:24
	Teshuhack, а что именно не получается? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.03.2018, 22:34
	Ну вот такая вложенность спан элементов в параграфы, это конечно, не есть гуд. Менюшка тоже стремновато сделана, а именно абсолютное позиционирование и две эти строчки width: auto и height: auto, если нужно то используй процентное отношение и свойства различного рода display: inline-block, vertical-align: middle, почитайте про них. Миниатюры 0