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

Меню CSS

07.12.2013, 10:15. Показов 1091. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Беда! При наведении на кнопку вниз выезжает картинка, но Кнопки убегают вниз вместе с выделенной кнопкой. А должны стоять на месте. Помогите умным советом ))

HTML5
1
2
3
4
5
6
7

    <div class="menu" id="menu">
                        <a href="" class="button">gallery</a>
                        <a href="" class="button">about me</a>
                        <a href="" class="button">news</a>
                        <a href="" class="button">info<img src="img/info.png" width="60" align="bottom" alt=""/></a>
                        <a href="" class="button">contacts<img src="img/kontakt.png" width="60" align="bottom" alt=""/></a>
     </div>
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

.menu {
    height: 110px;
    text-align: center;
}
 
 
.button {
    -moz-border-radius: 7px;
    -moz-box-shadow: #000000 0px 0px 10px;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: #6E7849 0 0 10px;
    -webkit-transition: all 0.5s ease;
    background-color: #c51d1b;
    background-image: -moz-linear-gradient(56deg, #d19b3d, #c51d1b);
    background-image: -ms-linear-gradient(56deg, #d19b3d, #c51d1b);
    background-image: -o-linear-gradient(56deg, #d19b3d, #c51d1b);
    background-image: -webkit-linear-gradient(56deg, #d19b3d, #c51d1b);
    background-image: linear-gradient(56deg, #d19b3d, #c51d1b);
    border-radius: 7px;
    box-shadow: #000000 0px 0px 10px;
    color: #000000;
    font-family: Trebuchet MS;
    font-size: medium;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    text-shadow: #000000 5px 5px 10px;
    transition: all 0.5s ease;
    width: 80px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-left: 5px;
    height: 20px;
    overflow-y: hidden;
    text-align: center;
    display: inline-block;
}
.button:hover {
    color: #ffffff;
    text-shadow: #ffffff 5px 5px 10px;
    height: 90px;
}
.button:active {
    color: #ffffff;
    text-shadow: #ffffff 5px 5px 10px;
    height: 90px;
}
Добавлено через 8 часов 13 минут
если в .button {} добавить float: left; то получается то что надо, но тогда надо как то отцентровать это дело.
так же можно решить проблему, прописав каждой кнопке свой стиль отдельно, но не хочется усложнять работу.
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 07.12.2013, 10:15
Ответы с готовыми решениями:

Меню с CSS
Как сделать подобное меню с помощью CSS?

Меню CSS
Вот мой код, ну как мой я нашёл его на сайте точно не помню на каком а проблема у меня заключается...

CSS - Меню
Код меню HTML: &lt;div id='menu'&gt;&lt;a href='/'&gt;Главная - Новости&lt;/a&gt; &lt;a href='/'&gt;Главная -...

Меню на CSS
Вот тут проблема: https://www.cyberforum.ru/evaluate-site/thread1771931.html Пробую меню через CSS...

4
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
07.12.2013, 14:49 2
vertical-align:top; пропишите у класса .button
1
3 / 3 / 0
Регистрация: 07.12.2013
Сообщений: 12
07.12.2013, 18:48  [ТС] 3
Цитата Сообщение от qlipoth Посмотреть сообщение
vertical-align:top; пропишите у класса .button
Супер-гуд! помогло )) как я сам то не дошел до этого )))
0
3 / 3 / 0
Регистрация: 07.12.2013
Сообщений: 12
22.12.2013, 10:25  [ТС] 4
новая проблема в меню...
каждая кнопка изначально выглядит как текс, но при наведении на нее она плавно разворачивается, а внутри нее появляется картинка, нужно чтоб развернутый размер кнопки был размер текста+размер картинки, не меньше, не больше. я вроде сделал, но при наведении кнопка сперва становится узкой, а только потом разворачивается.

HTML5
1
2
3
4
5
6
7
8
9
10

   <div class="menu" id="menu">
                        <a href="index.php?pg=BMW" class="button">BMW<img src="logo/7.png"  class="logos"/></a>
                        <a href="index.php?pg=HNK" class="button">Heineken<img src="logo/2.png"  class="logos"/></a>
                        <a href="index.php?pg=ASM" class="button">AstonMartin<img src="logo/3.png"  class="logos"/></a>
                        <a href="index.php?pg=EGL" class="button">Eagl<img src="logo/5.png"  class="logos"/></a>
                        <a href="index.php?pg=events" class="button">events</a>
                        <a href="index.php?pg=photo" class="button">photo</a>
                        <a href="index.php?pg=info" class="button">info<img src="img/info.png"  class="logos"/></a>
                        <a href="index.php?pg=contacts" class="button">contacts<img src="img/kontakt.png"  class="logos"/></a>
     </div>
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

.button {
    -moz-border-radius: 7px;
    -moz-box-shadow: #000000 0px 0px 10px;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: #6E7849 0 0 10px;
    -webkit-transition: all 0.5s ease;
    background: #9734d9;
    background-image: -webkit-linear-gradient(top, #9734d9, #8e97e8);
    background-image: -moz-linear-gradient(top, #9734d9, #8e97e8);
    background-image: -ms-linear-gradient(top, #9734d9, #8e97e8);
    background-image: -o-linear-gradient(top, #9734d9, #8e97e8);
    background-image: linear-gradient(to bottom, #9734d9, #8e97e8);
    border-radius: 7px;
    box-shadow: #000000 0px 0px 10px;
    color: #000000;
    font-family: Trebuchet MS;
    font-size: medium;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    text-shadow: #000000 5px 5px 10px;
    transition: all 0.5s ease;
    width: 80px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-left: 5px;
    height: 22px;
    overflow-y: hidden;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    overflow-x: hidden;
}
.button:hover {
    color: #ffffff;
    text-shadow: #ffffff 5px 5px 10px;
    height: auto;
}
 
.logos {
    width: 70px;
    clear: both;
    vertical-align: bottom;
    margin-top: 5px;
}
0
3 / 3 / 0
Регистрация: 07.12.2013
Сообщений: 12
24.12.2013, 12:46  [ТС] 5
есть какие либо идеи?
0
24.12.2013, 12:46
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 24.12.2013, 12:46
Помогаю со студенческими работами здесь

Меню на CSS
Добрый Всем день. Вообщем есть такой кусок html кода: &lt;DIV class=&quot;menu&quot;&gt; &lt;DIV...

css меню
Вопрос: к примеру есть меню ,любое,не имеет значения,и есть к примеры верху 2 кнопки(к примеру...

CSS -меню
Здравствуйте, уважаемые форумчане! Решил сделать меню сайта в виде кружочков) Но у меня возникла...

Меню в CSS
Здраствуйте, товарищи! Впервые делаю менюшку на CSS. Все довольно таки просто: бэк в виде панельки...


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

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