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

Горизонтальное меню CSS + HTML5

17.12.2015, 15:31. Просмотров 414. Ответов 7
Метки нет (Все метки)

Столкнулся с такой проблемой.

Создал меню, необходимо при наведении на элемент (например кнопка "HOME"), чтобы background изменялся на картинку, сделал, но когда навожу на home , остальные <li></li> съезжают , то влево, то вправо, помогите, буду весьма благодарен!

Почему у первого (li class hov1) <li class = "hov1"></li> , потому, что у меня у каждого слова длина разная, буду каждому слову делать background , если знаете лучше вариант, подскажите, пожалуйста.


И background думал выровнять margin:0 auto; , но не работает

HTML5
1
2
3
4
5
6
7
8
9
10
<nav class="topmenu">
                    <ul>
                        <li class="hov1"><a href="#">HOME</a></li>
                        <li class><a href="#">STYLE DEMO</a></li>
                        <li class><a href="#">FULL WIDTH</a></li>
                        <li class><a href="#">DROPDOWN</a></li>
                        <li class><a href="#">PORTFOLIO</a></li>
                        <li class><a href="#">GALLERY</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
28
29
30
31
32
33
34
35
36
37
38
.topmenu { 
    clear:both;
    width:100%;
    height:35px;
    padding-left:446px;
    position:relative;
}
 
.topmenu ul {
    list-style:none;
    padding-top:40px;
    margin:0 auto; 
}
 
.topmenu ul li {
    display:block;
    float:left;
    padding:30px;
    min-height:35px;
    font-size:14px;
}
 
.topmenu .hov1 :hover { 
    width:78px;
    height:35px;
    background:url(../images/header-menu-hover.png) no-repeat;
    margin:0 auto;
    
    
}
 
.topmenu ul li a {
    display:block;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
    
}
0
Миниатюры
Горизонтальное меню CSS + HTML5  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.12.2015, 15:31
Ответы с готовыми решениями:

CSS горизонтальное меню
Здравствуйте. У меня проблема с горизонтальным меню. Надо, чтобы подменю...

Горизонтальное меню на CSS
Горизонтальное меню.При наведении на пункт меню выпадает подменю.Но сам пункт...

Горизонтальное меню (CSS)
Приветствую! Пытаюсь создать горизонтальное меню, однако столкнулся с...

Горизонтальное меню CSS
вот у меня HTML код меню &lt;ul id=&quot;menu&quot;&gt; &lt;link href=&quot;style.css&quot;...

Горизонтальное CSS меню
Решил изучить создание горизонтального меню, но столкнулся с ОГРОМНЫМИ...

7
vitsuk
31 / 24 / 5
Регистрация: 15.11.2015
Сообщений: 140
17.12.2015, 16:12 2
Pete18, Вы хотите что б при наведении на слово всплывала картинка или все же текст?
0
Glart
В поисках себя
115 / 89 / 34
Регистрация: 12.11.2015
Сообщений: 529
17.12.2015, 16:18 3
Цитата Сообщение от Pete18 Посмотреть сообщение
И background думал выровнять margin:0 auto; , но не работает
Это вообще как?

CSS
1
background-position: center center;
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2830 / 2398 / 1036
Регистрация: 15.12.2012
Сообщений: 8,906
Записей в блоге: 5
17.12.2015, 16:23 4
Цитата Сообщение от Glart Посмотреть сообщение
Это вообще как?
Позиция фона по центру - вертикально и горизонтально...
0
Glart
В поисках себя
115 / 89 / 34
Регистрация: 12.11.2015
Сообщений: 529
17.12.2015, 16:23 5
Цитата Сообщение от Pete18 Посмотреть сообщение
Почему у первого (li class hov1) <li class = "hov1"></li> , потому, что у меня у каждого слова длина разная, буду каждому слову делать background , если знаете лучше вариант, подскажите, пожалуйста.
Такое было в може лет 10-15 назад, только потому, что не было других технологий.

Сейчас хорошее горизонтальное меню делается намного проще. И примеров полно в интернете. И если не знаете, как самом сделать, то наверное проще взять готовое решение и подправить под свой стиль сайта.

Я не хочу сказать, что не нужно спрашивать, спрашивать нужно. Но не 100 непонятных вопросов, а если и 100, то понятно излагать и по пунктам расписывать.

Рекомендации от меня: не делать меню таким способом.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2830 / 2398 / 1036
Регистрация: 15.12.2012
Сообщений: 8,906
Записей в блоге: 5
17.12.2015, 16:24 6
Pete18, странный баг...

Цитата Сообщение от Glart Посмотреть сообщение
Я в курсе. Вопрос был к цитате. А не к коду, который я привел.
Уже увидел...
0
Glart
В поисках себя
115 / 89 / 34
Регистрация: 12.11.2015
Сообщений: 529
17.12.2015, 16:24 7
Цитата Сообщение от Fedor92 Посмотреть сообщение
Позиция фона по центру - вертикально и горизонтально..
Я в курсе. Вопрос был к цитате. А не к коду, который я привел.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2830 / 2398 / 1036
Регистрация: 15.12.2012
Сообщений: 8,906
Записей в блоге: 5
17.12.2015, 16:35 8
Цитата Сообщение от Pete18 Посмотреть сообщение
Почему у первого (li class hov1) <li class = "hov1"></li> , потому, что у меня у каждого слова длина разная, буду каждому слову делать background , если знаете лучше вариант, подскажите, пожалуйста.
Используйте спрайт... В остальном верный подход...
Цитата Сообщение от Fedor92 Посмотреть сообщение
Pete18, странный баг...
Странный по факту появления фона - он не смещает обычно текст... Для горизонтального выравнивания пунктов используйте правило:
CSS
1
 .topmenu ul li{dispaly:inline-block}
вместо
CSS
1
.topmenu ul li {display:block; float:left}
0
17.12.2015, 16:35
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.12.2015, 16:35

Горизонтальное меню css
Только начинаю делать сайты и возникла проблема, как сделать тень на...

Горизонтальное меню на CSS
Здравствуйте, Помогите пожалуйста подвинуть ul li ul li ul чтоб на ul li...

Выпадающее горизонтальное css меню
Здравствуйте! Есть необходимость сделать вертикальное выпадающее меню. Дочерние...


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

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

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