Fondo en item de lista y texto en la parte inferior.

morfil · #1 (**permalink**) 08/05/2013, 00:31

Hola amigos por deseo que me ayuden estuve tratando de poner el texto del siguiente en la parte de abajo del elemento <li> que le corresponde y no puedo, intenté poniendo un padding superior mayor, pero el texto no se baja. Además tengo un problema cuando en un elemento <li> hay dos palabras como que ese recuerdo se desalinea-
Así deseo tenerlo:

Adjunto archivos html y css que tengo:
HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>sin título</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.22" />
	<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="cabeceraPagina">
	<div id="logotipo">
	</div>
	<div id="menuCabecera">
		<ul id="menuPrincipal">
			<li>Inicio</li>
			<li>Gerencia General</li>
			<li>R.R.H.H.</li>
			<li>Finanzas</li>
			<li>Comercial</li>
			<li>Sistemas</li>
			<li>Logística</li>
		</ul>
	</div>
</div>
<div id="contenidoIzq">
	<h3 class="titular-der>">Salón de la fama</h3>
	<img src="" /><p class="extracto-inicio>"></p>
</div>
<div id="contenidoDer">
		<h3 class="titular-izq>">Avisos Importantes</h3>
	<p class="extracto-inicio>"></p><img src="" />
</div>
<div id="slider-inicio">
</div>
<div id="sidebar-inicio">
</div>

<div id="pie-pagina">
</div>

</body>

</html>

CSS:

*{
margin:0px;
padding:0px;
}

body{
background:#ecebe9;
}
#cabeceraPagina{
height:290px;

}
#cabeceraPagina #logotipo{
height:135px;

}

#cabeceraPagina #menuCabecera{
height:155px;
background:#1b3f89;

}

#menuPrincipal{
margin-top:10px;

}

#menuPrincipal li{
display:inline-block;
background:#f4f4f4;
padding:15px 5px 5px 5px;
border-radius:10px;
height:100px;
width:100px;
min-height:100px;
min-width:100px;
margin:auto 15px;
}
#pie-pagina{

height:70px;
background:url("pie-de-pagina.png");
margin-bottom:0px;

}

Ayuda porfa...
Les agradezco de antemano.

moro666 · #2 (**permalink**) 08/05/2013, 04:28

Vamos a ver si lo entiendo, tu quieres un menu como el de la foto no?

Pues nose porque te complicas tanto! Pones un background-image:url(botonx); en cada li, assignas un alto y un ancho y un hover si lo precisas.

En la foto botonx tansolo debes cojer la imagen que pusiste y recortar los botones. Y ale, todo listo!