Ver Mensaje Individual
  #6 (permalink)  
Antiguo 27/02/2011, 18:33
Avatar de kiM-
kiM-
 
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 16 años
Puntos: 2
Respuesta: Duda con botones, redondeos y colocación en CSS.

Vaya, muchas gracias por responder, ciertamente me has resuelto muchas dudas, pero me han venido nuevas dudas a la cabeza. El tema de los links era que si a:hover era la acción de pasar el ratón por encima, y así es.

Bueno, principalmente mis dudas son las siguientes, y son pocas:

1. Estoy maquetando un sitio haciendo uso de características similares a las del sitio (pkstation) y hay algo que no consigo que me salga y es que; al pinchar en un botón/div se quede de otra manera, marcado por así decirlo, lo único que he conseguido es cambiar el efecto al pasar el ratón por encima pero no consigo realizar el efecto después de pulsar el div.

Ejemplo de la misma web:

Botón (con href) sin pulsar:
Cita:
.botones_header a {
padding-left: 20px;
padding-right: 20px;
height: 28px;
background-image: url("../img/dark_blue_menu.png");
float: left;
margin-right: 7px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-decoration: none;
font-weight: bold;
font-size: 10pt;
color: #EEEEEE;
text-align: center;
}
Botón (con href) al pasar el ratón por encima:
Cita:
.botones_header a:hover {
background-image: url("../img/light_blue_menu.png");
}
Botón (con href) tras pulsar el botón:
Cita:
.botones_header_marcado a {
padding-left: 20px;
padding-right: 20px;
height: 28px;
border-top: 1px solid #CDF4FF;
border-left: 1px solid #CDF4FF;
border-right: 1px solid #CDF4FF;
background-image: url("../img/gradient_blue_light_boton.png");
float: left;
margin-right: 7px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-decoration: none;
font-weight: bold;
font-size: 10pt;
color: #4E676E;
text-align: center;
text-shadow: #FFFFFF 0 1px 1px;
}
El efecto que nno consigo es el último del ejemplo, por más que pulso no consigo que se quede de la manera que espero... ¿Qué hago mal?

2. Otra duda que me corroe es que se puede apreciar que el degradado azul claro de la web (http://pkstation.com/themes/blue/img...background.png) se une con los botones/divs del menú de arriba (los de Noticias, Foros, etc...) cuando está marcado, yo no consigo lograr eso marcado o sin marcar, ¿cuál es la manera exacta?

Saludos y muchísimas gracias!