a href.........
Хочу сделать такое как на этом сайте при наведении мышкой на Пункт - Главная, Об авторе и т.д.
чтоб так выделялся пункт меню. Меню делаю на шапке позиционированием. Код:
<a href="index.php" class="m1">Главная</а>Код:
.m1{position:relative; top:-32px; left:-190px;Как сделать так как там? |
Цитата:
Цитата:
<style type="text/css">
a {
border: 1px solid #DDD;
display: block;
float: left;
text-align: center;
text-decoration: none;
width: 100px;
height: 20px;
}
a:hover {
background: #DDD;
}
</style>
<a href="#">one</a>
<a href="#">two</a>
|
Дело в том ,что я позиционирую этот пункт на экране, через position:relative; так как нужно на картинке именно его оформить, но получается что ссылка занимает место и всё что ниже её опускается.
2)при наведении на ссылку если навести мышкой на неё от границы ссылки получается безконечное мигание наведения |
Цитата:
|
Вот тестовую для примера сделал что у меня выходит.
Я не могу сделать так чтоб выделялся квадрат побольше, а не выделялась только ссылка. Вот такое фото при наведении хочу получить. http://ipicture.ru/uploads/101020/Nq354Ze2RT.jpg http://funksoulbrother.filesurf.ru/2...ec9/primer.zip |
<style type="text/css">
dl {
overflow: hidden;
border: 1px solid #DDD;
border-left: none;
width: 222px;
}
dt {
border-left: 1px solid #DDD;
display: block;
float: left;
padding: 5px;
text-align: center;
width: 100px;
height: 21px;
}
a {
background: #DDD;
color: #000;
text-decoration: none;
}
a:hover {
background: #DDD;
color: red;
display: block;
padding: 5px;
margin: -5px 0px 0px -5px;
height: 21px;
width: 100px;
}
</style>
<dl>
<dt><a href="#">Главная1</a></dt>
<dt><a href="#">Главная2</a></dt>
</dl>
text
|
Вот моя шапка, и модернизированный код. Проблема в том, что текст при наведении опускается вместе со всем, просто я хочу сделать чтоб верхнюю линиюю меню не закрывала картинка, которая будет отображаться при наведении мышью. http://www.sharemania.ru/0296779
Чтоб текст главная не опускалось вниз надо. |
А что в моем примере вас не устраивает?
Если вы не знаете даже азов верстки то, помощь ждите только в разделе работа |
КАк не знаю, я вложил архив, я же его делал.
|
Вот так сработало.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
.m1{position:relative; top:-36px; font-size:20px; color:#FFFFCC; top:-35px;
border:1px solid #174f4f; border-top:0px; border-bottom:0px;
padding:6px; padding-left:30px; width:120px;}
.m1:hover{background:url(m1.jpg) no-repeat; color:white;
position:relative; top:-35px;
}
</style>
</head>
<body>
<div align="center"><img src="1.jpg" /></div>
<div align="justify" style="margin-left:213px; margin-right:213px;">
<!--ССЫЛКА КОТОРУЮ я ХОЧУ РАЗМЕСТИТЬ -->
<a style="text-decoration:none;" href="/index.php">
<div class="m1">Главная </div> </a>
Россия (от греч. ????? — Русь[1]; официально — Россия
или Росси?йская Федера?ция[2]) — страна, расположенная в
Восточной Европе и Северной Азии. Является крупнейшим государством
мира (17 075 400 км? или 11,46 % площади всей суши Земли, или
12,65 % заселённой человеком суши, что почти вдвое больше,
чем у занимающей второе место Канады). Население России
на 2010 год составляет 141 927 296 человек[3], в настоящее
время Россия занимает девятое место в мире по этому показателю.
Государственный язык России — русский. Столица России — город-герой
Москва. Всего в России 11 городов с населением более миллиона
человек: Москва, Санкт-Петербург, Новосибирск, Екатеринбург,
Нижний Новгород,
Казань, Самара, Омск, Челябинск, Ростов-на-Дону, Уфа.[4]
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:42. |