Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
1

Сделать главное меню по центру страницы

11.01.2019, 19:05. Показов 457. Ответов 15
Метки нет (Все метки)

Необходимо сдвинуть главное меню вправо, чтоб оно встало по центру, здесь
0
Миниатюры
Сделать главное меню по центру страницы  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2019, 19:05
Ответы с готовыми решениями:

Выравнивание фиксированного меню по центру страницы
Коллеги, добрый день. Подскажите, как выравнять блок MENU по центру в ниже представленном коде. ...

Надо сделать общий код, но чтоб он работал только на главное меню
В общем у меня есть одни общие стили для меню. Стили активного меню. Блок отъезжает справа, в...

Как сделать, чтобы главное меню сайта вытянулось в одну линию?
Не получается растянуть меню на странице сайта. Оно идет в две линии, а надо в одну......

Как сделать меню по центру
В чём проблема, почему меню не встаёт по центру ? @import...

__________________
15
3 / 1 / 2
Регистрация: 18.05.2016
Сообщений: 14
11.01.2019, 21:40 2
почитайте по flexbox
1
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
12.01.2019, 10:42  [ТС] 3
Все неплохо получается, только в центре нужно выровнять меню по центру именно блока columnmobil (или страницы браузера).
В коде при ширине 1300px меню меняется местами с телефоном, значит телефон должен стать по центру columnmobil.
Во вложении весь код.

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex примеры</title>
<style>
.logo {background:#F8F4DA; }
 
.columnmobil { background:#C5C0C1; display:flex; align-items:center; height:200px;}
 
.otstup_one { background:#E7E6A8; -webkit-flex-grow: 2; flex-grow: 2; }
#menu-glavnoe {margin: 0 auto;}
 
.otstup_two { background:#C0EFCB; }
li {margin: 0 11px; float: left;}
 
@media (max-width: 1300px)  {
.otstup_one {-webkit-order: 1;order: 1; flex-grow: initial; }   
.otstup_two {-webkit-flex-grow: 2; flex-grow: 2;}
}
</style>
</head>
<body>
 
<div class="columnmobil"> 
 
    <div class="logo">
    <a id="logo" href="#" title="Строительная компания" data-height="60" data-padding="15"><img class="logo-main scale-with-grid" src="logo331px.png" /></a>
    </div>
    
    <div class="otstup_one">
                <div class="menu_wrapper">
                    <nav id="menu">
                    <ul id="menu-glavnoe" class="menu menu-main">
        <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>О нас</span></a></li>
        <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://stroystyle.com/uslugi/"><span>Услуги</span></a></li>
        <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Объекты</span></a></li>
        <li id="menu-item-225" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Новости</span></a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Контакты</span></a></li>
                    </ul>
                    </nav>
                        <a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a>                  
                </div>
                </div><!-- .otstup_one -->
                
                <div class="otstup_two">                
                <div class="telefonmobil"><i class="icon-call zoloto"></i><a href="tel:+7341000000"><span class="telefspmobil">+7 (341)</span> 00 00 00</a></div>                           
                </div><!-- .otstup_two -->
</div>
</body>
</html>
0
Вложения
Тип файла: zip flex.zip (15.9 Кб, 2 просмотров)
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 11:53  [ТС] 4
Решение пока не найдено( можно посмотреть здесь
Главное меню нужно сделать по центру блока columnmobil
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 13:41 5
Egor2014,
CSS
1
2
3
4
5
6
7
#menu-glavnoe {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
0
Миниатюры
Сделать главное меню по центру страницы  
83 / 80 / 42
Регистрация: 20.01.2017
Сообщений: 219
14.01.2019, 13:42 6
Цитата Сообщение от Egor2014 Посмотреть сообщение
Главное меню нужно сделать по центру блока columnmobil
тогда у вас соседние для меню блоки должны быть одинаковой ширины (через width или flex-basis)
0
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 13:56  [ТС] 7
Qwerty_Wasd, columnmobil - это внешний блок, не подходит код
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 14:13 8
Egor2014,
Цитата Сообщение от Egor2014 Посмотреть сообщение
columnmobil - это внешний блок
а причем здесь columnmobil ? Вместо того, чтобы уверять Вас в необходимости переверстать меню, я просто предложил Выход из вашей ситуации несколько иным способом.
Ведь то что Вы хотите, это вне зависимости от соседствующего контента, сделать nav#menu посредине всей шапки, забывая об нескольких обертках в которые Вы запихнули это самое меню. Своё мнение по этому поводу, я конечно придержу
0
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 14:23  [ТС] 9
Я не могу переверстать главное меню, он в обертках, т.к. в соответствии с шаблоном Wordpress (ссылка из 1 поста)

Начал верстать пример (3 пост), чтоб на сайте главное меню и главное меню вверху (при прокрутке вниз) совпадали по отступам слева-справа. А главное меню вверху (при прокрутке вниз) точно по центру.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 14:40 10
Egor2014, Скачал Ваш пример. О каком верхнем меню идет речь?
0
Миниатюры
Сделать главное меню по центру страницы  
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 14:46  [ТС] 11
В примере нет такого меню, здесь упрощенный вариант, выезжающее меню сверху только на сайте видно.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 14:55 12
Egor2014, я кажется понял, что Вы хотите сделать. Без изменения дерева, не выйдет. Вот если меню вытащить в блок ниже отдельно от логотипа и телефона. Без соседствующих элементов. Тогда оно при изменении размеров вьюпорта будет позиционироваться также как и всплывающее.
0
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 15:04  [ТС] 13
Qwerty_Wasd, "меню вытащить в блок ниже отдельно от логотипа и телефона" что вы имеете ввиду?

Хочу сказать еще, у этого меню в данный момент несколько оберток, где мною сделана только обертка "otstup_one" ее можно точно убрать, остальное от шаблона.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <div class="otstup_one">
                <div class="menu_wrapper">
                    <nav id="menu">
                    <ul id="menu-glavnoe" class="menu menu-main">
        <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>О нас</span></a></li>
        <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://stroystyle.com/uslugi/"><span>Услуги</span></a></li>
        <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Объекты</span></a></li>
        <li id="menu-item-225" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Новости</span></a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#"><span>Контакты</span></a></li>
                    </ul>
                    </nav>
                        <a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a>                  
                </div>
                </div><!-- .otstup_one -->
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 15:23 14
Egor2014, Ну вы же в курсе, что тему можно править?
0
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
14.01.2019, 15:36  [ТС] 15
Тему уже редактировал, включал блок "otstup_one".
Переносить главное меню ниже по коду "не камильфо", ради выравнивания с всплывающим меню, поскольку начнутся другие проблемы. Слишком все взаимосвязано, к тому же есть адаптивные мобильно настроенные стили.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2127 / 1473 / 648
Регистрация: 16.04.2016
Сообщений: 3,688
14.01.2019, 15:55 16
Egor2014, ну собственно Вы сами себе и ответили
Цитата Сообщение от Egor2014 Посмотреть сообщение
"не камильфо", ради выравнивания с всплывающим меню
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.01.2019, 15:55

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Резиновый <div> по центру страницы, как сделать?
Вот такой код: &lt;div class=&quot;sky&quot;&gt;&lt;div class=&quot;topm&quot; id=&quot;topmenu&quot;&gt; &lt;ul&gt; &lt;li...

как сделать меню по центру в css и html&
не могу сделать это меню по центру, справа/слева могу сделать! помогите плиз, третий день мучаюсь

Как сделать так что бы меню отображалось по центру
Нашел интересно меню в виде книг. Вот его код &lt;style&gt; ul.topUL {padding:0; margin:30px;...

Как сделать текст под фотографией и по центру страницы, tumblr
Помогите! В программировании я профан совсем, есть свой блог/сайт на tumblr. Вот хочу сделать так,...


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

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

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