como le hago esto ak menu?

[mx35]

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;

[kseso?]

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

.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

[Null_]

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

[Mikmoro]

Iniciado por Null_

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.

[Null_]

Iniciado por Mikmoro

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

[Mikmoro]

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.

[mx35]

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

[kseso?]

Me alegro de haber supuesto bien.
Un saludo