Botones con esquinas redondeadas y selectores CSS

[canon882]

Estimados,

Buen día. Vengo a Uds., porque tengo una duda. Les comento que recién voy produndizando en el CSS avanzado y se me ha presentado un "ligero" problema. Resulta que debo de hacer un menú que tenga los laterales semicirculares. Para esto, no debo de usar la propiedad "round-corner" de CSS, ya que debo de aplicar selectores. Asimismo, al hacer hover en dichos botones, se debe de cambiar de color de fondo. Lo he logrado, pero no de la manera que se debe. He logrado que se cambie el fondo, pero al poner el puntero sobre otro elemento y no sobre el botón en si. Acá les dejo el código CSS y HTML y un enlace donde pueden descargar mi ejemplo:

Enlance de descarga: www.fernandezramirez.com/forosdelweb/selectores.zip

Ejemplo:www.fernandezramirez.com/forosdelweb/selectores/

Mi CSS

Código HTML:

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:21px;
}

a {
	text-decoration:none;
	font-weight:normal;
}

ul {
	list-style:none outside;
	margin:0px;
	padding:0px;
}

li {
	list-style:none outside;
	margin:0px 0px 0px 20px;
	padding:0px;
}

.left {
	display:block;
	float:left;
	width:15px;
	height:30px;
	background:url("menu_item_a_01.png");
}

.center {
	display:block;
	float:left;
	padding:5px 5px 4px 5px;
	background:#333;
	color:#fff;
}

.right {
	display:block;
	float:left;
	width:15px;
	height:30px;
	background:url("menu_item_a_02.png");
}

a:hover.menu + ul a span.left {
	background:url("menu_item_a_hover_01.png");
}

a:hover.menu + ul a span.center {
	background:#f60;
}

a:hover.menu + ul a span.right {
	background:url("menu_item_a_hover_02.png");
}

Mi HTML

Código HTML:

<a class="menu" href="#">lorem ipusm dolor sit amet</a>

<ul>
	<li>
    	<a href="#">
        <span class="left"></span>
        <span class="center">Centro</span>
        <span class="right"></span>
        </a>
    </li>
</ul> 

[snowmanchip]

Hola..creo que no entendí muy bien pero si quieres usar bordes redondeados sin imágenes usa border-radius,
mira esta página:

http://css3pie.com/

o esta:

http://border-radius.com/

Saludos

[ForoLonch]

Yo para hacer botones redondeados y sin imagenes uso border-radius como dice snowmanchip. Además les puede agregar mas efectos de sombras y gradientes... Si quieres un ejemplo de botones redondeados, con efecto cristal y sombra, visita este ejemplo:

[URL="http://hijosdelspectrum.blogspot.com.es/2012/09/css-botones-redondeados-con-brillo.html"]botones redondeados con brillo[/URL]

Un saludo

[furoya]

Creo que el problema no es de CSS sino de diseño.

No es que lo que pedís no se pueda hacer. Pero hay otras formas más simples. Para la estructura que estás usando, casi conviene hacerlo con javascript.

En primer lugar, si tus imágnes ya tienen medidas fijas, las podés poner antes y después del botón con texto usando :after y :before.
Eso se maneja más fácil con :hover que andar apuntando a varios span.

Pero en vez de cambiar imágenes para simular el encendido, lo que podés hacer es 'pintar' el fondo de una capa. En ésta vas a poner una imagen derecha, el texto, y una imagen izquierda. Las imágenes son rectángulos con semicírculos inscriptos, tal como los hiciste, pero con cada semicírculo transparente; y el "sobrante" con el color del fondo del documento.

Al cambiar background-color del bloque contenedor con :hover, se van a ver los medio círculos transparentes y el fondo del texto también transparente de ese color.

Podés tener problemas si cada texto tiene distintos anchos y querés igualarlos, pero como no tengo idea de dónde lo vas a usar...

Imagenes en Menu por CSS

Barra de volumen

reloj digital en javascript ke funcione en mozilla.. #18

[javiandgo]

Personalmente no entiendo cual es el rollo de usar tantos elementos si puedes lograr el mismo efecto con menos lineas de código. Dices profundizar en CSS avanzado... pues creo no vas a avanzar así, teniendo en cuenta que CSS3 es donde estamos y CSS4 para donde vamos.

Código HTML:

<a  href="#">lorem ipusm dolor sit amet</a>
 
<ul class="menu">
    <li>
        <a href="menu-item">Centro</a>
        </li>
</ul>
 

Código CSS:

.menu a.menu-item {
background: #333;
padding: 5px 10px;
border-radius:5px;
}
 
.menu a.menu-item:hover {
background:#f60;
}
 

furoya ha acertado bastante mejor en orientarte sobre mejorar el css teniendo los selectores, con 2 son suficientes no hace falta un tercero.

En cuanto a la parte que el boton hace :hover en un elemento diferentes es por el orden en el cual estan declaradas las propiedades CSS del Selector

Código CSS:

a:hover.menu + ul a span.left {
    background:url("menu_item_a_hover_01.png");
}
 

aquí estas diciendo que cuando el elemento a con la clase .menu este seleccionado cambie el fondo del elemento ul a span.left

Código CSS:

ul.menu > li a:hover span.left {
    background:url("menu_item_a_hover_01.png");
}
 

aquí si estas diciendo que todos los elementos span.left que se encuentren dentro de li a:hover y directamente debajo del elemento ul con clase .menu cambien el color del fondo ¡ojo! la clase .menu debe ser declarada al elemento de lista ul y no al link de arriba

[furoya]

Muy bien lo de poner el código como correspondía para que funcionase.
Yo dije que sí se podía, pero no escribí el ejemplo.

(Tampoco puse los de mis recomendaciones, pero a canon882 no le iba a hacer mal buscar ni leer los enlaces.)


En realidad volví para hacer una aclaración : CSS3 es a donde vamos, porque aún no está terminado y si los navegadores lo aceptan es porque quieren. Y CSS4 (5; 6; 3275; ...) es un divague de muchos que no entiendo a título de qué promocionan en la web.
Hay varios debates sobre esto, incluso aquí en el Foro.