[Tvorba webu] - Průhledný obrázek na pozadí
Napsal: 06 lis 2010 17:29
Ahoj, vytvářím menu s průhledným obrázkem. Ale když to nastavím takto, tak se ten prohledný obrázek zobrazí jenom pod textem, ale já chci, aby se zobrazil přes celý řádek. Jak to tedy dát dohromady?
.glossymenu {
list-style-type : none;
padding: 0;
}
.glossymenu li{
border-top: 2px solid white;
background: url(../images/levy_odkaz.gif) no-repeat 0 8px;
padding-top: 7px;
padding-bottom: 7px;
}
.glossymenu li.s{
border-bottom: 2px solid white;
background: url(../images/levy_odkaz.gif) no-repeat 0 8px;
padding-top: 7px;
padding-bottom: 7px;
}
a.leve_menu {
text-decoration : none;
color : white;
font-weight : bolder;
font-size : 13px;
padding: 0px 0px 0px 25px;
}
a.leve_menu:hover {
background: url(../images/m_p.png) ; /***Průhledný img**/
text-decoration: underline;
color : white;
font-weight : bolder;
font-size : 13px;
padding: 0px 0px 0px 25px;
}
<ul class="glossymenu">
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li class="s"><a href="#" class="leve_menu">text</a></li>
</ul>
.glossymenu {
list-style-type : none;
padding: 0;
}
.glossymenu li{
border-top: 2px solid white;
background: url(../images/levy_odkaz.gif) no-repeat 0 8px;
padding-top: 7px;
padding-bottom: 7px;
}
.glossymenu li.s{
border-bottom: 2px solid white;
background: url(../images/levy_odkaz.gif) no-repeat 0 8px;
padding-top: 7px;
padding-bottom: 7px;
}
a.leve_menu {
text-decoration : none;
color : white;
font-weight : bolder;
font-size : 13px;
padding: 0px 0px 0px 25px;
}
a.leve_menu:hover {
background: url(../images/m_p.png) ; /***Průhledný img**/
text-decoration: underline;
color : white;
font-weight : bolder;
font-size : 13px;
padding: 0px 0px 0px 25px;
}
<ul class="glossymenu">
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li><a href="#" class="leve_menu">text</a></li>
<li class="s"><a href="#" class="leve_menu">text</a></li>
</ul>