Foros del Web » Creando para Internet » CSS »

como le hago esto ak menu?

Estas en el tema de como le hago esto ak menu? en el foro de CSS en Foros del Web. hola amigos anteriromenete puse un tema por este problema, no hallo como centrar y reducir el ancho del menu en css aqui les pongo el ...
  #1 (permalink)  
Antiguo 18/10/2008, 22:12
 
Fecha de Ingreso: julio-2008
Mensajes: 98
Antigüedad: 9 años, 4 meses
Puntos: 0
como le hago esto ak menu?

hola amigos anteriromenete puse un tema por este problema, no hallo como centrar y reducir el ancho del menu en css aqui les pongo el css
Código HTML:
.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {
	width: 100%;
	height: 27 px;
	margin: 0 auto;
	padding: 0;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
	background-position:center;
}
.bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.horizontal ul li a {
	display: block;
	height: 27px;
	padding-left: 35px;
	float: left;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */



/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
	width: 250px;
	margin: 0;
	padding: 0;
	display: block;
}
.bubplastic.vertical ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.vertical ul li {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
	display: block;
	margin: 0;
	width: 100%;
	padding-left: 35px;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
	display: block;
	margin: 0;
	width: 100%;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */



/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}


/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}


/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}


/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}


/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}


/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}


/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}


/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
}

#test li {
	display: block;
	border: solid 1px red;
__________________
http://magcmotors.blogspot.com/
  #2 (permalink)  
Antiguo 19/10/2008, 09:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como le hago esto ak menu?

Hola mx35
Al no poner el código html obligas obligas a que las respuestas partan ya de una suposición.
Tienes en tu css
Cita:
.bubplastic.horizontal {
width: 100%;
height: 27 px;
margin: 0 auto;
padding: 0;
background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
background-position:center;
}
Lo que me hace pensar pensar que todo tu menú está dentro de otro div que es el que hace de limitador/contenedor y con una anchura determinada.
Así que para reducir el ancho del menú tienes 2 opciones:
.-cambias el width de ese contenedor desconocido
.-cambias el valor de ".bubplastic.horizontal" 100% a otro que te satisfaga.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 19/10/2008, 09:18
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: como le hago esto ak menu?

Prueba reemplazando esto :P

.bubplastic .vertical {
width: 250px;
margin: auto;
padding: 0;
display:block;
}

y te digo algo... cuando tenemos 2 selectores .nombre1 y .nombre2... estos deben estar separado minimo por un espacio.
y tu tienes muchos de tus selectores juntos... eso esta muy mal.

Por ejemplo:
.bubplastic.vertical

debes escribirlo:
.bubplastic .vertical

Suerte :D
  #4 (permalink)  
Antiguo 19/10/2008, 11:31
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 le hago esto ak menu?

Cita:
Iniciado por Null_ Ver Mensaje
y te digo algo... cuando tenemos 2 selectores .nombre1 y .nombre2... estos deben estar separado minimo por un espacio.
y tu tienes muchos de tus selectores juntos... eso esta muy mal.

Por ejemplo:
.bubplastic.vertical

debes escribirlo:
.bubplastic .vertical

Suerte :D
No es necesariamente así. Cuando un selector lleva dos clases que no están separadas por un espacio significa que afectará a los lementos que tengan ambas clases, es decir, si pone algo tipo .uno.dos, afectará a los elementos que tengan las clases uno y dos; no a las que tengan sólo uno o sólo dos, sino a las que tengan ambas clases.

Para saber si en este caso es un error o es la clase doble de la que hablo, habría que ver el html.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 19/10/2008, 11:46
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: como le hago esto ak menu?

Cita:
Iniciado por Mikmoro Ver Mensaje
No es necesariamente así. Cuando un selector lleva dos clases que no están separadas por un espacio significa que afectará a los lementos que tengan ambas clases, es decir, si pone algo tipo .uno.dos, afectará a los elementos que tengan las clases uno y dos; no a las que tengan sólo uno o sólo dos, sino a las que tengan ambas clases.

Para saber si en este caso es un error o es la clase doble de la que hablo, habría que ver el html.
pues a mi me dio error juntando ambos selectores
  #6 (permalink)  
Antiguo 19/10/2008, 12:01
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 le hago esto ak menu?

No, pues es algo perfectamente posible, como explico. No sé qué es lo que te dió error, pero es la forma de indicar algo con dos clases y sólo si tiene ambas.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 19/10/2008, 20:12
 
Fecha de Ingreso: julio-2008
Mensajes: 98
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: como le hago esto ak menu?

gracias amigos por su interes, me sirvio la solucion propuesta por kseso?. a mi no me da error tener 2 selectores sin espacio pero de todas formas lo tomare en cuenta.

gracias por su interes salu2
__________________
http://magcmotors.blogspot.com/
  #8 (permalink)  
Antiguo 20/10/2008, 07:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como le hago esto ak menu?

Me alegro de haber supuesto bien.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:18.