problema para maquetar menu

rufus · #1 (**permalink**) 04/03/2011, 04:11

tengo un menu con <ul> <li>

Código:

<div id="menu">
<ul>
	<li><a href="index.php">Quiénes somos</a></li>
    <li>Servicios</li>
    <li>Contacto</li>
</ul>
</div>

y su css

Código:

#menu ul li { display:inline;  font-weight:bold; padding-left:18px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding-top:-5px;}

#menu a { color:#FFF; text-decoration:none}

#menu ul li a:hover{ color:#03F; background-image:url(../images/boton_claro.png); background-repeat:no-repeat;}

el menu esta en horizontal como puedo elevarlo unos pixeles para centrarlo dentro del div??

sanxuan · #2 (**permalink**) 04/03/2011, 07:08

Supongo que habrá sido una errata, pero la propiedad padding no admite valores negativos. La propiedad margin sin embargo sí y podrías usarla para cambiar la posición del menú.
Otras alternativas pasan por usar posiciones relativas o absolutas, pero sería más complicado dar ejemplos sin conocer el resto del código.

rufus · #3 (**permalink**) 04/03/2011, 07:56

ya probado a poner margin-top: - 10 px por ejemplo y no me funciona. que puedo hacer? y lo del codigo no se que mas poner creo que e puesto el codigo relacionado con la duda

sanxuan · #4 (**permalink**) 04/03/2011, 08:38

Aquí no cobran por palabra. Pega el HTML completo y el CSS completo si no tienes la página subida a ningun servidor.
Aunque tú no lo creas, otras reglas css pueden estar influyendo en esa parte del código.
El objetivo es probar en nuestros navegadores lo mismo que tú en el tuyo.
No hay razón para que un margen negativo no funcione. Puede que lo estés usando en un lugar que no es el correcto. Me temo que por no haber sido lo suficientemente explícito en mi comentario anterior hayas usado el margen negativo dentro del <li>.

Corrijo: He probado la posibilidad de poner el margen en el elemento li y sigue funcionando.
La única posibilidad que se me ocurre es que hayas incluido un espacio entre "-10" y "px" como en tu comentario. Debes usar "margin-top: -10px".
Comprueba que no sea ese el problema.

rufus · #5 (**permalink**) 04/03/2011, 09:27

header.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles/index.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mudanzas avellan</title>
<style type="text/css">
<!--
body {
	background-color:#00BFBF;
}

-->
</style>
</head>

<body>
<div id="contenedor">
<div id="header">
<img src="images/cabeceranueva.png"/></div>
<div id="menu">
<ul>
	<li><a href="index.php">Quiénes somos</a></li>
    <li><a href="index.php">Servicios</a></li>
    <li><a href="contacto.php">Contacto</a></li></ul>
</div>
<div id="cuerpo">

css:

Código:

#contenedor { width:940px; height:auto;margin:0 auto; }
#header { width:940px; height:200px; background-color:#FFF;}
#menu{width:940px; height:41px; float:left;background-image:url(../images/barramenu.png); background-repeat:no-repeat;background-position:center; background-color:#FFF;}

#menu ul li { display:inline;  font-weight:bold; padding-left:18px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }

#menu a { color:#FFF; text-decoration:none}

#menu ul li a:hover{ color:#03F; background-image:url(../images/boton_claro.png); background-repeat:no-repeat;}

sanxuan · #6 (**permalink**) 04/03/2011, 10:06

Si lo que quieres es centrar el menu dentro del contenedor div#menu, puedes usar la siguiente regla css:
#menu ul { line-height: 41px; margin: 0; }
La propiedad line-height toma el valor de la altura que has definido para #menu.

Para hacer otros ajustes puedes usar un margen negativo en "#menu ul" por poner un ejemplo o valores positivos pequeños. Por defecto el elemento ul tiene un margen superior e inferior. Lo mismo funcionaría para el contenedor #menu.