Foros del Web » Creando para Internet » CSS »

Como centrar izzymenu

Estas en el tema de Como centrar izzymenu en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/02/2009, 11:08
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Como centrar izzymenu

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?
  #2 (permalink)  
Antiguo 06/02/2009, 11:32
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 06/02/2009, 13:56
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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í.
  #4 (permalink)  
Antiguo 06/02/2009, 13:59
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 06/02/2009, 15:44
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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?
  #6 (permalink)  
Antiguo 06/02/2009, 15:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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?
  #7 (permalink)  
Antiguo 06/02/2009, 18:09
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Como centrar izzymenu

Código:
#tab li 
	display:inline;
	float:left;
	margin:0 1px 0 0;
	padding:0;
}
Con float left no puede quedar centrado.
__________________
- León, Guanajuato
- GV-Foto
  #8 (permalink)  
Antiguo 07/02/2009, 07:45
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Como centrar izzymenu

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.

  #9 (permalink)  
Antiguo 09/02/2009, 08:17
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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.
  #10 (permalink)  
Antiguo 09/02/2009, 11:13
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #11 (permalink)  
Antiguo 09/02/2009, 13:24
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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
  #12 (permalink)  
Antiguo 09/02/2009, 16:16
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #13 (permalink)  
Antiguo 09/02/2009, 17:01
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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.
  #14 (permalink)  
Antiguo 09/02/2009, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como centrar izzymenu

Cita:
Iniciado por ricardogomezp Ver Mensaje
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">
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 09/02/2009, 17:23
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #16 (permalink)  
Antiguo 09/02/2009, 17:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como centrar izzymenu

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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 09/02/2009, 17:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como centrar izzymenu

CaLiZzZ: leo el hilo entero y no se dónde "se supone que ya se ha arreglado eso", no lo encuentro.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 09/02/2009, 17:41
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como centrar izzymenu

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #19 (permalink)  
Antiguo 10/02/2009, 03:46
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Como centrar izzymenu

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;
}
  #20 (permalink)  
Antiguo 10/02/2009, 08:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

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
  #21 (permalink)  
Antiguo 10/02/2009, 11:36
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Como centrar izzymenu

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
  #22 (permalink)  
Antiguo 10/02/2009, 15:47
 
Fecha de Ingreso: febrero-2009
Mensajes: 95
Antigüedad: 8 años, 10 meses
Puntos: 4
Respuesta: Como centrar izzymenu

Ok gracias, ya la lei, muy buena página. Post cerrado
  #23 (permalink)  
Antiguo 25/09/2009, 06:34
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Como centrar izzymenu

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.
  #24 (permalink)  
Antiguo 25/09/2009, 08:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como centrar izzymenu

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #25 (permalink)  
Antiguo 27/09/2009, 06:43
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Como centrar izzymenu

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.
  #26 (permalink)  
Antiguo 27/09/2009, 12:09
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Como centrar izzymenu



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

  #27 (permalink)  
Antiguo 28/09/2009, 14:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Como centrar izzymenu

Hola:

Cita:
Iniciado por Maicro Ver Mensaje
Bueno, Kseso, a tu salud, te la has ganado
Una pregunta ¿La cervecita también va incluída?

Saludos.

  #28 (permalink)  
Antiguo 29/09/2009, 03:10
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: Como centrar izzymenu

Supongo que eso irá en la letra pequeña :P
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 09:19.