меню , как да позиционирам картинката отгоре текста отдолу

tini4ka

Registered
меню , как да позиционирам картинката отгоре текста отдолу
сложих падинг отгоре на спан , така изглеждаше така както искам , но когато сложих 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]
 
[css]
.home{
background: url('img/home.png') no-repeat ;
width:44px;
height:31px;
background-position: top;
}
.view{
background: url('img/view.png') no-repeat ;
width:35px;
height:35px;
background-position: top;
}
.contact{
background: url('img/contact.png') no-repeat;
width:31px;
height:29px;
background-position: top;
}[/css]
може и да се наложи да вкараш малко паддинг и помниг когато добавяш паддинг премахваш от ширината или височината толкова колкото паддинг си вкарала
 
tini4ka може ли да обясниш пак ако все още не си се оправил/а тъй като не те разбрах много добре

goshkoy каза:
може и да се наложи да вкараш малко паддинг и помниг когато добавяш паддинг премахваш от ширината или височината толкова колкото паддинг си вкарала
Леко го подвеждаш, ако добави примерно padding: 3px; ще трябва да премахне 6px от дължината и височината тъй като това добавя по 3 от 2те страни ако вече се използва за точно определена страна например padding-left: 3px; тогава вече премахваш 3px :)
Пак е вярно, но ако е по нов може да го объркаш ;)
 

Back
Горе