Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 1
Регистрация: 03.11.2014
Сообщений: 113
1

Выровнять пункты меню, при этом не задавая им ширины

24.07.2016, 01:29. Показов 841. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Если не задавать ширины кнопки меню, то подпункты съезжают, а мне нужно чтобы было без задачи ширины.

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
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task-1</title>
 
    <meta name="keywords" content="">
   
    <link rel="stylesheet" href="css/style.css">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 
</head>
 
<body>
 
<div id="header_bg">
    <div class="center">
        <div class="logo">
            <img src="image/Logo.png" alt="">
        </div>
 
        <div class="search">
            <input type="text">
            <button>SEARCH</button>
        </div>
    </div>
</div>
 
    <div id="Navigation">
        <div class="menu-left-gr">&nbsp;</div>
        <div class="center">
            <ul class="Navigation">
            <li><a href="#">Home</a>
                <ul>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </li>
                <li><a href="#">About us</a></li>
            <li><a href="#">What we do?</a>
                    <ul>
                        <li><a href="#">Prices</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Our partners</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Blog</a></li>
                    </ul>         
                </li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Our partners</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
      </div>
      <div class="menu-right-gr">&nbsp;</div>
    </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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
    html, body
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        font-size: 15px;
        line-height: 20px;
        background-color: #F2F2F0;
        font-family: 'Trebuchet MS Regular', serif;
    }
    @font-face {
        font-family: 'Roboto Slab';
        src: url('font/RobotoSlab-Light_0.ttf');
  }
 
    .left {float: left;}
    .right {float: right;}
    .center {width: 1200px;
    margin: 0 auto;}
 
    .hidden {
        display: none;
    }
 
    #header_bg {
        width: 100%; 
        height: 84px;
        background: url('../image/header-background.jpg') no-repeat top;
      background-size: 100%;
    }
    
    .logo {
        float: left;
        padding: 25px 0 0 0;
    }
 
    .search {
        float: right;
        padding: 31px 0 0 0;
        font-size: 0;
    }
 
    .search input {
        height: 20px;
        width: 138px;
        -moz-background: linear-gradient(to top, #fefcea, #9acfd7);
        -webkit-background: linear-gradient(to top, #fefcea, #9acfd7);
        background: linear-gradient(to top, #fefcea, #9acfd7);
    border: 1px solid #fff;
    box-shadow: 0px 1px 0px 0px rgba(81, 124, 151, 0.29);
    margin-right: 2px;
    }
 
    .search button {
        height: 25px;
        width: 82px;
        border: none;
        background-image: url('../image/search-button.png');
        font-size: 11px;
        font-family: 'Trebuchet MS';
    color: rgb(43, 73, 107);
      font-weight: bold;
      line-height: 1;
      text-shadow: 1.414px 1.414px 0px rgba(253, 228, 30, 0.65);
        box-shadow: 0px 1px 0px 0px rgba(81, 124, 151, 0.29);
    }
 
    #Navigation {
        height: 58px;
        width: 100%;
        -moz-background: linear-gradient(to top, #326090, #2a4464);
        -webkit-background: linear-gradient(to top, #326090, #2a4464);
        background: linear-gradient(to top, #326090, #2a4464);
    }
 
    .menu-left-gr {
        float: left;
        width: 133px;
        height: 58px;
        background-image: url('../image/menu-left-gr.png');
    }
 
    .menu-right-gr {
        float: right;
        width: 127px;
        height: 58px;
        background-image: url('../image/menu-right-gr.png');
    }
 
    .Navigation {
      padding: 0;
        margin: 0;
        float: left;
    }
 
    .Navigation li  {
        height: 58px;
        width: 100px;
        float: left;
        text-align: center;
        list-style: none;
        font:12px , "Trebuchet MS Regular" serif;
        border-bottom: 1px solid #ccc;
      margin-left:10px;
    }
 
    .Navigation a{                          
        padding:20px;
        text-decoration: none; 
        color:#333;
        text-shadow: 0 1px #fff;
        display: block;
    }
    .Navigation li ul{
        display: none;
        height: auto;                                   
        margin-left: -11px;
        padding: 0;     
    }               
 
    .Navigation li:hover ul{
        display: block;
    }
 
    .navbar li ul li {
        background-color:#eee;
        border: 1px solid #ccc;
    } 
 
    .Navigation li:hover {
        border-top: solid 1px #000; 
         background: url('../image/menu-btn-li-hover.png');
    }
Много что не получается с списком выпадающим, кто может подсказать что-нибудь? Премного благодарен.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.07.2016, 01:29
Ответы с готовыми решениями:

Выровнять пункты меню
Здравствуйте и хороших вам праздников. У меня вот какая проблема: создал пункты меню и решил...

Как сделать пункты в меню одинаковой ширины
Доброго времени всем суток) При верстке возникла проблема: не могу не как сделать пункты в меню...

Выровнять пункты меню вертикально по центру
Подскажите в вертикальным выравниванием. есть менюшка нужно чтобы пункты меню были выровнены...

Необходимо доставить всех пассажиров в пункты назначения, отображая при этом происходящие изменения
Помогите пожалуйста решить задачи С++ под Linux Проложена дорога ведущая от города А к городу...

1
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
24.07.2016, 02:03 2
У вас явный перебор с флоатами, завязывали бы вы с этим. Если они вам так нравятся, то их достаточно применить только к первому уровню списка.
0
24.07.2016, 02:03
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.07.2016, 02:03
Помогаю со студенческими работами здесь

Выпадающее меню при клике на пункты
Доброго времени суток! Необходимо сделать выпадающее меню при клике на пункты меню. Пример каким...

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

При создании выпадающего меню, пункты уходят под посторонние картинки
Как решить данную проблему (см. скрин). Часть меню уходит под картинку.

При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не применяются...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru