Foros del Web » Creando para Internet » CSS »

centrar menu de www.13styles.com ???

Estas en el tema de centrar menu de www.13styles.com ??? en el foro de CSS en Foros del Web. Hola a todos, He buscado en www.13styles.com un menu para mejorar mi web, queda bonito pero no consigo que se centre en la pagina. Al ...
  #1 (permalink)  
Antiguo 31/10/2008, 04:07
 
Fecha de Ingreso: abril-2003
Ubicación: Valencia
Mensajes: 221
Antigüedad: 14 años, 8 meses
Puntos: 7
centrar menu de www.13styles.com ???

Hola a todos,

He buscado en www.13styles.com un menu para mejorar mi web, queda bonito pero no consigo que se centre en la pagina.

Al final, poniendo padding:0 0 0 235px, he conseguido que se centre cuando la pantalla esta en 1024px pero no cuando la pantalla no esta maximizada o con otra resolucion.

Alguien me puede ayudar con el codigo?
A proposito, que significa la lista de numeros padding:0 0 0 235px?

El codigo es el siguiente:

Cita:
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:absolute;left:50%;margi n-left:-501px;height:33px;width:1002px;color:#E0E0E0;backg round:#143D55;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#143D55 url(../image/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 235px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(../image/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(../image/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(../image/dolphin_right-ON.gif) no-repeat top right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
Gracias
Chocovo
  #2 (permalink)  
Antiguo 31/10/2008, 05:04
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: centrar menu de www.13styles.com ???

Probá con esto:


#dolphinnav{
position:relative;
height:33px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#143D55 url(../image/dolphin_bg.gif) repeat-x bottom left;
/*padding:0 0 0 235px;*/
margin:0 auto;
}
  #3 (permalink)  
Antiguo 31/10/2008, 05:58
 
Fecha de Ingreso: abril-2003
Ubicación: Valencia
Mensajes: 221
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: centrar menu de www.13styles.com ???

Hola DragonX,

Con ese cambio lo que ocurre es que me pone el menu a la izquierda.
La barra de menu ocupa todo el ancho de la pantalla pero el texto del menu a la izquierda y lo quisiera centrado.

De todas formas, muchas gracias
Chocovo
  #4 (permalink)  
Antiguo 31/10/2008, 06:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrar menu de www.13styles.com ???

A ver si dándole a #dolphincontainer{margin 0 auto;} acertamos
Cita:
A proposito, que significa la lista de numeros padding:0 0 0 235px
El espacio entre el contenido de ese elemento y sus límites. Una especie de sangría interior o márgenes internos.
El orden es: arriba, derecha, abajo, izquierda
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 01/11/2008, 03:37
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: centrar menu de www.13styles.com ???

Que es mejor poner:
Código:
padding:0 0 0 235px
ó
Código:
padding-left:235px
¿??

Aresillo!!
  #6 (permalink)  
Antiguo 01/11/2008, 11:49
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: centrar menu de www.13styles.com ???

Para que te funcione bien el "margin:0 auto;" que te propone DragonX tienes que colocar adecuadamente el doctype, porque no funciona en modo quirks.

Saludos
  #7 (permalink)  
Antiguo 01/11/2008, 13:10
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: centrar menu de www.13styles.com ???

Cita:
Iniciado por ssclamp Ver Mensaje
Para que te funcione bien el "margin:0 auto;" que te propone DragonX tienes que colocar adecuadamente el doctype, porque no funciona en modo quirks.

Saludos
Pero aparte el margin 0 auto no puede funcionar puesto que esa caja no tiene ancho definido, por lo que está obligada a ocupar el 100%, de manera que no es posible centrarla. Otra cosa es su contenido, que si son elementos de línea se centran poniéndole a la caja text-align: center.

Esta es la manera más simple de centrar un menú:

HTML
Cita:
<div id="menu">
<ul>
<li><a href="#">INDEX</a></li>
<li><a href="#">VIEW</a></li>
<li><a href="#">INSERT</a></li>
<li><a href="#">REGISTER</a></li>
</ul>
</div>
CSS
Cita:
* {margin: 0;padding: 0;}

#menu {margin: 0 auto;
width: 700px;
height: 35px;
text-align: center;
}
ul {list-style-type: none;
border: solid 1px #f00;
}
li {padding: 0 29px;
display: inline;
text-align: center;
}
a {line-height: 35px;}
Aquí un ejemplo
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 01/11/2008, 20:53
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: centrar menu de www.13styles.com ???

Más claro, sólo el agua... y con ejemplo y todo!

Gracias, viejo.

Saludos
  #9 (permalink)  
Antiguo 02/11/2008, 13:46
 
Fecha de Ingreso: abril-2003
Ubicación: Valencia
Mensajes: 221
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: centrar menu de www.13styles.com ???

Hola a todos,

Muy interesante el codigo del menu, pero nos hemos alejado del codigo original de www.13styles.com y de los fondos de los botones.

De todas formas, muchas gracias
Chocovo
  #10 (permalink)  
Antiguo 02/11/2008, 18:05
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: centrar menu de www.13styles.com ???

mmm... no entiendo eso de "alejarnos del menú de...". Que yo sepa, tu consulta era esta:

Cita:
Iniciado por chocovo Ver Mensaje
He buscado en www.13styles.com un menu para mejorar mi web, queda bonito pero no consigo que se centre en la pagina.
Y obviamente la respuesta es cómo centrar un menú, no cómo centrar tu menú, que a demás no sabemos cuál has elegido.

¿Con la información que te hemos dado serías capaz de centrar tu menú?

Si no es así, concreta tu consulta.
__________________
Visita mi nueva web idplus.org
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 02:49.