Foros del Web » Creando para Internet » CSS »

Centrar menu horizontal CSS

Estas en el tema de Centrar menu horizontal CSS en el foro de CSS en Foros del Web. Bueno amigos, estoy ya aburrido de intentar centrar el menu de mi web, no se como hacerlo, os pongo una captura y el código: El ...
  #1 (permalink)  
Antiguo 27/07/2011, 06:32
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Centrar menu horizontal CSS

Bueno amigos, estoy ya aburrido de intentar centrar el menu de mi web, no se como hacerlo, os pongo una captura y el código:



El código:

Código:
.ebul_cbinsmenu, .ebul_cbinsmenu ul {
  background-color: #FFFFFF;
  border: 1px solid #646464;
  display: block;
  font-size: 1px;
  margin: 0 auto;
  overflow: auto;
  padding: 2px;
  position: absolute;
  visibility: hidden;
  
}

.ebul_cbinsmenu_shadow {
  background-color: #777777;
  display: block;
  margin: 0px;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
}

.ebul_cbinsmenu table {
  border-collapse: separate;
}

.ebul_cbinsmenu tr {
  background-color: #FFFFFF;
  cursor: pointer;
  font-size: 1px;
}

.ebul_cbinsmenu td {
  border: 1px solid #FFFFFF;
  padding: 3px;
  text-align: left;
}

.ebul_cbinsmenu td a {
  color: #000000;
  font-family: "Tahoma", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

.ebul_cbinsmenu tr.hot, .ebul_cbinsmenu tr.expanded {
  background-color: #F0F0F0;
}

.ebul_cbinsmenu tr.hot td, .ebul_cbinsmenu tr.expanded td {
  border-color: #8C8C8C;
}
.ebul_cbinsmenu tr.hot a, .ebul_cbinsmenu tr.expanded a {
  color: #000000;
  font-family: "Tahoma", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

ul.ebul_cbinsmenu {
  position: absolute;
  visibility: hidden;
}                               

.cbinsmenuebul_menulist .spaced_li {
  padding: 0px 1px 0px 0px;
}

.cbinsmenuebul_menulist li {
  list-style-type: none;
  float: left;
  
}

.cbinsmenuebul_menulist img {
  vertical-align: bottom;
  
}

.cbinsmenuebul_menulist {
  margin: 0 auto;
  padding: 0px;
  line-height: 0px;
}
.container .nav table tr td table tr td {
	text-align: center;
}
.container .content table tr td {
	text-align: justify;
}
.container .content table tr td {
	text-align: center;
}
.container .content table tr td {
	text-align: center;
}
Gracias!!
  #2 (permalink)  
Antiguo 27/07/2011, 07:14
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Centrar menu horizontal CSS

Mete el menú en un div con estas propiedades
#contenedor {margin: 0 auto;}

Si no te funciona, postea la parte de código del menú a ver que puede ser.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #3 (permalink)  
Antiguo 27/07/2011, 07:35
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 12 años, 10 meses
Puntos: 2
Respuesta: Centrar menu horizontal CSS

Si lo que quieres es centrarlo a la mitad de la pagina, usa margin-left/right en auto con un width definido en el div que contiene tu menu...

ejemplo:

#contenedor_menu {

width:700px;
margin-left:auto;
margin-right:auto;
}


Saludos!
  #4 (permalink)  
Antiguo 27/07/2011, 17:02
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

He tocado alguna cosilla y no cambia nada, a lo mejor no estoy metiendolo en el sitio adecuado. Os dejo parte del codigo, si necesitáis algo más...

Código PHP:
<style type="text/css">
<!--
body {
    
font100%/1.4 VerdanaArialHelveticasans-serif;
    
background#42413C;
    
margin0;
    
padding0;
    
color#000;
    
background-color#00CCFF;
    
margin-top0px;
    
}

/* ~~ Selectores de elemento/etiqueta ~~ */
uloldl /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */
    
padding0;
    
margin0;
}
h1h2h3h4h5h6{
    
margin-top0;     /* la eliminación del margen superior resuelve un problema que origina que los márgenes escapen de la etiqueta div contenedora. El margen inferior restante lo mantendrá separado de los elementos de que le sigan. */
    
padding-right15px;
    
padding-left5px;     /* la adición de relleno a los lados del elemento dentro de las divs, en lugar de en las divs propiamente dichas, elimina todas las matemáticas de modelo de cuadro. Una div anidada con relleno lateral también puede usarse como método alternativo. */
}
a img /* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
    
bordernone;
}

/* ~~ La aplicación de estilo a los vínculos del sitio debe permanecer en este orden (incluido el grupo de selectores que crea el efecto hover -paso por encima-). ~~ */
a:link {
    
color#42413C;
    
text-decorationunderline/* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a:visited {
    
color#6E6C64;
    
text-decorationunderline;
}
a:hovera:activea:focus /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
    
text-decorationnone;
}

/* ~~ Este contenedor de anchura fija rodea a todas las demás divs ~~ */
.container {
    
width960px;
    
background#FFFFFF;
    
margin0 auto;
    
text-align:center;
}

/* ~~ No se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño. Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipo vinculado. ~~ */
.header {
    
background#ADB96E;
}

/* ~~ Estas son las columnas para el diseño. ~~ 

1) El relleno sólo se sitúa en la parte superior y/o inferior de las divs. Los elementos situados dentro de estas divs tienen relleno a los lados. Esto le ahorra las "matemáticas de modelo de cuadro". Recuerde que si añade relleno o borde lateral a la div propiamente dicha, éste se añadirá a la anchura que defina para crear la anchura *total*. También puede optar por eliminar el relleno del elemento en la div y colocar una segunda div dentro de ésta sin anchura y el relleno necesario para el diseño deseado.

2) No se asigna margen a las columnas, ya que todas ellas son flotantes. Si es preciso añadir un margen, evite colocarlo en el lado hacia el que se produce la flotación (por ejemplo: un margen derecho en una div configurada para flotar hacia la derecha). En muchas ocasiones, puede usarse relleno como alternativa. En el caso de divs para las que deba incumplirse esta regla, deberá añadir una declaración "display:inline" a la regla de la div para evitar un error que provoca que algunas versiones de Internet Explorer dupliquen el margen.

3) Dado que las clases se pueden usar varias veces en un documento (y que también se pueden aplicar varias clases a un elemento), se ha asignado a las columnas nombres de clases en lugar de ID. Por ejemplo, dos divs de barra lateral podrían apilarse si fuera necesario. Si lo prefiere, éstas pueden cambiarse a ID fácilmente, siempre y cuando las utilice una sola vez por documento.

4) Si prefiere que la navegación esté a la derecha en lugar de a la izquierda, simplemente haga que estas columnas floten en dirección opuesta (todas a la derecha en lugar de todas a la izquierda) y éstas se representarán en orden inverso. No es necesario mover las divs por el código fuente HTML.

*/
.sidebar1 {
    
floatleft;
    
width180px;
    
background#EADCAE;
    
padding-bottom10px;
}
.
content {
    
padding10px 0;
    
width700px;
    
floatright;
}
.
sidebar2 {
    
floatleft;
    
width260px;
    
background#EADCAE;
    
padding10px 0;
}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul, .content ol 
    
padding0 15px 15px 40px/* este relleno reproduce en espejo el relleno derecho de la regla de encabezados y de párrafo incluida más arriba. El relleno se ha colocado en la parte inferior para que el espacio existente entre otros elementos de la lista y a la izquierda cree la sangría. Estos pueden ajustarse como se desee. */
}

/* ~~ Los estilos de lista de navegación (pueden eliminarse si opta por usar un menú desplegable predefinido como el de Spry) ~~ */
ul.nav {
    list-
stylenone/* esto elimina el marcador de lista */
    
border-top1px solid #666; /* esto crea el borde superior de los vínculos (los demás se sitúan usando un borde inferior en el LI) */
    
margin-bottom15px;
     
/* esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
    
border-bottom1px solid #666; /* esto crea la separación de los botones */
}
ul.nav aul.nav a:visited /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
    
padding5px 5px 5px 15px;
    
displayblock/* esto da al anclaje propiedades de bloque, de manera que llene todo el LI en el que está contenido para que toda el área reaccione a un clic de ratón. */
    
width160px;  /*esta anchura hace que se pueda hacer clic en todo el botón para IE6. Puede eliminarse si no es necesario proporcionar compatibilidad con IE6. Calcule la anchura adecuada restando el relleno de este vínculo de la anchura del contenedor de barra lateral. */
    
text-decorationnone;
    
background#C6D580;
}
ul.nav a:hoverul.nav a:activeul.nav a:focus /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
    
background#ADB96E;
    
color#FFF;
}

/* ~~ Los estilos de pie de página ~~ */
.footer {
    
padding10px 0;
    
background#CCC49F;
    
positionrelative;/* esto da a IE6 hasLayout para borrar correctamente */
    
clearboth/* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
    
background-color#00CCFF;
    
color#000;
    
font-familyVerdanaArialHelveticasans-serif;
}

/* ~~ Clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
    
floatright;
    
margin-left8px;
}
.
fltlft /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
    
floatleft;
    
margin-right8px;
}
.
clearfloat /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de .container) si .footer se elimina o se saca fuera de .container */
    
clear:both;
    
height:0;
    
font-size1px;
    
line-height0px;
}
.
Desarrollo {
    
font-familyVerdanaGenevasans-serif;
    
font-size12px;
    
color#FFF;
    
text-alignright;
}
Noticias {
    
font-size12px;
}
.
noticicas {
    
font-familyGeorgia"Times New Roman"Timesserif;
    
font-size12px;
    
color#000;
    
text-aligncenter;
}
.
noticias {
    
font-familyGeorgia;
    
text-aligncenter;
}
body,td,th {
    
font-size90%;
    
color#333;
    
text-aligncenter;
}
.
saludos {
    
text-aligncenter;
}
.
container .content .noticicas #table18 tr td p .saludos .Apple-style-span span font {
    
text-aligncenter;
}
.
container .content .noticicas p .container span span {
    
text-aligncenter;
}
.
container .content table {
    
text-aligncenter;
}
.
container .content table {
    
text-alignjustify;
}
.
container .content table {
    
text-alignjustify;
}
.
container .content table tr td {
    
text-alignjustify;
}
-->
</
style></head
  #5 (permalink)  
Antiguo 27/07/2011, 17:20
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Centrar menu horizontal CSS

Hola ermuni, si puedes poner algo del code donde está el menú. Lo normal es que cambiando el css adopte la forma que quieres.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #6 (permalink)  
Antiguo 28/07/2011, 11:20
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

A ver, estoy un poco perdido, no se si me estais pidiendo esto:

Código PHP:
<ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 853px; height: 35px;">
  <
li class="spaced_li"><a href="index.php"><img src="Botones/ebbtcbinsmenu1_0.gif" alt="INICIO" name="ebbcbinsmenu_8" width="121" height="35" border="0" id="cbi_cbinsmenu_8" style="vertical-align: bottom;" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_9" src="Botones/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_9" width="121" height="35" style="vertical-align: bottom;" border="0" alt="CONTACTO" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_3" src="Botones/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="121" height="35" style="vertical-align: bottom;" border="0" alt="COSITAS
NUESTRAS" 
title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_4" src="Botones/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="121" height="35" style="vertical-align: bottom;" border="0" alt="DESCARGAS" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_5" src="Botones/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="121" height="35" style="vertical-align: bottom;" border="0" alt="ACTUACIONES" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_6" src="Botones/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="121" height="35" style="vertical-align: bottom;" border="0" alt="FORO" title="" /></a></li>
  <
li><a><img src="Botones/ebbtcbinsmenu7_0.gif" alt="CONTACTO" name="ebbcbinsmenu_7" width="121" height="35" border="0" id="cbi_cbinsmenu_7" style="vertical-align: bottom;" title="" /></a></li></ul>
<
script type="text/javascript" src="Botones/cbjscbinsmenu.js"></script></td> 
  #7 (permalink)  
Antiguo 29/07/2011, 00:43
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Centrar menu horizontal CSS

Mete esa esta lista dentro de un DIV y por ultimo a ese div asignale la propiedad margin: auto;
haber si lo consigues asi.
SALUDOS
  #8 (permalink)  
Antiguo 29/07/2011, 01:18
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Centrar menu horizontal CSS

Quedaría así, tienes que incluir las etiquetas <div> (línea 1 y la línea 12), dejando las etiquetas <ul> dentro de estas. Hay que tener en cuenta el tipo de estilo que aplicas.

Si es div class ( .contenedor {margin: 0 auto;} ) el estilo empieza por un punto (.)
Y si es div id ( #contenedor {margin: 0 auto;} ) el estilo empieza por una almohadilla (#)
Código HTML:
Ver original
  1. <div id="nombre_del_estilo">
  2.   <ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 853px; height: 35px;">
  3.   <li class="spaced_li"><a href="index.php"><img src="Botones/ebbtcbinsmenu1_0.gif" alt="INICIO" name="ebbcbinsmenu_8" width="121" height="35" border="0" id="cbi_cbinsmenu_8" style="vertical-align: bottom;" title="" /></a></li>
  4.   <li class="spaced_li"><a><img id="cbi_cbinsmenu_9" src="Botones/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_9" width="121" height="35" style="vertical-align: bottom;" border="0" alt="CONTACTO" title="" /></a></li>
  5.   <li class="spaced_li"><a><img id="cbi_cbinsmenu_3" src="Botones/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="121" height="35" style="vertical-align: bottom;" border="0" alt="COSITAS
  6. NUESTRAS" title="" /></a></li>
  7.   <li class="spaced_li"><a><img id="cbi_cbinsmenu_4" src="Botones/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="121" height="35" style="vertical-align: bottom;" border="0" alt="DESCARGAS" title="" /></a></li>
  8.   <li class="spaced_li"><a><img id="cbi_cbinsmenu_5" src="Botones/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="121" height="35" style="vertical-align: bottom;" border="0" alt="ACTUACIONES" title="" /></a></li>
  9.   <li class="spaced_li"><a><img id="cbi_cbinsmenu_6" src="Botones/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="121" height="35" style="vertical-align: bottom;" border="0" alt="FORO" title="" /></a></li>
  10.   <li><a><img src="Botones/ebbtcbinsmenu7_0.gif" alt="CONTACTO" name="ebbcbinsmenu_7" width="121" height="35" border="0" id="cbi_cbinsmenu_7" style="vertical-align: bottom;" title="" /></a></li>
  11.   </ul>
  12. <div/>
  13. <script type="text/javascript" src="Botones/cbjscbinsmenu.js"></script></td>
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #9 (permalink)  
Antiguo 29/07/2011, 01:30
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Centrar menu horizontal CSS

Claro esta que ese DIV que añade debe estar dentro del DIV que tienes ya para esa UL.
De esta forma podrás usar el margin:auto; sin problemas.
Las lista nos reconocen el valor auto del margin dentro de un div, CREO.
  #10 (permalink)  
Antiguo 29/07/2011, 05:31
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

No se que hacer chicos, sigue sin salir en el centro, he añadido esto:

Código PHP:
.menu2 {
    
margin0 auto;
    

y esto:

Código PHP:
<div id="menu2">
 <
ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 853px; height: 35px;">
  <
li class="spaced_li"><a href="index.php"><img src="Botones/ebbtcbinsmenu1_0.gif" alt="INICIO" name="ebbcbinsmenu_8" width="121" height="35" border="0" id="cbi_cbinsmenu_8" style="vertical-align: bottom;" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_9" src="Botones/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_9" width="121" height="35" style="vertical-align: bottom;" border="0" alt="CONTACTO" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_3" src="Botones/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="121" height="35" style="vertical-align: bottom;" border="0" alt="COSITAS
NUESTRAS" 
title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_4" src="Botones/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="121" height="35" style="vertical-align: bottom;" border="0" alt="DESCARGAS" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_5" src="Botones/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="121" height="35" style="vertical-align: bottom;" border="0" alt="ACTUACIONES" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_6" src="Botones/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="121" height="35" style="vertical-align: bottom;" border="0" alt="FORO" title="" /></a></li>
  <
li><a><img src="Botones/ebbtcbinsmenu7_0.gif" alt="CONTACTO" name="ebbcbinsmenu_7" width="121" height="35" border="0" id="cbi_cbinsmenu_7" style="vertical-align: bottom;" title="" /></a></li></ul>

            
            </
div><script type="text/javascript" src="Botones/cbjscbinsmenu.js"></script></td> 
No se si lo estoy haciendo bien
  #11 (permalink)  
Antiguo 29/07/2011, 05:40
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Centrar menu horizontal CSS

Cita:
Iniciado por Uncontroled_Duck Ver Mensaje
...
Si es div class ( .contenedor {margin: 0 auto;} ) el estilo empieza por un punto (.)
Y si es div id ( #contenedor {margin: 0 auto;} ) el estilo empieza por una almohadilla (#)....
Tienes el estilo como div class, y en el menú como div id.

Edito:
<div id="menu2"> el estilo sería #menu2{...
<div class="menu2"> el estilo sería .menu2{...
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #12 (permalink)  
Antiguo 29/07/2011, 05:46
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

Cita:
Iniciado por Uncontroled_Duck Ver Mensaje
Tienes el estilo como div class, y en el menú como div id.

Edito:
<div id="menu2"> el estilo sería #menu2{...
<div class="menu2"> el estilo sería .menu2{...
nada, sigue igual, perdonad si soy un poco pesado :(
  #13 (permalink)  
Antiguo 29/07/2011, 05:58
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Centrar menu horizontal CSS

Pon el html del DIV que contiene esa lista y su correspondiente estilo, para ver como esta.
  #14 (permalink)  
Antiguo 29/07/2011, 06:15
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

Copio y pego todo el código:

Código:
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #00CCFF;
	margin-top: 0px;
	
}

/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* la eliminación del margen superior resuelve un problema que origina que los márgenes escapen de la etiqueta div contenedora. El margen inferior restante lo mantendrá separado de los elementos de que le sigan. */
	padding-right: 15px;
	padding-left: 5px;	 /* la adición de relleno a los lados del elemento dentro de las divs, en lugar de en las divs propiamente dichas, elimina todas las matemáticas de modelo de cuadro. Una div anidada con relleno lateral también puede usarse como método alternativo. */
}
a img { /* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
	border: none;
}

/* ~~ La aplicación de estilo a los vínculos del sitio debe permanecer en este orden (incluido el grupo de selectores que crea el efecto hover -paso por encima-). ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	text-decoration: none;
}

/* ~~ Este contenedor de anchura fija rodea a todas las demás divs ~~ */
.container {
	width: 960px;
	background: #FFFFFF;
	margin: 0 auto;
	text-align:center;
}

/* ~~ No se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño. Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipo vinculado. ~~ */
.header {
	background: #ADB96E;
}


.sidebar1 {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 700px;
	float: right;
}
.sidebar2 {
	float: left;
	width: 260px;
	background: #EADCAE;
	padding: 10px 0;
}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* este relleno reproduce en espejo el relleno derecho de la regla de encabezados y de párrafo incluida más arriba. El relleno se ha colocado en la parte inferior para que el espacio existente entre otros elementos de la lista y a la izquierda cree la sangría. Estos pueden ajustarse como se desee. */
}

/* ~~ Los estilos de lista de navegación (pueden eliminarse si opta por usar un menú desplegable predefinido como el de Spry) ~~ */
ul.nav {
	list-style: none; /* esto elimina el marcador de lista */
	border-top: 1px solid #666; /* esto crea el borde superior de los vínculos (los demás se sitúan usando un borde inferior en el LI) */
	margin-bottom: 15px;
	 /* esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav a, ul.nav a:visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
	padding: 5px 5px 5px 15px;
	display: block; /* esto da al anclaje propiedades de bloque, de manera que llene todo el LI en el que está contenido para que toda el área reaccione a un clic de ratón. */
	width: 160px;  /*esta anchura hace que se pueda hacer clic en todo el botón para IE6. Puede eliminarse si no es necesario proporcionar compatibilidad con IE6. Calcule la anchura adecuada restando el relleno de este vínculo de la anchura del contenedor de barra lateral. */
	text-decoration: none;
	background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
	background: #ADB96E;
	color: #FFF;
}

/* ~~ Los estilos de pie de página ~~ */
.footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
	background-color: #00CCFF;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ~~ Clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de .container) si .footer se elimina o se saca fuera de .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.Desarrollo {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	text-align: right;
}
Noticias {
	font-size: 12px;
}
.noticicas {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #000;
	text-align: center;
}
.noticias {
	font-family: Georgia;
	text-align: center;
}
body,td,th {
	font-size: 90%;
	color: #333;
	text-align: center;
}
.saludos {
	text-align: center;
}
.container .content .noticicas #table18 tr td p .saludos .Apple-style-span span font {
	text-align: center;
	margin: 0 auto;
}
.container .content .noticicas p .container span span {
	text-align: center;
	margin: 0 auto;
}
.container .content table {
	text-align: center;
	margin: 0 auto;
}
.container .content table {
	text-align: justify;
	margin: 0 auto;
}
.container .content table {
	text-align: justify;
	margin: 0 auto;
}
.container .content table tr td {
	text-align: justify;
	margin: 0 auto;
}

#menu2 {
	margin: 0 auto;
	
}

-->
</style></head>
Código PHP:
<body>
<
div class="container">
  <
div class="nav"><!-- end .header -->
    <
table width="100%" border="0" cellspacing="0">
      <
tr>
        <
th width="6%" align="left" nowrap="nowrap" bgcolor="#00CCFF" class="Desarrollo" scope="col" text-align="left"><!-- TemplateBeginEditable name="EditRegion6" --><text-align"justify"><g:plusone></g:plusone><!-- TemplateEndEditable --></th>
        <
th width="94%" align="right" nowrap="nowrap" bgcolor="#00CCFF" class="Desarrollo" scope="col">Desarrollado por MunY</th>
      </
tr>
    </
table>
    <
img src="cabecedra prueba2.JPG" width="961" height="215" align="middle" />
    <
table width="100%" border="0" cellspacing="0" align="middle">
      <
tr>
        <
td align="center" bgcolor="#00CCFF">
          <
table width="100%" border="0" align="center" cellspacing="0">
            <
tr>
              <
td height="21" align="center"
    <
div id="menu2">
 <
ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 853px; height: 35px;">
  <
li class="spaced_li"><a href="index.php"><img src="Botones/ebbtcbinsmenu1_0.gif" alt="INICIO" name="ebbcbinsmenu_8" width="121" height="35" border="0" id="cbi_cbinsmenu_8" style="vertical-align: bottom;" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_9" src="Botones/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_9" width="121" height="35" style="vertical-align: bottom;" border="0" alt="CONTACTO" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_3" src="Botones/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="121" height="35" style="vertical-align: bottom;" border="0" alt="COSITAS
NUESTRAS" 
title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_4" src="Botones/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="121" height="35" style="vertical-align: bottom;" border="0" alt="DESCARGAS" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_5" src="Botones/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="121" height="35" style="vertical-align: bottom;" border="0" alt="ACTUACIONES" title="" /></a></li>
  <
li class="spaced_li"><a><img id="cbi_cbinsmenu_6" src="Botones/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="121" height="35" style="vertical-align: bottom;" border="0" alt="FORO" title="" /></a></li>
  <
li><a><img src="Botones/ebbtcbinsmenu7_0.gif" alt="CONTACTO" name="ebbcbinsmenu_7" width="121" height="35" border="0" id="cbi_cbinsmenu_7" style="vertical-align: bottom;" title="" /></a></li></ul>

            
            </
div>
            <
script type="text/javascript" src="Botones/cbjscbinsmenu.js"></script></td>
            </tr>
          </table> 
Con las instrucciones y todo de la plantilla xD
  #15 (permalink)  
Antiguo 29/07/2011, 06:29
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Centrar menu horizontal CSS

Añade esto a tu código.

Código CSS:
Ver original
  1. #menu2 ul{
  2.     margin: 0 auto;
  3. }


Por que tenias que llamar a menu2 y a la ul de dentro para que pudiese mantenerla a margin auto.

Saludos
  #16 (permalink)  
Antiguo 29/07/2011, 12:39
Avatar de ermuni  
Fecha de Ingreso: noviembre-2010
Mensajes: 33
Antigüedad: 13 años, 5 meses
Puntos: 1
Respuesta: Centrar menu horizontal CSS

Cita:
Iniciado por Batan Ver Mensaje
Añade esto a tu código.

Código CSS:
Ver original
  1. #menu2 ul{
  2.     margin: 0 auto;
  3. }


Por que tenias que llamar a menu2 y a la ul de dentro para que pudiese mantenerla a margin auto.

Saludos
Buah!!! Muchisimas gracias!!!! por fin arreglado

Gracias a todos por intentarlo igualmente

Etiquetas: horizontal, fondo
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:45.