Foros del Web » Creando para Internet » CSS »

problema para maquetar menu

Estas en el tema de problema para maquetar menu en el foro de CSS en Foros del Web. 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 { ...
  #1 (permalink)  
Antiguo 04/03/2011, 04:11
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 14 años, 10 meses
Puntos: 1
problema para maquetar menu

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??
  #2 (permalink)  
Antiguo 04/03/2011, 07:08
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: problema para maquetar menu

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.
  #3 (permalink)  
Antiguo 04/03/2011, 07:56
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: problema para maquetar menu

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
  #4 (permalink)  
Antiguo 04/03/2011, 08:38
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: problema para maquetar menu

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.

Última edición por sanxuan; 04/03/2011 a las 08:46
  #5 (permalink)  
Antiguo 04/03/2011, 09:27
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: problema para maquetar menu

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;}
  #6 (permalink)  
Antiguo 04/03/2011, 10:06
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: problema para maquetar menu

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.

Etiquetas: maquetar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:09.