newtvis
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by newtvis
-
-
Уважаемые верстальщики, подскажите, пожалуйста, как решить одну проблему. В CSS вставил градиентную картинку в качестве фона для меню, который должен появляться при наведении курсора на определенный пункт. При просмотре в браузере картинка фона не отображается полностью по ширине, а лишь закрывает текст и все.
Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =)
HTML:
<nav>
<ul class="nav">
<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>
</nav>CSS:
.nav li{
display: inline-block;
/* Для няшного IE */
*display: inline;
*zoom: 1;
}
.nav li a {
text-decoration: none;
font-family: Arial, sans-serif;
padding:4px 10px;
color: #369;
border: 1px solid transparent;
}
.nav li a:hover {
color:#fff;
background: #0080b4;
background: -moz-linear-gradient(top, #0080b4 0%, #006f98 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080b4), color-stop(100%,#006f98));
background: -webkit-linear-gradient(top, #0080b4 0%,#006f98 100%);
background: -o-linear-gradient(top, #0080b4 0%,#006f98 100%);
background: -ms-linear-gradient(top, #0080b4 0%,#006f98 100%);
background: linear-gradient(to bottom, #0080b4 0%,#006f98 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b4', endColorstr='#006f98',GradientType=0 );
border: 1px solid #0080b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
-moz-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
}И никаких картинок не нужно.
-
Если хотите картинкой - то сделайте .psd файл - вставляйте шапку картинкой или бэкграундом. А текст через отрицательный text-indent
От себя посоветую использовать метод от boilerplate, где text-indent задается только для IE ниже 9 версии.
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* Для старых версий IE */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
Вёрстка макета.
in HTML Coding
Posted · Edited by newtvis
Я нашел только один способ:
HTML:
CSS:
Может есть какой-то другой способ, я особо не думая прикинул макет.
P.S. А вообще не рекомендую такую верстку =)