Jump to content
  • 0

Помощь в ссылках


Neek
 Share

Question

Доброго времени суток. Я только начинаю более углубленно изучать html и css. При первом написание сайта, столкнулся с проблемой ссылок. Дело в том, что у меня меню представляет собой таблицу с текстом (текст является ссылками)

<div id="menu">
<ul>
<li><a href="#" title="">О нас</a></li>
<li><a href="#" title="">Новости</a></li>
<li><a href="#" title="">Island-Twitter</a></li>
<li><a href="#" title="">Island-VK.com</a></li>
<li><a href="#" title="">кнопочка</a></li>
</ul>
</div>

В css, при наведении на них мышкой, они меняют свой фон:


#menu a {
float: left;
width: 98px;
height: 36px;
text-align: center;
text-decoration: none;
color: #383838;
font-weight: bold;
}

#menu a:hover {
width: 98px;
height: 36px;
background: url(../img/bg_1.png) repeat-x;
text-decoration: underline;
position:relative;
margin-top:-10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Так вот в чём проблема. Я добавил ещё одну кнопку авторизации в конец меню, но не добавлял её в таблицу, тем самым отдельно всё для неё прописывал, не знаю зачем. Но вроде бы всё как нужно работает. При нажатии на кнопку авторизации выпадает меню:

704363_m.png

И я хочу сделать эти 2 кнопки которые находятся в меню ссылками, но проблема в том что это меню находится в <div id="menu">, а ссылки там прописаны при наведении менять свой задний фон. И я хочу что бы можно было этот текст сделать ссылкой и что бы на него не действовали правила для основного меню. Надеюсь объяснил что хочу сделать.

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Почему бы не ввести новый класс и не добавить к нужным ссылкам?

Что-то типо этого?

<span class="button_log">Войти</span>
<span class="button_reg">Регистрация</span>

Вот только я не знаю что в css написать?

Link to comment
Share on other sites

  • 0

типа того.

как я понял, нужно, чтобы пункт меню при наведении не менял фон? тогда можно, как вариант, новому классу указать нужный фон при наведении (тот же, что и в состоянии, когда курсор мыши не наведен на него). и да, классы могут повторяться, так что если свойства одинаковы, то не обязательно вводить два разных класса.

Edited by sfc
Link to comment
Share on other sites

  • 0

Вот как описаны кнопки у меня в выпадающем меню.


<span class="button"><a href="#">Войти</a></span>
<span class="button"><a href="#">Регистрация</a></span>


.button{
background: -ms-linear-gradient(top, #57baff, #0062db) 0 0;
background: -moz-linear-gradient(top, #57baff, #0062db) 0 0;
background: -o-linear-gradient(top, #57baff, #0062db) 0 0;
background: -webkit-linear-gradient(top, #57baff, #0062db) 0 0;
background: linear-gradient(top, #57baff, #0062db) 0 0;
border: 1px solid #0163dc;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.35), 1px 2px 2px -1px rgba(255,255,255,0.75) inset;
box-shadow: 0 2px 4px rgba(0,0,0,0.35), 1px 2px 2px -1px rgba(255,255,255,0.75) inset;
color: #ffffff;
cursor: pointer;
display: inline-block;
font: normal 12px/18px Arial;
min-height: 18px;
padding: 4px 12px;
text-decoration: none;
text-shadow: 0 1px rgba(10,59,112,0.75);
}
.button:hover{
background: -ms-linear-gradient(bottom, #57baff, #0062db) 0 0;
background: -moz-linear-gradient(bottom, #57baff, #0062db) 0 0;
background: -o-linear-gradient(bottom, #57baff, #0062db) 0 0;
background: -webkit-linear-gradient(bottom, #57baff, #0062db) 0 0;
background: linear-gradient(bottom, #57baff, #0062db) 0 0;
color: #ffffff !important;
}
.button:active{
-moz-box-shadow: 1px 2px 2px -1px rgba(0,0,0,0.75) inset;
box-shadow: 1px 2px 2px -1px rgba(0,0,0,0.75) inset;
}

Что и как мне описать в css, что бы решить мою проблему?

Edited by Neek
Link to comment
Share on other sites

  • 0

по-моему, дело в том, что вы применяете свойства к разным тегам. т.е то, что вы описали для ссылок будет также применяться и к кнопкам войти/регистрация, ибо ссылки же.

можно переписать class="button" не для тега span, а непосредственно для нужных вам ссылок. (причем #menu .button, дабы увеличить специфичность);

или вместо "#menu a" ввести какой-нибудь класс и добавить к нужным тегам.

Edited by sfc
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy