Duda con botones, redondeos y colocación en CSS.

kiM- · #1 (**permalink**) 26/02/2011, 20:46

Pués vereis, he estado viendo una páagina web cuyo diseño es practicamente todo CSS excepto algunas imágenes y degradados, la web en concreto es www.pkstation.com

Vereis, he estado viendo su código y he intentado hacer cosas similares pero hay bstantes cosas que aún no me han quedado claro... Os dejo mis preguntas baasándome en la web.

1. Cómo podreis observar, en el menú de arriba, el que pone, Noticias, Foros, Pokéteca, Quiz y Blogs, tiene una forma redondeada (supongo que he hecho con radius), hasta ahí bien pero haay aalgo que no me queda claro del todo. El degradado que tiene, ¿es un degradado aparte o es en propio CSS? ¿y el de sustitución?

2. Hay otra cosa que no me ha quedado claro de ese menú, por lo que he visto no ha definido un ancho en los divs/botones, supongo que el ancho está decidido por cuánto escribas dentro del div, pero por máas que intento no logro hacer que mi div se establezca al ancho de lo que escriba, se queda grande (por defecto), ¿cómo lo ajusto?

3. El estilo #x a (seguido de una a, sí) y el estilo #x a:hover es lo que hace que tenga ese degradado y que al pasar el ratón por encima cambie, al ser un link, ¿no? Se establece el efecto al div/botón entero con solo ponerle un link al texto de dentro?

4. He visto que en el propio css, en el mismo menú que comento, tiene puesto float: right, left. ¿Es para que no pierdan su lugar o se descoloquen?

5. Me he fijado y o el creador ha usado unas medidas muy justas para 1024x768 o no se muestra todo el ancho, de ser así, de qué forma podría ocultar lo que sobre de un ancho si me pasase?

6. ¿Se podría hacer algo similar usando simplemente sprites?

Sé que mis preguntas son algo simplonaas pero es que soy algo tozudo, estoy mirando varias webs y fijándome en sus códdigos y esta me llamó mucho la atención^^

Saludos y gracias =P

ArturoGallegos · #2 (**permalink**) 26/02/2011, 23:10

1. Cómo podreis observar, en el menú de arriba, el que pone, Noticias, Foros, Pokéteca, Quiz y Blogs, tiene una forma redondeada (supongo que he hecho con radius), hasta ahí bien pero haay aalgo que no me queda claro del todo. El degradado que tiene, ¿es un degradado aparte o es en propio CSS? ¿y el de sustitución?
los bordes como ya mencionas es con border-radius y los degradados son con imágenes puedes ver en su código por ejemplo el que esta resaltado

Cita:

.botones_header_marcado a {
background-image: url("../img/gradient_blue_light_boton.png");
border-left: 1px solid #CDF4FF;
border-right: 1px solid #CDF4FF;
border-top: 1px solid #CDF4FF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #4E676E;
float: left;

2. Hay otra cosa que no me ha quedado claro de ese menú, por lo que he visto no ha definido un ancho en los divs/botones, supongo que el ancho está decidido por cuánto escribas dentro del div, pero por máas que intento no logro hacer que mi div se establezca al ancho de lo que escriba, se queda grande (por defecto), ¿cómo lo ajusto?
para que el div tome el ancho de su contenido por default puedes usar la propiedad float como lo hacen en ese sitio

Cita:

.botones_header_marcado a {
background-image: url("../img/gradient_blue_light_boton.png");
border-left: 1px solid #CDF4FF;
border-right: 1px solid #CDF4FF;
border-top: 1px solid #CDF4FF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #4E676E;
float: left;

3. El estilo #x a (seguido de una a, sí) y el estilo #x a:hover es lo que hace que tenga ese degradado y que al pasar el ratón por encima cambie, al ser un link, ¿no? Se establece el efecto al div/botón entero con solo ponerle un link al texto de dentro?
what? como que no entendí muy bien que quisiste decir

4. He visto que en el propio css, en el mismo menú que comento, tiene puesto float: right, left. ¿Es para que no pierdan su lugar o se descoloquen?
yo todos los veo con float:left; y es para que se coloquen en linea uno al lado del otro, aparte de conseguir que tomen el ancho de su contenido

5. Me he fijado y o el creador ha usado unas medidas muy justas para 1024x768 o no se muestra todo el ancho, de ser así, de qué forma podría ocultar lo que sobre de un ancho si me pasase?
el sitio en cuestión esta tiene un ancho de 990px el resto lo cubrió divs de fondo al 100% de ancho con un backgraund que se pueda repetir en el eje x de tal forma que cubre el sobrante.

6. ¿Se podría hacer algo similar usando simplemente sprites?
Si, y no seria tan complicado

kiM- · #3 (**permalink**) 27/02/2011, 04:38

Vaya, muchas gracias por responder tan meticulosamente

Pués, con lo de a, a:hover me refiero por ejemplo, en este código:

.botones_header_marcado a {
background-image: url("../img/gradient_blue_light_boton.png");
border-left: 1px solid #CDF4FF;
border-right: 1px solid #CDF4FF;
border-top: 1px solid #CDF4FF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #4E676E;
float: left;

La a en negrita significaría un link, no? y a:hover siggnificaría un link después de pinchar encima o al hacerlo, me equivoco? si se linkea solo el texto de dentro del div botón, el mismo div botón cambiaría con los atributos que hay en #div A, no?

Dices que usa 990px y el resto es 100% de ancho, es decir se ajusta al tamaño del navegador, pero al modificar el tamaño del explorador la anchura no cambia. Otra cosa y es que para rellenar de fondo con divs sobrante sería hacerlo en el mismo contenedor de todo, no es así?

Saludos y gracias!

kiM- · #4 (**permalink**) 27/02/2011, 07:56

Siento hacer doblepost pero me abarca otra duda, y es la siguiente:

El el código del css:

Cita:

#spotlight {
width: 990px;
height: 292px;
background-image: url("../img/#spotlight {
width: 990px;
height: 292px;
background-image: url("../img/gradient_lightblue_up_background.png");
background-repeat: repeat-x;
margin: 0 auto;");
background-repeat: repeat-x;
margin: 0 auto;

Podéis observar que el fondo "gradient_lightblue_up_background.png" no ocupa solamente el spotlight sino también los botones cuando estas en la sección que hayas pinchado (como noticias, que también es del mismo color, el degradado azul celeste), si son dos divs diferentes cómo se hace eso? alguie me explica?

Saludos y gracias, yy perdón por postear dos veces!

ArturoGallegos · #5 (**permalink**) 27/02/2011, 12:24

La a en negrita significaría un link, no?
Si, el colocar (a) hace referencia a los links en sus 4 modalidades :link, :active, :visited y :hover (podria darse una 5ta modalidad :focus)
y a:hover siggnificaría un link después de pinchar encima o al hacerlo, me equivoco?
No, el efecto al pinchar un link es el :focus, el efecto :hover es antes aplica unicamente cuando pasas el ratón por encima del elemento.
si se linkea solo el texto de dentro del div botón, el mismo div botón cambiaría con los atributos que hay en #div A, no?
si se linkea?¿ creo que te refieres a dar clic si es así la respuesta es...
No, el div no esta cambiando junto con el link si observas en el css tiene

Código CSS:

Ver original.botones_header_marcado {
    float: left;
}
.botones_header_marcado a {...}

con el float:left; le esta indicando que tome el mismo ancho que tenga su contenido y el div no tiene mas estilos que eso, en ese enlace tu no estas viendo el fondo del div solo estas viendo el enlace

Dices que usa 990px y el resto es 100% de ancho, es decir se ajusta al tamaño del navegador, pero al modificar el tamaño del explorador la anchura no cambia.
así es tiene 990px en su sitio de echo utiliza una forma un tanto peculiar para realizar ese efecto aunque existen varios... en este sitio lo hacen así:

Código HTML:

Ver original<div id="headerbg"><!-- Div para el fondo con ancho al 100% -->
    <div id="header"><!-- Div centrado con ancho 990px -->
    todo el contendio del header
    </div>
</div>
<!-- SPOTLIGHT -->
<div id="spotlightbg"><!-- Div para el fondo con ancho al 100% -->
    <div id="spotlight"><!-- Div centrado con ancho 990px -->
    todo el contendio del spotlight
    </div>
</div>
<!-- CONTENT -->
<div id="content"><!-- Div centrado con ancho 990px -->
    todo el contenido del sitio
</div>
<!-- FOOTER -->
<div id="footerbg" align="center"><!-- Div para el fondo con ancho al 100% y texto centrado-->
todo el contenido del footer
</div>

Otra cosa y es que para rellenar de fondo con divs sobrante sería hacerlo en el mismo contenedor de todo, no es así?
No necesariamente, puede usarse el mismo div, pueden usarse varios como te mostré en el punto anterior, o puede usarse uno o varios div fuera del contenedor del sitio con position:absolute; y z-index:-10

kiM- · #6 (**permalink**) 27/02/2011, 18:33

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!

ArturoGallegos · #7 (**permalink**) 27/02/2011, 20:08

el efecto de que se consigue aplicando una clase distinta en tu link según la pagina en que se encuentra, si estas usando php o aspx puede ser automático pero si son html puro tendrás que hacerlo manual, si observas el código del sitio en cuestion notaras que el link de la pagina donde te encuentras tiene una clase distinta al del resto de los links

el link marcado tiene class="botones_header_marcado" y el resto de los links tiene la clase="botones_header"

(si cargas el contenido mediante ajax puedes cambiar la clase en el evento onclick)
---------------

y tu segundo punto pues es mas de diseño que html o css, tienes que conseguir que tus imágenes coincidan en los colores