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

Navigation bar

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

Добрый день!

Не могу разобраться, почему меню вылезает за border-bottom и border-top. Хотя в браузере конструктора отображает все правильно.

Navigation bar


Navigation bar


Код html:
HTML5
1
2
3
4
5
6
7
8
9
<div id="header_nav">
            <ul>
                <li><a href="a">Создание пиццы</a></li>
                <li><a href="a">О заведении</a></li>
                <li><a href="a">Меню</a></li>
                <li><a href="a">Интерьер</a></li>
                <li><a href="a">Контакты</a></li>
            </ul>
        </div>
Код CSS:
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
#header_nav {
    position:absolute;
    top:135px;
    left:200px;
    height:40px;    
    border-top: solid 2px #A20210;
    border-bottom: solid 2px #A20210 ;
}
 
#header_nav ul{
    list-style:none;
    font:30px Sans-serif;
    
}
 
#header_nav ul li {
    float:left;
    
}
 
#header_nav ul li a {
    color:#403A3A;
    display:block;
    line-height:normal;
    padding:0 15px;
}
 
#header_nav ul li a:hover{
    color:#131313;
}
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.06.2015, 12:54
Ответы с готовыми решениями:

Navigation горизонтальное с прилипанием и динамическими стилями
Вот тут прилипающее меню со ссылками типа #top #info и тд, которое прилипает к экрану, и в целом...

При наведении на список с классом Navigation, должна меняться высота Header-wrap
Привет. При наведении на список с классом Navigation, должна меняться высота Header-wrap. Не могу...

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

Foundation top-bar линия
Линия должна идти до конца, а она упирается куда-то. См. картинку. &lt;nav class=&quot;top-bar&quot;...

как сделать color bar
народ, подскажите, как сделать разноцветную полоску как во вложении, используя минимум тегов. К...

4
Fedor92
Эксперт HTML/CSS
2939 / 2502 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
01.06.2015, 13:10 2
Лучший ответ Сообщение было отмечено Daria94 как решение

Решение

Daria94, когда используете список - обнуляйте внутренние и внешние отступы...

Кликните здесь для просмотра всего текста
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Document</title>
</head>
<style>
#header_nav {
    position:absolute;
    top:135px;
    left:200px;
    height:40px;    
    border-top: solid 2px #A20210;
    border-bottom: solid 2px #A20210 ;
}
 
#header_nav ul{
    list-style:none;
    font:30px Sans-serif;
    margin:0;
    padding:0
    
}
 
#header_nav ul li {
    float:left;
    
}
 
#header_nav ul li a {
    color:#403A3A;
    display:block;
    line-height:normal;
    padding:0 15px;
}
 
#header_nav ul li a:hover{
    color:#131313;
}
</style>
<body>
    <div id="header_nav">
            <ul>
                <li><a href="a">Создание пиццы</a></li>
                <li><a href="a">О заведении</a></li>
                <li><a href="a">Меню</a></li>
                <li><a href="a">Интерьер</a></li>
                <li><a href="a">Контакты</a></li>
            </ul>
        </div>
</body>
</html>
1
Daria94
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 3
01.06.2015, 13:19  [ТС] 3
Fedor92, спасибочки

Добавлено через 1 минуту
спасибочки
0
Fedor92
01.06.2015, 13:23
  #4

Не по теме:

Да не за что...:-[

0
Daria94
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 3
01.06.2015, 13:24  [ТС] 5
спасибочки
0
01.06.2015, 13:24
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.06.2015, 13:24

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

Bootstrap Button(link) in Nav Bar
У меня вначале была просто кнопка E X I T в правой части навбара: &lt;button class=&quot;btn btn-default...

Navigation Bar и Bottom Bar в модельном представлении
Доброе время суток! Что есть: 1. Есть storyboard c Tab Bar и Navigation Bar; 2. Есть два...

Высота Navigation Bar
Кто-нибудь знает как изменить высоту навбара? Есть дизайн, по которому высота навбара значительно...


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

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

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