Foros del Web » Creando para Internet » CSS »

Problemas centrando un menu desplegable horizontal CSS

Estas en el tema de Problemas centrando un menu desplegable horizontal CSS en el foro de CSS en Foros del Web. Hola a todos, escribo este post por si alguien me puede ayudar con unos problemillas que estoy teniendo usando css en una web. Me he ...
  #1 (permalink)  
Antiguo 13/04/2011, 15:41
Avatar de Capitanspam  
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Busqueda Problemas centrando un menu desplegable horizontal CSS

Hola a todos, escribo este post por si alguien me puede ayudar con unos problemillas que estoy teniendo usando css en una web.

Me he bajado un menú prediseñado y le he cambiado las opciones para que quede como yo quiero. Entonces, hay un fichero aparte llamado style.css, en el que se define el estilo, hasta ahí todo bien.

El problema es que, no consigo de ninguna manera centrar el menú de botones y mucho menos eliminar los bordes de éste con la cabecera, he intentado muchas cosas y nada (cabe decir que soy un novato total con el CSS, pero no con html). Si alguien me pudiera ayudar le estaria eternamente agradecido... Os dejo la documentación, por si teneis curiosidad.

Éste es el aspecto que presenta la web (totalmente en construccion, claro)



Éste es el index.htm:

Código:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Franet</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p align="center"><img src="capsalera.gif" border="0"></p>

<ul class="menu" id="menu">
	<li><a href="#" class="menulink">Inici</a>
	</li>
	<li><a href="#" class="menulink">Informació Corporativa</a></li>
	<li>
		<a href="#" class="menulink">Serveis</a>
		<ul>
			<li><a href="#">Neteja i Manteniment</a></li>
			<li><a href="#">Tractament de paviments</a></li>
			<li><a href="#">Neteges Tècniques</a></li>
			<li><a href="#">Altres Serveis</a></li>
		</ul>
	</li>
	<li><a href="#" class="menulink">Treballa amb Nosaltres</a></li>
	<li><a href="#" class="menulink">Contacte</a></li>
</ul>
</p>
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script>


</body>
</html>
y éste es el fichero aparte style.css:

Código:
body {font:11px Verdana,Arial; background:#FFFFFF; margin: 0; padding: 0; }

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#FFFFFF; text-decoration:none;}
ul.menu li {position:relative; float:left; margin-right:1px;}
ul.menu ul {position:absolute; top:26px; left:0; background:#008A00; display:none; opacity:0; list-style:none;}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:160px; margin:0;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#008A00;}
ul.menu ul li a:hover {background:url(images/header_over.gif);}
ul.menu ul ul {left:148px; top:-1px;}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif)}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {}
ul.menu .topline {border-top:1px solid #aaa}
Muchisimas gracias de antemano!
  #2 (permalink)  
Antiguo 13/04/2011, 16:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problemas centrando un menu desplegable horizontal CSS

prueba usar text-aling en la lista <ul> y display:inline en los <li>

Código CSS:
Ver original
  1. ul.menu {list-style:none; margin:0; padding:0;text-align:center;}
  2. ul.menu li {position:relative;display:inline;margin-right:1px;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 14/04/2011, 17:18
Avatar de Capitanspam  
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Problemas centrando un menu desplegable horizontal CSS

Hola ag666, gracias por tu aportación, aunque parece que no funciona... cuando inserto lo que me has dicho en ul.menu y ul.menu li me queda así:



Alguien tiene idea de qué puedo poner para centrar la botonera y eliminar los márgenes de ésta con la cabecera?

Gracias!
  #4 (permalink)  
Antiguo 14/04/2011, 18:58
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Problemas centrando un menu desplegable horizontal CSS

hola Capitanspam, prueba a asignarle un width al menú y poscionarlo con margin: 0 auto;

Código CSS:
Ver original
  1. ul.menu {list-style:none; margin: 0 auto; padding:0; width: 600px;}

El proble no es que exista un margin con la cabecera, si no que la cabecera es un parrafo y este tiene un margin con el menú, asi que eliminalo:

Código CSS:
Ver original
  1. p {margin-bottom:0}
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #5 (permalink)  
Antiguo 15/04/2011, 02:34
Avatar de Capitanspam  
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Problemas centrando un menu desplegable horizontal CSS

Caramba laratik, muchisimas gracias, la medicina funcionó a la perfección...

Un saludo, y gracias de nuevo ;)

Etiquetas: desplegable
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 08:19.