Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
shmdarya
0 / 0 / 0
Регистрация: 31.10.2016
Сообщений: 72
1

Фиксированная шапка сайта с логотипом и горизонтальным меню

11.11.2016, 15:45. Просмотров 1824. Ответов 1
Метки нет (Все метки)

Здравствуйте!
Проблема состоит в следующем:
Ширина страницы 1980px, ширина заполняемого контента 1168px, он находится строго по середине. Необходимо зафиксировать шапку сайта с логотипом и горизонтальным меню, так чтобы, логотип был прижат к левой части контента, а горизонтальное меню к правой. Значение position:fixed не помогает, и логотип и меню оказываются в куче.
Помогите пожалуйста.
HTML5
1
2
3
4
5
6
7
8
9
10
11
<section class="section">
    <div class="center">
    <nav>
        <ul class="menu">
            <li><a href="#">МЕНЮ</a></li>
            <li><a href="#">МЕНЮ</a></li>
            <li><a href="#">МЕНЮ</a></li>
            <li><a href="#">МЕНЮ</a></li>
            <li><a href="#">МЕНЮ</a></li>
        </ul>
    </nav>
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
.section {
    width: 1920px;
    height: 750px;
    background: url("images/header-backgroudn.jpg");
    color: white;
}
 
.center {
    width: 1168px;
    margin: 0 auto;
    height: auto;
}
 
nav {
    background: url("images/logo.png")no-repeat;
    width: 200px;
    height: 200px;
}
 
.menu {
    position: absolute;
    float: left;
}
 
ul li {
    display: inline-block;
    list-style-type: none;
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.11.2016, 15:45
Ответы с готовыми решениями:

Фиксированная шапка сайта
есть сайт elo-boost.ru Подскажите как сделать фиксированную шапку как тут...

Фиксированная шапка
Добрый день! Я новечек, пытаюсь сделать фиксированную шапку с прокруткой....

Фиксированная шапка
Как сделать шапку фиксированной? Вот код: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;...

Фиксированная шапка большой таблицы
Здравствуйте. Не могу решить казалось бы простую задачу.. Имеется большая...

Шапка резиновая и фиксированная - реал?
Шапка сайта, без JQ-наворотов - должна быть резиновой и фиксированной (при...

1
mrtoxas
Модератор
Эксперт HTML/CSS
2595 / 1919 / 1194
Регистрация: 12.07.2015
Сообщений: 5,137
Записей в блоге: 3
11.11.2016, 16:27 2
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.section {
  width: 1920px;
  border: 1px solid black;
}
.center {
  width: 1168px;
  margin: 0 auto;
  overflow: hidden;
}
.logo {
  float: left;
}
.menu {
  float: right;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.menu li {
  float: left;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header class="section">
  <div class="center">
    <div class="logo">
      <a href="#"><img src="#" alt="logo" /></a>
    </div>
    <nav>
      <ul class="menu">
        <li><a href="#">МЕНЮ</a></li>
        <li><a href="#">МЕНЮ</a></li>
        <li><a href="#">МЕНЮ</a></li>
        <li><a href="#">МЕНЮ</a></li>
        <li><a href="#">МЕНЮ</a></li>
      </ul>
    </nav>
  </div>
</header>
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.11.2016, 16:27

Фиксированная (плавающая) шапка и скролинг
Доброго времени суток. Такой вопрос: фиксированную шапку я сделал но нужно...

Меню с логотипом посредине
Доброго времени суток! Ребятуши, помогите. Озадачился проблемой при верстке...

позиционирование меню под логотипом
Здравствуйте, есть логотип на ширина 1000 пикс, высота 200 пикс, под ним есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru