Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
unoduetre
0 / 0 / 0
Регистрация: 10.11.2017
Сообщений: 17
1

Фиксированное меню/шапка/блочный элемент

18.11.2017, 01:15. Просмотров 157. Ответов 5
Метки нет (Все метки)

Здравствуйте,
подскажите, пожалуйста, как блок с position:fixed уместить в размер родительского блока.
Что-то вроде этого:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
.container{
width: 800px;
margin: 0 auto;}
.navbar {
  background-color: #333;
  position: fixed;
  top: 0;  
  height:100px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.11.2017, 01:15
Ответы с готовыми решениями:

Фиксированное меню
Всем, доброго времени суток. Столкнулся с такой проблемой, при попытке изменить...

Фиксированное меню
Доброе время суток! Это мой первый опыт в разработке сайтов, можете,...

Прокручиваемое фиксированное меню
Здравствуйте, не могу понять как сделать прокручиваемое фиксированное меню, так...

Фиксированное меню съезжает
Фиксированное меню с кнопками съезжает при выводе новостей, может кто помочь?...

Сделать фиксированное меню
в хроме тут https://stopskvoz.ru/ прилипающее меню пропадает а тут...

5
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
18.11.2017, 09:46 2
Никак, фиксированный элемент позиционируется относительно окна браузера.
Либо с помощью JS можно попробовать считывать ширину родителя и задавать ее фиксированному элементу. Но это уже костыли и издевательство над элементом
0
unoduetre
0 / 0 / 0
Регистрация: 10.11.2017
Сообщений: 17
18.11.2017, 15:38  [ТС] 3
а какими тогда методами делают фиксированное меню для сайта с заданной шириной(меньше ширины экрана)?
Это ведь часто встречается. Можно как-то без position: fixed; обойтись?
0
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
18.11.2017, 15:57 4
Да такими же как и с остальными блоками, задать нужную ширину фиксированному блоку никто не мешает, нельзя только средствами css ограничить его шириной родителя. Просто нужно учитывать что если размеры для блока с position:fixed; задавать в процентах, то они будут рассчитываться от размеров window
0
shvyrevvg
547 / 515 / 261
Регистрация: 12.05.2016
Сообщений: 1,493
18.11.2017, 17:39 5
unoduetre, в div с position: fixed можно также поместить div с margin-left/right: auto, который будет выравнивать по центру контент.
0
unoduetre
0 / 0 / 0
Регистрация: 10.11.2017
Сообщений: 17
18.11.2017, 22:30  [ТС] 6
Спасибо всем. Вложила меню в фиксированный контейнер заданной ширины.
shvyrevvg, центрировать блок или содкржимое опцией margin: 0 auto; не получается. Я использовала комбинацию: left: 50%; transform: translateX(-50%);
Вот так получилось:
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
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0; }
.container{
 width: 1000px;
 margin: 0 auto;
}
 #nav{ 
position: fixed;   
top: 0; 
left: 50%;
transform: translateX(-50%); 
}    
.navbar {   
  overflow: hidden;
  background-color: #333; 
  width: 100%;
}
 
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
 
.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>
<div id="nav" class="container">
    <div class="navbar">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
    </div>
</div>
 
<div class="container">
    <div class="main">
      <h1>Fixed Top Menu</h1>
      <h2>Scroll this page to see the effect</h2>
    </div>
</div>
</body>
</html>
0
18.11.2017, 22:30
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.11.2017, 22:30

Фиксированное горизонт. меню
Всем доброго дня! Сделал сайт с помощью бутстрапа http://silkhair.in.ua/....

Фиксированное меню в CSS
Здравствуйте. Знаний CSS нет. Делаю сайт в онлайн системе создания сайтов....

Фиксированное меню навигации
Доброго времени суток! У меня сбоку есть блок фиксированной ширины, в нем...


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

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

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