[SOLUCIONADO] Centrar menu en un div?

nachotator · #1 (**permalink**) 19/09/2013, 12:15

Hola, tengo un menu que saque por ahi pero no consigo centrarlo con los css entre los divs, si alguien me puede ayudar... Yo es que estoy mas acostumbrado a las tablas y con ellas no tengo problemas pero con los DIVS... me pierdo.

El menu lo tengo asi:

Código:

<div id="menuh">
        		<div align="center" class="moduletable">
					
<ul class="menu">
<li class="item-468 current active"><a href="/" >Biografía</a></li><li class="item-469"><a href="/index.php/actualidad" >Actualidad</a></li><li class="item-470"><a href="/index.php/libros" >Libros</a></li><li class="item-471"><a href="/index.php/periodicos" >Periódicos</a></li><li class="item-474"><a href="/index.php/investigacion" >Investigación</a></li><li class="item-472"><a href="/index.php/consultas" >Consultas</a></li><li class="item-473"><a href="/index.php/contacto" >Contacto</a></li></ul>
		</div>
	
                     </div>

Y el CSS asi (le he quitado algunas cosillas para ir probando):

Código:

/*Menu*/

#moduletable {
	
}
#menuh {
        font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
        margin-top: 20px;
		/*float:right;*/
		margin:0;
        width: 632px;
}

#menuh ul, li {
        list-style-type: none;
		}

#menuh ul {
      
}

#menuh li {
        /*float: left;*/
		
}

#menuh a {
        text-decoration: none;
        color: #FFFFFF;
        background: #0066FF;
        display: block;
        padding: 3px 10px;
        text-align: center;
        border: 1px solid #ACCFE8;
        border-width: 1px 1px 1px 0;
}


#menuh a#primero {
        border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
        background: #DBEBF6;
}

Rafael · #2 (**permalink**) 19/09/2013, 18:20

La idea es muuuuy simple.

1) Pones un div con cierto ancho.
2) Dentro el ul, como es un elemento de bloque, ponle margin: auto; y ya.

Tal vez necesites ponerle un cierto ancho al ul o a los li que están dentro.
Velo armando así para que te vayas familiarizando.

C2am · #3 (**permalink**) 19/09/2013, 20:07

Seguro que aquí algo vas a encontrar que te ayude

Saludos

nachotator · #4 (**permalink**) 19/09/2013, 23:50

Cita:

Iniciado por Rafael

La idea es muuuuy simple.

1) Pones un div con cierto ancho.
2) Dentro el ul, como es un elemento de bloque, ponle margin: auto; y ya.

Tal vez necesites ponerle un cierto ancho al ul o a los li que están dentro.
Velo armando así para que te vayas familiarizando.

Lo acabo de intentar, le hge puesto tanto a #menuh como a #moduletable "width: 632px" y luego he puesto en #menuh ul "margin:auto" y nada, sigue igual.

pzin · #5 (**permalink**) 20/09/2013, 00:39

Lo único que tienes que hace es:

Código CSS:

Ver original#menuh {
  margin: 0 auto;
}

nachotator · #6 (**permalink**) 20/09/2013, 00:43

Cita:

Iniciado por pzin

Lo único que tienes que hace es:

Código CSS:

Ver original#menuh {
  margin: 0 auto;
}

Lo he probado y tampoco funciona.

pzin · #7 (**permalink**) 20/09/2013, 00:44

¿Y cómo lo probaste? Mira como funciona: http://jsfiddle.net/6kt5f

A menos que quieras hacer otra cosa, claro.

nachotator · #8 (**permalink**) 20/09/2013, 00:59

Lo he probado en el dreamweaver y no funciona, lo he mirado en el enlace que tu has puesto y no sale como tiene que ser, se supone que es un menu horizontal, os pongo la web donde esta para que veais el menu http://jantoniodomenechcorral.com/, y en el dreamweaver ahora tengo esto:

CSS:

Código:

#moduletable {
	width:632;
	
}
#menuh {
        font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
        margin-top: 20px;
		/*float:right;*/
		margin: 0 auto;
}

#menuh ul, li {
        list-style-type: none;
		}

#menuh ul {
	margin:auto;
      
}

#menuh li {
        /*float: left;*/		
}

#menuh a {
        text-decoration: none;
        color: #FFFFFF;
        background: #0066FF;
        display: block;
        padding: 3px 10px;
        text-align: center;
        border: 1px solid #ACCFE8;
        border-width: 1px 1px 1px 0;
}


#menuh a#primero {
        border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
        background: #DBEBF6;
}

pzin · #9 (**permalink**) 20/09/2013, 01:02

Todos los que hemos contestado hemos supuesto que querías hacer otra cosa. Hay que explicarse mejor.

Sólo tienes que flotar los elementos de la lista:

Código CSS:

Ver original#menuh li {
  float: left;
}

nachotator · #10 (**permalink**) 20/09/2013, 01:59

Asi es como estaba el CSS al principio y tampoco me funciona, te pongo el HTML entero por si tuviera algun problema o algo con la tabla donde esta la imagen y todo (como estpy haciendo pruebas, he quitado la parte donde esta el texto):

HTML:

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" xml:lang="es-es" lang="es-es" >
<head>
<style>
/*Menu*/

#moduletable {
	width:632;
	
}
#menuh {
        font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
        margin-top: 20px;
		/*float:right;*/
		margin: 0 auto;
}

#menuh ul, li {
        list-style-type: none;
		}

#menuh ul {
	margin:auto;
      
}

#menuh li {
        float: left;		
}

#menuh a {
        text-decoration: none;
        color: #FFFFFF;
        background: #0066FF;
        display: block;
        padding: 3px 10px;
        text-align: center;
        border: 1px solid #ACCFE8;
        border-width: 1px 1px 1px 0;
}


#menuh a#primero {
        border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
        background: #DBEBF6;
}
</style>
  <base href="http://jantoniodomenechcorral.com/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Super User" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Biografía</title>
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script type="text/javascript">
window.addEvent('load', function() {
				new JCaption('img.caption');
			});
  </script>
 
 <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> 
 <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> 
 <link rel="stylesheet" href="/templates/papa/css/estilo.css" type="text/css" /> 
</head>
<BODY Text="#000000" BgColor="#ffffff" LeftMargin="6" TopMargin="6" MarginWidth="6" MarginHeight="6" BackGround="xbg.gif">
  <TABLE BgColor="#ffffff" Align="Center" Border="0" CellSpacing="0" CellPadding="0">
      <TBODY>
          <TR>
              <TD Width="632" VAlign="Top" Align="Center">
                  <TABLE Width="100%" BgColor="#ffffff" Border="0" CellSpacing="0" CellPadding="0">
                      <TBODY>
                          <TR>
                              <TD Width="632" BgColor="#ffffff" VAlign="Top" Align="Center"><img src="/templates/papa/img/titulo.jpg" width="630" height="150" alt="J. Antonio Domenech Corral"><BR></TD>
                          </TR>
                        </TBODY>
                  </TABLE>
                   
                     <div id="menuh">
        		<div align="center" class="moduletable">
					
<ul class="menu">
<li class="item-468 current active"><a href="/" >Biografía</a></li><li class="item-469"><a href="/index.php/actualidad" >Actualidad</a></li><li class="item-470"><a href="/index.php/libros" >Libros</a></li><li class="item-471"><a href="/index.php/periodicos" >Periódicos</a></li><li class="item-474"><a href="/index.php/investigacion" >Investigación</a></li><li class="item-472"><a href="/index.php/consultas" >Consultas</a></li><li class="item-473"><a href="/index.php/contacto" >Contacto</a></li></ul>
		</div>
	
                     </div>
                     
                              
              </TD>
                         </TR>
                     </TBODY>
                  </TABLE>
     </BODY>
</HTML>

pzin · #11 (**permalink**) 20/09/2013, 02:54

Copiando y pegando tu código en jsfiddle funciona pefectamente bien: http://jsfiddle.net/PUY4c

¿Qué es lo que dices que no funciona? Tienes que ser más específico, porque es obvio que funcionar funciona bien.

nachotator · #12 (**permalink**) 20/09/2013, 03:07

Pues no se, yo tambien he copiado todos tus codigos por si acaso, CSS y HTML, y a mi no me sale centrado el menu, te muestro una imagen, mas especifico no se puede ser jejeje.

pzin · #13 (**permalink**) 20/09/2013, 03:22

Mia aquí

nachotator · #14 (**permalink**) 20/09/2013, 03:28

No se que quieres que mire, eso ya lo tenia puesto:

pzin · #15 (**permalink**) 20/09/2013, 03:31

Código CSS:

Ver original#menuh {
  text-algin: center;
}
 
#menuh li {
  display: inline-block;    
}

Y le quitas la propiedad float a los elementos de la lista.

nachotator · #16 (**permalink**) 20/09/2013, 03:39

Tampoco me funciona:

pzin · #17 (**permalink**) 20/09/2013, 04:13

Pues cuélgalo en algún sitio para echarle un ojo.

Tampoco creo que Dreamweaver sea el mejor sitio para ver si funciona o no.

nachotator · #18 (**permalink**) 20/09/2013, 04:50

Gracias!!!!! Ya encontre el problema!!!! el tema es que no me di cuenta de que estaba redirigiendo a un CSS donde ponia el CSS original y por eso no me hacia caso en los cambios.

Ponia esto en el HTML:

Código:

<link rel="stylesheet" href="/templates/papa/css/estilo.css" type="text/css" />

Lo quite y puse lo que tu me has dicho en el mismo HTML dentro de <STYLE> y ya funciono.

Gracias!!!!!

pzin · #19 (**permalink**) 20/09/2013, 05:09

Hombre eso de "ya", no sé yo...

nachotator · #20 (**permalink**) 20/09/2013, 10:36

Pues tenias razon, eso de "ya" no estaba claro, ya me estoy mosqueando, resulta que en el dreamweaver me sale bien pero en la web no, alguien me puede mirar por favor cual es el problema? Lo podeis ver en http://jantoniodomenechcorral.com/

pzin · #21 (**permalink**) 20/09/2013, 10:47

Pues en la página no sale lo que te dije de display: inline-block.

nachotator · #22 (**permalink**) 20/09/2013, 10:54

Ya, es que lo quite por que en el dreamweaver sealia de otra forma, salia como si fuera un menu vertical. De todas formas ya esta puesto, mira a ver. no lo ves que ahora esta demasiado a la izquierda en comparacion a la imagen?

pzin · #23 (**permalink**) 20/09/2013, 11:03

Tienes que quitarle el relleno que trae por defecto ul:

Código CSS:

Ver originalul {
  padding: 0;
}

nachotator · #24 (**permalink**) 20/09/2013, 11:10

Por fin!!!! Ahora si, gracias!!! Ya esta centrado.