Форум

Golovastik · #1 (**permalink**) 20.10.2010, 20:43

Хочу сделать такое как на этом сайте при наведении мышкой на Пункт - Главная, Об авторе и т.д.
чтоб так выделялся пункт меню.

Меню делаю на шапке позиционированием.

Код:

 <a href="index.php" class="m1">Главная</а>

СТИЛИ

Код:

.m1{position:relative; top:-32px; left:-190px;
font-size:22px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#CCFF99;
text-decoration:none; }

.m1:hover{width:400px; height:70px; background:#92dbd9; color:white; }

Проблема в том, что не происходит при наведении пункт меню не делается так как на http://russeler.com
Как сделать так как там?

monolithed · #2 (**permalink**) 20.10.2010, 20:57

Сообщение от Golovastik

на http://russeler.com

ссылка битая уже

Сообщение от Golovastik

Хочу сделать такое как на этом сайте при наведении мышкой на Пункт - Главная, Об авторе и т.д.
чтоб так выделялся пункт меню.

только осмелюсь предположить:

<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>

Golovastik · #3 (**permalink**) 20.10.2010, 21:05

Дело в том ,что я позиционирую этот пункт на экране, через position:relative; так как нужно на картинке именно его оформить, но получается что ссылка занимает место и всё что ниже её опускается.

2)при наведении на ссылку если навести мышкой на неё от границы ссылки получается безконечное мигание наведения

monolithed · #4 (**permalink**) 20.10.2010, 21:13

Сообщение от Golovastik

получается что ссылка занимает место и всё что иже её опускается.

потому как position: relative; ставите position: adsolute; или смещайте свойствами padding, margin

Golovastik · #5 (**permalink**) 20.10.2010, 22:12

Вот тестовую для примера сделал что у меня выходит.
Я не могу сделать так чтоб выделялся квадрат побольше, а не выделялась только ссылка.
Вот такое фото при наведении хочу получить.
http://ipicture.ru/uploads/101020/Nq354Ze2RT.jpg

http://funksoulbrother.filesurf.ru/2...ec9/primer.zip

monolithed · #6 (**permalink**) 21.10.2010, 01:10

<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

Golovastik · #7 (**permalink**) 21.10.2010, 17:35

Вот моя шапка, и модернизированный код. Проблема в том, что текст при наведении опускается вместе со всем, просто я хочу сделать чтоб верхнюю линиюю меню не закрывала картинка, которая будет отображаться при наведении мышью. http://www.sharemania.ru/0296779

Чтоб текст главная не опускалось вниз надо.

monolithed · #8 (**permalink**) 21.10.2010, 18:46

А что в моем примере вас не устраивает?
Если вы не знаете даже азов верстки то, помощь ждите только в разделе работа

Golovastik · #9 (**permalink**) 21.10.2010, 18:52

КАк не знаю, я вложил архив, я же его делал.

Golovastik · #10 (**permalink**) 21.10.2010, 20:04

Вот так сработало.

<!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>

Форум

Справочник

Discord чат

Курсы javascript