меню , как да позиционирам картинката отгоре текста отдолу
сложих падинг отгоре на спан , така изглеждаше така както искам , но когато сложих background на цялото меню се вижда че картинката е извън него
[css]
#menu{
position:absolute;
top:120px;
left:30px;
background-color:#f1f1f1;
height:65px;
}
#menu ul li{
float:left;
list-style:none;
padding:10px 10px 0 10px;
}
#menu ul li a{
text-decoration:none;
color:#afb4bd;
}
#menu ul li span{
margin-top:50px;
}
.home{
background: url('img/home.png') no-repeat ;
width:44px;
height:31px;
}
.view{
background: url('img/view.png') no-repeat ;
width:35px;
height:35px;
}
.contact{
background: url('img/contact.png') no-repeat;
width:31px;
height:29px;
}[/css]
сложих падинг отгоре на спан , така изглеждаше така както искам , но когато сложих background на цялото меню се вижда че картинката е извън него
HTML:
<div id="menu">
<ul>
<li><a href="#" title="home" class="home"><span>Home</span></a></li>
<li><a href="#" title="view" class="view"><span>View</span></a></li>
<li><a href="#" title="contact" class="contact"><span>Contact</span></a></li>
</ul>
</div>
[css]
#menu{
position:absolute;
top:120px;
left:30px;
background-color:#f1f1f1;
height:65px;
}
#menu ul li{
float:left;
list-style:none;
padding:10px 10px 0 10px;
}
#menu ul li a{
text-decoration:none;
color:#afb4bd;
}
#menu ul li span{
margin-top:50px;
}
.home{
background: url('img/home.png') no-repeat ;
width:44px;
height:31px;
}
.view{
background: url('img/view.png') no-repeat ;
width:35px;
height:35px;
}
.contact{
background: url('img/contact.png') no-repeat;
width:31px;
height:29px;
}[/css]