Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
sponlin
1 / 1 / 0
Регистрация: 03.11.2011
Сообщений: 20
#1

Горизонтальное меню (CSS)

03.05.2014, 12:54. Просмотров 527. Ответов 4
Метки нет (Все метки)

Приветствую!
Пытаюсь создать горизонтальное меню, однако столкнулся с небольшими проблемами в связи с чем прошу Вашей помощи/рекомендаций/советов. В div вложен список ul с элементами списка li в виде ссылок. При помощи стилей CSS получилось все организовать, но не совсем привлекательно...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>Горизонтальное меню</title>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="header">
            <ul class="menu">
                <li><a href="menu1.html">Пункт меню 1</a></li>
                <li><a href="menu2.html">Пункт меню 2</a></li>
                <li><a href="menu3.html">Пункт меню 3</a></li>
                <li><a href="menu4.html">Пункт меню 4</a></li>
                <li><a href="menu5.html">Пункт меню 5</a></li>
                <li><a href="menu6.html">Пункт меню 6</a></li>
                <li><a href="menu7.html">Пункт меню 7</a></li>
                <li><a href="menu8.html">Пункт меню 8</a></li>
            </ul>
        </div>
    </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
body {
    font-family: Arial, sans-serif;             
    font-size: 16px;                            
    background: #F5F5F5;
}
 
.header {
    position: relative;                         
    width: 1000px;                              
    height: 70px;                               
    background: #4A708B;
}
 
.menu {
    position: absolute;                         
    right: 0;                                   
    bottom: 0;                                  
    padding: 0;                                 
    margin: 0;                                  
    list-style: none;                           
    background: #6CA6CD;
}
 
.menu li {
    display: inline-block;                      
    white-space: nowrap;                        
}
 
.menu a {
    display: block;                         
    padding: 6px 10px;                          
    text-decoration: none;                      
    font-size: 14px;                            
    font-weight: bold;
    border-right: 1px solid #4A708B;
    color: white;
}
 
.menu a:hover {
    background: #7EC0EE;                        
}
Как сделать горизонтальное меню на всю длину элемента div?
Как вставить разделитель между элементами меню (border-right: 1px solid black; не совсем корректно отображается)?
Что я напутал с размерами, если при наведении курсора мыши подсвечивается не весь элемент списка?
Как убрать точечную рамку после просмотра страницы пункта меню и возврата на предыдущую страницу?
Спасибо!
0
Вложения
Тип файла: zip problem.zip (885 байт, 1 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.05.2014, 12:54
Ответы с готовыми решениями:

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

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

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

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

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

4
Micheal
53 / 53 / 27
Регистрация: 23.04.2011
Сообщений: 214
03.05.2014, 13:23 #2
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
body {
    font-family: Arial, sans-serif;             
    font-size: 16px;                            
    background: #F5F5F5;
}
 
.header {
    position: relative;                         
    width: 1000px;                              
    height: 70px;                               
    background: #4A708B;
}
 
.menu {
    position: absolute;
    display:table;                                                           
    bottom: 0;                                  
    padding: 0;                                 
    margin: 0;                                  
    list-style: none;                           
    background: #6CA6CD;
    width:100%;
}
 
.menu li {
    display: table-cell;                  
    white-space: nowrap;                        
}
 
.menu a {
    display: block;                         
    text-decoration: none;                      
    font-size: 14px;                            
    font-weight: bold;
    border-right: 1px solid #4A708B;
    color: white;
    padding:10px;
}
 
.menu a:hover {
    background: #7EC0EE;                        
}[/HTML]
1
sponlin
1 / 1 / 0
Регистрация: 03.11.2011
Сообщений: 20
03.05.2014, 15:11  [ТС] #3
Спасибо Вам! Совсем не вспомнил про table :-( Остался только один вопрос: используя border-left: 1px solid black; как избавиться от самой правой вертикальной рамки?
0
Micheal
53 / 53 / 27
Регистрация: 23.04.2011
Сообщений: 214
03.05.2014, 15:19 #4
HTML5
1
<li><a href="#" id="last">Пункт меню 8</a></li>
А в файле CSS:
CSS
1
2
3
4
.menu #last
    {
        border-right:0;
    }
0
sponlin
1 / 1 / 0
Регистрация: 03.11.2011
Сообщений: 20
03.05.2014, 16:25  [ТС] #5
Спасибо! Ваши указания помогли разрешить вопросы :-)
0
03.05.2014, 16:25
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.05.2014, 16:25

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

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

Горизонтальное меню CSS + HTML5
Столкнулся с такой проблемой. Создал меню, необходимо при наведении на...


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

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

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