Sotnya
Newbie-
Posts
8 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Sotnya
-
Внутри ul может быть только li, а тег li может быть только внутри ul. Иначе код невалиден. Невалидный код, каждый браузер может интерпретировать по разному. Ссылка расширяется паддингами. Спасибо! А по первому вопросу подскажите?)
-
У меня изначально было сделано как Вы описали. При этом ссылка становилась активной только при навидении курсора мыши на надпись. Ввиду того, что кнопки достаточно широкие, не очень удобно нажимать кнопку. Поэтому я изменил на «ul > a > li». А чем мне поможет «ul > li > a»? Спасибо.
-
Добрый вечер! Есть меню, в нем 6 кнопок. Цвет меню, предположим черный. Текст кнопок белый. При наведении курсора мыши на кнопку меню, цвет background-color выделяется зеленым цветом. Вопрос: как сделать так, что бы не только при наведении курсора мыши на кнопку менялся ее цвет, но и активная кнопка была всегда зеленой. В прикрепленном изображении на кнопку "Главная" наведен курсор мыши. Если я его убираю и перенашу, например, на кнопку "О нас", то кнопка "Главная" стоновится опять черной, даже в том случае, если данный момент активна Главная страница. Мне необходимо прописать что бы активная кнопка была всегда выделена зеленым цветом. Вот пример HTML кода: <ul> <a href="index.html"><li>Главная</li></a> <a href="about.html"><li>О нас</li></a> <a href="uslugi.html"><li>Услуги</li></a> <a href="partners.html"><li>Партнеры</li></a> <a href=""><li>Проекты</li></a> <a href="contact.html"><li>Контакты</li></a> </ul> Вот пример CSS кода: #gor-menu { width:881px; height:42px; background-image:url(img/gor-menu.gif); position:relative; left:12px; height:42px; margin: 42px; } #gor-menu a li { display:inline-block; border:0px solid; text-align:center; overflow:hidden; padding:12px; width:120px; color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none; font-size:16px; } #gor-menu a li:hover { background-color:#7bc706; } Помогите, плз! Спасибо!
-
Добавление звукового эффекта при наведении курсора мыши на ссылку
Sotnya posted a question in HTML Coding
Добрый день! Подскажите плз, каким образом мне добавить в таблицу стилей CSS свойство, позволяющее проиграть звук при наведении курсора мыши на любой из разделов меню? К сожалению не смог найти указанное свойство в справочнике. Вот так выглядят на данный момент стили к моему html документу при наведении курсора мыши на меню: #gor-menu a li:hover { background-color:#7bc706; } Мне хотелось бы сюда вписать стиль, позволяющей вопроизвести звук при наведении курсора мыши на любой из элементов строки меню. Например, звук переворачивающейся страницы. Подскажите плз, каким свойством это можно осуществить? Спасибо! -
Почти все получилось! Остался маленький штрих, вот думаю как его победить. Решение где-то рядом, но ввиду отсутствия опыта, просидаю в его решении. У меня строка меню, которой задан графический фон. В строке вписаны 6 разделов, которые идут друг за другом в виде блоков. При наведении на ссылку блок меняет цвет (в дальнейшем еще планирую звуковой эффект добавить). По Вашим подсказкам у меня все эллементы выстроились в одну строку, по высоте отструктурировались по велечине div рамки, все работает, но осталось одно но..., а именно отступ справа и слева в 60px. Выглядит это следующим образом: Вопрос заключается в том, как мне удалить отступы слева и справа у блоков "Главная" и "Контакты"? P.S. На всякий случай линкую код, которым прописал эллементы: HTML <div id="header"> <div id="logo"> <a href="/"><img src="img/logo.png" class="iePNG" alt="Сайт " /></a> </div> <div id="gor-menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">О нас</a></li> <li><a href="">Услуги</a></li> <li><a href="">Отзывы</a></li> <li><a href="">Партнеры</a></li> <li><a href="">Контакты</a></li> </ul> </div><!-- #gor-menu--> </div><!-- #header--> CSS [/u] [u]#logo { width:290px; height:155px; position:relative; top:20px; left:60px; }[/u] [u]#gor-menu { width:882px; height:42px; background-image:url(img/gor-menu.gif); position:relative; left:55px; }[/u] [u]#gor-menu ul { text-align:center; overflow:hidden; height:42px; cursor:default; margin: 42px; }[/u] [u]#gor-menu li { display:inline-block; border:0px solid; padding:12px; width:106px; }[/u] [u]#gor-menu li:hover { background-color:#3F0; }[/u] [u]#gor-menu li a { display:inline-block; color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none; font-size:16px; }[/u] [u]
-
Спасибо большое!
-
По высоте получилось выровнять. Сделал это следующим образом: дописал в css #gor-menu li { display:inline; border:0px solid blue; padding:13px; position:relative; top:10px; } Теперь кнопки соответствуют по высоте фону моего меню. Осталась последняя проблема, а именно - растянуть кнопки по всей длине меню. Сейчас они у меня вжаты по длине текста. Мне нужно задать всем кнопкам одинаковую длину и что бы текст в них был выровнен по центру. Спасибо!
-
Добрый вечер! Не забрасывайте яблоками, верстаю впервые по самоучителю. Столкнулся со следующей проблемой: пытаюсь сделать меню в хедере над основным контентом. Сайт верстаю в html из под css (я правильно выразился? В html у меня записано следующее: <div id="header"> <div id="logo"> <a href="/"><img src="img/logo.png" class="iePNG" alt="Сайт" /></a> </div> <div id="gor-menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">О нас</a></li> <li><a href="">Услуги</a></li> <li><a href="">Отзывы</a></li> <li><a href="">Партнеры</a></li> <li><a href="">Контакты</a></li> </ul> </div><!-- #gor-menu--> </div><!-- #header--> Общий div хеддер, в нем внутри логотип и менюха. В css это выглядит следующим образом: #header { height: 244px; background-image:url(img/header.gif); background-repeat:no-repeat; } #logo { width:290px; height:155px; position:relative; top:20px; left:60px; } #gor-menu { width:882px; height:42px; background-image:url(img/gor-menu.gif); position:relative; top:42px; left:55px; } #gor-menu li { display:inline; border:1px solid blue; } #gor-menu li:hover { background-color:#3F0; } #gor-menu a { color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none; font-size:16px; } Теперь, собственно, проблема: Мне нужно разместить 6 кнопочек в рамке border по ширине всего меню (882px) и по высоте (42px). Сейчас у меня абра-кадабра какая-то. Кнопки прижаты к левому верхнему краю... Спасибо.