Como centrar izzymenu

ricardogomezp · #1 (**permalink**) 06/02/2009, 11:08

Saludos a todos los participantes, como he hallado respuestas antes en este foro (sin estar registrado) pues ahora me registré porque tengo una pregunta que me está sacando la piedrita.

Cree un menú con izzymenu (izzymenu punto com) y lo puse en mi web pero ahora el menú se ve sobre el lado izquierdo y no hallo forma de centrarlo, ya puse las ul con margin:0 auto pero tampoco funciona, ¿alguien tiene idea de como resolver este problema?

Calizman · #2 (**permalink**) 06/02/2009, 11:32

Ese es el problema de copiar / pegar los objetos que una web te da.

Porque no pones el menu con su CSS y su HTML, aqui vemos el codigo y te ayudamos de una manera mas rapida.

Hasta Luego!

ricardogomezp · #3 (**permalink**) 06/02/2009, 13:56

Ok gracias, el código sería:

Código HTML:

<div id="MainMenu"> <!--Menu-->
	<div id="tab">
	  <ul>
		<li><a href="home.html"><span>Inicio</span></a></li>
		<li><a href="about.html"><span>Objetivos</span></a></li>
		<li><a href="contact.html"><span>Blog</span></a></li>
		<li><a href="subpage.html"><span>Contáctenos</span></a></li>
	  </ul>
	</div>
</div>

Y el CSS:

Código:

#MainMenu {width:742px;
	height:28px;
	background:#051F49;
	border-color:#9AB6D2;
	border-style:solid;
	border-width:0 0 3px;
	margin:0;
}

#tab {top:0;
	height:0;
	background:repeat-x top;
	margin:0;
}

#tab ul {list-style:none;
	float:left;
	margin:0 auto;
	padding:0;
}

#tab li {display:inline;
	float:left;
	margin:0 1px 0 0;
	padding:0;
}

#tab a {background:url(../images/bright_115.gif) no-repeat right top;
	text-decoration:none;
	border:0;
	display:block;
	float:left;
	margin:0;
	padding:0;
}

#tab a span {display:block;
	background:url(../images/bleft_115.gif) no-repeat left top;
	font-family:"Times New Roman", Times, serif;
	font-size:16px;
	color:#051F49;
	font-weight:700;
	line-height:27px;
	padding:0 22px;
}

#tab a:hover,#tab li.item_active a {background-position:right bottom;
}

#tab a:hover span,#tab li.item_active a span {background-position:left bottom;
	color:#051F49;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
}
.dropmenudiv {position:absolute;
	top:0;
	float:left;
	display:block;
	visibility:hidden;
	background:#051F49;
	color:#051F49;
	z-index:100;
	text-decoration:none;
	border-color:#9AB6D2;
	border-style:solid;
	border-width:0 0 3px;
	padding:0;
}

.dropmenudiv ul {list-style:none;
	padding:0;
}
.dropmenudiv li {display:inline;
	margin:0;
	padding:0;
}

.dropmenudiv a:link,.dropmenudiv a:visited {width:180px;
	display:block;
	border:0;
	color:#051F49;
	background:url(images/bleft_115.gif) no-repeat left top;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	margin:0 1px 0 0;
	padding:0;
}

.dropmenudiv a span {display:block;
	line-height:27px;
	background:url(images/bright_115.gif) no-repeat right top;
	font-family:"Times New Roman", Times, serif;
	font-size:16px;
	color:#051F49;
	float:none;
	padding:0 22px;
}

.dropmenudiv a:hover {border:0;
	background-position:left bottom;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	color:#051F49;
}

.dropmenudiv a:hover span {background-position:right bottom;
	color:#051F49;
	font-weight:700;
}

Talvez sirva decir que esto tambien lleva un .js para que se produzca un efecto aunque no creo que el problema esté allí.

Calizman · #4 (**permalink**) 06/02/2009, 13:59

Antes de revisar tu problema, tienes un DTD valido no?

Si no lo tienes al inicio de tu web, es ese el problema.

Edito: Tal como lo supuse, tienes escrito:

#MainMenu {width:742px;
height:28px;
background:#051F49;
border-color:#9AB6D2;
border-style:solid;
border-width:0 0 3px;
margin:0;
}

Reemplaza eso por esto:

#MainMenu {width:742px;
height:28px;
background:#051F49;
border-color:#9AB6D2;
border-style:solid;
border-width:0 0 3px;
margin:0 auto;
}

y escribele un Doctype valido.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Hasta Luego!!

ricardogomezp · #5 (**permalink**) 06/02/2009, 15:44

Sip es un XHTML estricto validado y todo con eso no hay problem y lo de poner margin:0 auto no arregló el problema, alguna otra idea?

ricardogomezp · #6 (**permalink**) 06/02/2009, 15:48

Me olvidaba, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http //www w3 org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http //www w3 org/1999/xhtml"> ese es el tipo de DOCTYPE, tendrá algo que ver?

Triby · #7 (**permalink**) 06/02/2009, 18:09

Código:

#tab li 
	display:inline;
	float:left;
	margin:0 1px 0 0;
	padding:0;
}

Con float left no puede quedar centrado.

jomaruro · #8 (**permalink**) 07/02/2009, 07:45

Hola:

Si no me equivoco, algo no concuerda en el DTD, si es un DTD transicional debería poner esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Si es estricto debería ser así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Y el que tú indicas es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http //www w3 org/TR/xhtml11/DTD/xhtml11.dtd">

Saludos.

ricardogomezp · #9 (**permalink**) 09/02/2009, 08:17

Creo que es lo mismo no? El DTD es estricto en xhtml 1.1 lo que sucede es que borré los : y . porque el foro lo leía como dirección web y por ser de reciente ingreso no me permite poner links entonces tuve que borrarlos, aunque claro debí especificarlo.

Ahora con respecto a lo del float:left, ¿Cual sería la solución? Si lo elimino igual no queda centrado.

Gracias.

Calizman · #10 (**permalink**) 09/02/2009, 11:13

Sinceramente, no puede ser posible que si estas poniendo el margin: 0 auto; y tienes un doctype valido, tu pagina no se centre.

Podrias poner tu codigo CSS y HTML completo aqui? porque realmente no confio en que estes haciendo las cosas bien.

Gracias.

ricardogomezp · #11 (**permalink**) 09/02/2009, 13:24

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http(dos puntos)//www(punto)w3(punto)org/TR/xhtml11/DTD/xhtml11(punto)dtd">
<html xmlns="http(dos puntos)//www(punto)w3(punto)org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>El titulo</title>
<link href="estilo/estilos.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="estilo/noprint.css" rel="stylesheet" type="text/css" media="print"/>
<link href="estilo/menu.css" rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript" src="scripts/chrome.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.bgpos.js"></script>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body onload="window.defaultStatus='Teléfono: +(000)(00)000 Cel: 00 - Mail: mail(arroba)mail(punto)com - Ciudad - Pais';return true">
<div class="nover"> <!--Para que no se pueda imprimir la página-->
<div id="pagina" class="singlecol">
  <div id="cabecera">
  </div>
  
  <div id="MainMenu"> <!--Menu-->
	<div id="tab">
	  <ul>
        <li><a href="home.html"><span>Inicio</span></a></li>
  		<li><a href="about.html"><span>Objetivos</span></a></li>
		<li><a href="contact.html"><span>Blog</span></a></li>
		<li><a href="subpage.html"><span>Contáctenos</span></a></li>
	  </ul>
	</div>
  </div>
 
  <div class="divisor">
  </div>
  <div id="izquierda"> <!-- DIV que contiene las preguntas del costado izquierdo -->
  <!--Creo las lista con las preguntas-->
  	<ul> 
    	<li><a href="contenido/preferirnos html">¿Por qué preferirnos?</a></li>
	    <li><a href="contenido/hacemos html">¿Qué hacemos exactamente?</a></li>
    	<li><a href="contenido/esperar html">¿Qué puede esperar de nuestro trabajo?</a></li>
	</ul>
  <!--Inserto el flash-->
  <div id="swf"><object type="application/x-shockwave-flash" data="flash/presentacion.swf" height="267" width="200"><param name="movie" value="flash/presentacion.swf"></object>
  </div>  
  </div>
  
  <div id="derecha"> <!-- Columna de la derecha, donde están las explicaciones -->
	<p><img class="alignleft" src="images/arroba.jpg" alt="Esfera del mundo con arroba"/><b class="marketec">compañía</b> texto.</p>
    <p>texto <img class="alignright" src="images/clientes.jpg" alt="clientes"/> texto.</p>
  </div>

<!--Limpio los floats-->  
  <div class="divisor">
  </div>

<!--Abro el footer-->  
  <div id="footer">
	<p><a href="http(dos puntos)//validator(punto)w3(punto)org/check?uri=referer"><img class="center" src="http(dos puntos)//www(punto)w3(punto)org/Icons/valid-xhtml11-blue" alt="XHTML 1.1 válido" height="31" width="88" /></a></p>
    <p><a href="http(dos puntos)//jigsaw(punto)w3(punto)org/css-validator/"><img class="center" src="http(dos puntos)//jigsaw(punto)w3(punto)org/css-validator/images/vcss-blue" alt="¡CSS Válido!"/></a></p>
  	<p>Designed by: <b class="marketec">compañia</b> 2009.</p>
  </div>

</div> <!--Cierro el DIV página-->
</div> <!--Cierro el DIV no ver-->

<script type="text/javascript">
jQuery(function(){
	   
jQuery("#tab a")
	.css( {backgroundPosition: "right 0"} )
	.mouseover(function(){
		jQuery(this).stop().animate({backgroundPosition:"(right -27px)"}, {duration:400})
	})
	.mouseout(function(){
		jQuery(this).stop().animate({backgroundPosition:"(right 0)"}, {duration:400})
	})
	
				jQuery("#tab a span")
	.css( {backgroundPosition: "left 0"} )
	.mouseover(function(){
		jQuery(this).stop().animate({backgroundPosition:"(0 -27px)"}, {duration:400})
	})
	.mouseout(function(){
		jQuery(this).stop().animate({backgroundPosition:"(left 0)"}, {duration:400})
	})

});
</script>
</body>
</html>

El código CSS:

Código:

@charset "utf-8";
/* Hoja de estilos */

body {background:#39F; 
	font-size:100%;
	color:#171717;
	background-color:#051F49; /*Color de fondo de la página*/
	text-align:center;
	margin:0;
	padding:0;
}

.marketec{color:#06C;
font-size:110%;
}

.espacio{padding:0 0 0 20px;}

img.alignleft {float: left;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

img.center {
display: block;
margin: auto;
}

img.alignright {float: right;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

/*Página central blanca*/
#pagina { /*Este es el contenedor blanco que se ve de fondo*/
	background-color:white;
	text-align:left;
	background:url(../images/fondo.jpg) repeat-y top; border:none;
	margin: 0 auto;
	padding: 0px;
	width: 742px;
}

#pagina.singlecol { /*Clase*/
	background-image:url(../images/fondo.jpg);
}

#cabecera {margin:0;
	padding:0;
	height:300px; /*alto de la imagen de cabecera*/
	width:742px; /*ancho de la cabecera*/
	background:url(../images/cabecera.jpg) no-repeat bottom center #051F49;
}

#footer {background:url(../images/tecnologia.jpg) center no-repeat;
	width:742px;
	line-height:300%;
	text-align:center;
	font-size:0.8em;
}

#content {font-size:1.2em;
}

#izquierda{/*line-height:1.6em; /*Columna izquierda*/
	font-family:"Times New Roman", Times, serif;
	width:200px;
	float:left;
	margin:auto;
}

#izquierda ul{margin:0 0 0 20px;
	padding-left:0;
}

#izquierda li{margin:2px;
	padding:2px;
	border:1px solid #CCCCCC;
	list-style:none;
}

#izquierda li a{display:block; /*Convertimos el vínculo en un bloque.*/
	padding:4px 0;
	text-decoration:none;
	font-size:0.8em;
	color:#333333;
	background-color:white;
	font-family:"Lucida Grande",Verdana,Arial,Sans-Serif;
	font-weight:bold;
	line-height:normal;
	border-left:10px solid #330; /*Agrego un borde ancho a la izquierda*/
	padding-left:10px;
}

#izquierda li a:hover {border-left:10px solid #051F49;
}

#derecha {/*Columna derecha*/
	font-family:"Lucida Grande",Verdana,Arial,Sans-Serif;
	margin:0 0 0 225px;
	width:480px;
	background:white;
	text-align:justify;
	line-height:140%;
	padding:10px 0 10px 0;
}

#derecha h1{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:1.6em;
	border-bottom:#051F49 solid;
}

#derecha img {border:#051F49 double;
	padding: 5px 5px;
	margin: 10px 10px;
}

.divisor{clear:both;}

#swf {width:200px; height:267px; padding:0 0 0 20px;}

El código de menú.css ya lo he puesto en un post anterior.

Gracias

Calizman · #12 (**permalink**) 09/02/2009, 16:16

Ok! Gracias!

Arriba pusiste el CSS de el menu, pero imagino que en tu CSS si lo corrgiste, cierto?

Realmente no entiendo porque dandote las instrucciones detalladas, tu menu no se centra.
Lo unico que se me ocurre, es que al body le pongas margin: 0 auto; para que lo centre todo.

Pero si eso no funciona, tendrias que subir tu pagina a un servidor gratuito, o tu propio servidor, para que vea cual es el error, porque ya te he dado las especificaciones.

Hasta Luego!

ricardogomezp · #13 (**permalink**) 09/02/2009, 17:01

Bueno si la tengo subida, hago pruebas subiendola para ver como se ve en línea

pero no había puesto el link por temor a ser baneado pero es este: marketec(punto)awardspace(punto)com (sin el triple w).

Gracias por la ayuda y por tomarse el tiempo.

Mikmoro · #14 (**permalink**) 09/02/2009, 17:03

Cita:

Iniciado por ricardogomezp

Creo que es lo mismo no? El DTD es estricto en xhtml 1.1

No, evidentemente no es lo mismo xhtml 1.1 que xhtml 1.0, porque ese último número no es decorativo. Pon el adecuado (uno de los dos que te pone jomaruro).

Sólo mirando el código que pusiste en el mensaje nº #3, con que añadas auto al margin en este selector tu caja se centra:

#MainMenu {width:742px;
height:28px;
background:#051F49;
border-color:#9AB6D2;
border-style:solid;
border-width:0 0 3px;
margin:0 auto;
}

Como digo, viendo únicamente el código inicial que pusiste del menú <div id="MainMenu">

Calizman · #15 (**permalink**) 09/02/2009, 17:23

Cita:

Como digo, viendo únicamente el código inicial que pusiste del menú <div id="MainMenu">

Se supone que ya se ha arreglado eso... por lo que no entiendo que pasa! seguramente es el numero en su DTD... pero eso ya lo habia dicho! asi que espero que no sea eso...

Mikmoro · #16 (**permalink**) 09/02/2009, 17:27

Ahira viendo el enlace, si lo que quieres es centrar el menú en la parte de arriba, mientras tu menú no tenga un ancho fijo no lo podrás centrar. Si pones por ejemplo esto:

Cita:

#tab ul {list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt auto;
padding:0pt;
width:400px;
}

el menú se deberá centrar.

Mikmoro · #17 (**permalink**) 09/02/2009, 17:29

CaLiZzZ: leo el hilo entero y no se dónde "se supone que ya se ha arreglado eso", no lo encuentro.

Calizman · #18 (**permalink**) 09/02/2009, 17:41

Cita:

Sip es un XHTML estricto validado y todo con eso no hay problem y lo de poner margin:0 auto no arregló el problema, alguna otra idea?

Diciendo esto, se supone que ya ha intentado ponerlo, y aun asi no ha funcionado, ademas, en el codigo de su web esta arreglado, solo que el menu no sale centrado.

http://marketec.awardspace.com

talmente · #19 (**permalink**) 10/02/2009, 03:46

Hola, me gustaria aportar esta otra forma.

Código:

<div id="cabecera">
   <ul>
      <li><a href="#">uno</a></li>
      <li><a href="#" class="active">dos</a></li>
      <li><a href="#">tres</a></li>
      <li><a href="#">cuatro</a></li>
   </ul>

Código:

#cabecera {
	float:left;
	width:100%;
	background:#fff;
	border-bottom:4px solid #000;
	overflow:hidden;
	position:relative;
}
#cabecera ul {
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
	text-align:center;
}


#cabecera ul li {
	display:block;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	right:50%;
}
#cabecera ul li a {
	display:block;
	margin:0 0 0 0px;
	padding:3px 10px;
	background:#ddd;
	color:#000;
	text-decoration:none;
	line-height:1.3em;
	border-right: 1px solid #666666;
}
#cabecera ul li a:hover {
   background:#369;
   color:#fff;
}
#cabecera ul li a.active,
#cabecera ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

ricardogomezp · #20 (**permalink**) 10/02/2009, 08:07

Gracias a talmente he logrado arreglar el asunto

, lo que solucionó el problema es lo siguiente:

#tab li {display:inline;
float:left;
margin:0 1px 0 0;
padding:0;
position:relative;
right:-50%;
}

Si le pongo 50% lo saca del contenedor, pero si le pongo -50% lo centra, ahora me gustaría saber si alguien tiene la amabilidad de explicarme ¿Por qué bastaron esas dos líneas en el código para que se centre el menú?

Gracias a todos por vuestro tiempo.

Saludos

talmente · #21 (**permalink**) 10/02/2009, 11:36

Yo no soy muy bueno explicando estas cosas, las entiendo para poder poner el menú donde yo quiera, en medio, lado izquierdo, derecho, a 5% del borde, en fin para controlar donde coloco las cosas, pero la teoría lo siento no es lo Mio.

El ejercicio esta aquí:
http://matthewjamestaylor.com/blog/b...rowser-support

ricardogomezp · #22 (**permalink**) 10/02/2009, 15:47

Ok gracias, ya la lei, muy buena página. Post cerrado

Maicro · #23 (**permalink**) 25/09/2009, 05:34

Pues mis disculpa por reabrirlo, pero tengo tu mismo problema y lo planteado

Código:

   position:relative;
   left:50%;
   text-align:center;

no me sirve, ya que me descabalga el menú por completo. Como a ti, en IE sale centrado, pero en Chrome sale a la izquierda. Y todo por agregar los elementos li de la lista. Un texto cualquiera sale centrado, pero al añadir los elementos de la lista, en el Chrome, se sitúan a la izquierda.

Si en la página enlazada se da la solución, es que mi inglés se me demuestra de nuevo escaso

Por si alguien le interesa, esta es la página

http://www.maicro.es/classicco/inicio/inicio.html

Muchas gracias y saludos.

kseso? · #24 (**permalink**) 25/09/2009, 07:40

Mis disculpas por anticipado, pues no he seguido el hilo desde el principio.
Mi participación en él es sólo a la cuestión de Maicro.

Tu caso:
Tienes un contenedor de unas medidas conocidas.
Tienes un menú con un nº de opciones conocidas.
Quieres centrar ese menú teniendo en cuenta que:
-->Cada li tiene el mismo ancho.
-->Cada li tiene una altura de 30px (tamaño de la imagen) y una anchura de 128px
-->Cada 'a' lo quieres centrado vertical y horizontalmente en su li
La lista y sus contenidos los quieres centrados en la horizontal de su caja.

¿Es esto lo que buscabas?:
http://css.devillasbuenas.es/maicro.html
en ff 3.5+, ópera, ie7, crome.

Un saludo

Maicro · #25 (**permalink**) 27/09/2009, 05:43

Pero bueno, Kseso?, ¿qué es eso de ir pidiendo disculpas? Vamos, faltaría más, con lo alucinante que es este foro que encima se vayan pidiendo disculpas.

Es más, el que pide las disculpas soy yo, que he estado dos días de curro y celebración constantes y no he dado señales de vida.

En primer lugar, muchas gracias, ahora voy a probarlo y os cuento -aunque no sé si lo tendré esta tarde-. Y en segundo lugar, como anécdota, en la versión 8 del IE tampoco lo centraba. Lo dicho, voy a ver.

Maicro · #26 (**permalink**) 27/09/2009, 11:09

Sólo este código para el elemento lista no numerada, el ul, ha sido suficiente:

Código:

margin: 0 auto;
position: relative;

Ya me vale

Bueno, Kseso, a tu salud, te la has ganado

jomaruro · #27 (**permalink**) 28/09/2009, 13:03

Hola:

Cita:

Iniciado por Maicro

Bueno, Kseso, a tu salud, te la has ganado

Una pregunta ¿La cervecita también va incluída?

Saludos.

Maicro · #28 (**permalink**) 29/09/2009, 02:10

Supongo que eso irá en la letra pequeña :P