Novato en CSS, dudas básicas

twilvaro · #1 (**permalink**) 16/12/2012, 13:10

Buenas. Estoy empezando con el tema maquetación (sí, esa parte en la que para cualquier trabajo complejo te vuelve loco). Yo siempre he sido de diseño gráfico y mi especialidad es Fireworks.

La cuestión es que estoy colaborando con una ONG llamada "The AIRE Centre" y me han encargado el diseño de la postal de felicitación navideña. Hasta aquí todo OK.

Los problemas me han llegado a la hora de pasarlo a código. Aún no sé lo suficiente como para decirle a un elemento ul que está dentro de un div que mide 500x900 que se posicione en las coordenadas x e y que yo precise dentro de la caja (div).

Pensé que este sería mi único problema, así somos los novatos... Y es que en los estilos, para los hover he añadido la propiedad box-shadow y no me sale correctamente. El problema es que sale con un "padding inferior" que yo no le he indicado en ningún momento.

Para que lo entiendan mejor aquí les dejo el resultado (pueden ver el código fuente): http://sortea.es/aire.html.

Me gustaría saber qué líneas he de añadir para posicionar la lista justo debajo de 'Seasons Greetings' y qué valores y propiedades añadirle a los hover para que la sombra quede sin padding. Como pueden ver, el text-shadow sí que funciona perfectamente (que por cierto, me acabo de dar cuenta que no le he añadido las compatibilidades).

Sé que lo suyo es investigar uno mismo, pero quieren revisar mañana Lunes para enviarlas el Martes. Llevo toda la tarde creando el código, pero no doy con la tecla...

Si alguien es tan amable de ayudarme le estaré eternamente agradecido, porque además esas líneas me servirán también para aprender.

Muchas gracias de antemano.

Un cordial saludo.

Bandit · #2 (**permalink**) 16/12/2012, 14:10

Hola twilvaro:
Vamo a ver si te entendí.
Si lo que quieres que los enlaces al Facebook y twitter se pongan debajo de: 'Seasons Greetings', simplemente crea una etiqueta nav después de ese texto.
Y con margin: puedes darle la separación que desees.

Espero haberte sido de ayuda.

twilvaro · #3 (**permalink**) 16/12/2012, 14:36

Seasons Greetings es mapa de bits. Es decir, todo el fondo es mapa de bits. Y los botones sociales son también imágenes pero por separado (no Sprite CSS). He creado un div especificando el fondo y ahora quiero que los botones estén sobre la imagen, bajo Seasons Greetings.

Para que lo entiendas mejor, aquí te dejo el código:

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css" media="screen">
	/* FONDO */
		#fondo {
			background: url(seasons.png);
			height: 500px;
			width: 900px;
		}
	/* FIN FONDO */
	
	/* ENLACES */
		#enlaces li {
			display: inline-block;
			margin-right: 5px;
		}
		#facebook a:hover {
			box-shadow: 0px 0px 10px yellow;
			-webkit-box-shadow: 0px 0px 10px yellow;
			-moz-box-shadow: 0px 0px 10px yellow;
			-o-box-shadow: 0px 0px 10px yellow;
		}
		#twitter a:hover {
			box-shadow: 0px 0px 10px yellow;
			-webkit-box-shadow: 0px 0px 10px yellow;
			-moz-box-shadow: 0px 0px 10px yellow;
			-o-box-shadow: 0px 0px 10px yellow;
		}
		#report a {
			font-weight: bold;
			color: white;
			font-family: Arial;
			text-decoration: none;
			background: none;
		}
		#report a:hover {
			text-shadow: 0px 0px 10px #33CCFF;
		}
	/* FIN ENLACES */
	</style>
</head>
<body>
	<div id="fondo">
		<ul id="enlaces">
			<li id="facebook"><a href="http://www.facebook.com/pages/The-AIRE-Centre/44633529942"><img src="facebook.png"></img></a></li>
			<li id="twitter"><a href="#"><img src="twitter.png"></img></a></li>
			<li id="report"><a href="report.pdf">Annual Report 2012</a></li>
		</ul>
	</div>
</body>
</html>

Bandit · #4 (**permalink**) 17/12/2012, 10:56

En la clase: enlaces adiciónale margin-top: el valor en px; que necesites para que se desplace en la vertical hacia abajo.

Espero haberte sido de ayuda,

pzin · #5 (**permalink**) 17/12/2012, 13:36

Comentar que <img> no se cierra con </img> (no existe). Se cierra con />:

Código HTML:

Ver original<img src="algo.png" />

O si usas HTML5, según tu caso, puede omitir el cierre:

Código HTML:

Ver original<img src="algo.png">

twilvaro · #6 (**permalink**) 18/12/2012, 10:37

Cierto Bonez, gracias.

Más que de margen, la solución era de padding Bandit. No me aclaraba porque no sabía que al sumarle padding tenía que restarle al tamaño definido en #fondo para que cuadrara bien.

Luego, los box-shadow no salían porque se lo estaba marcando a <a> en vez de a <img>.

En fin, tras mirar detenidamente olvidando las prisas, lo saqué rápido jeje.

Un saludo.

pzin · #7 (**permalink**) 18/12/2012, 12:52

Cita:

Iniciado por twilvaro

Más que de margen, la solución era de padding Bandit. No me aclaraba porque no sabía que al sumarle padding tenía que restarle al tamaño definido en #fondo para que cuadrara bien.

Mírate el modelo de caja de CSS. Para cambiar el modelo de caja puedes usar box-sizing:border-box —yo siempre lo hago, me molesta mucho el modelo de caja normal, es un sinsentido.

Cita:

Iniciado por twilvaro

En fin, tras mirar detenidamente olvidando las prisas, lo saqué rápido jeje.

Vísteme despacio que tengo prisa.

twilvaro · #8 (**permalink**) 18/12/2012, 14:40

Muchísimas gracias Bonez, otra cosa que aprendo (además, maravillosa). Si no me equivoco (es decir, según he leído) añadiendo varias líneas box-sizing: border-box; con -o-, -moz-, -webkit- y -ms- delante no debería tener problemas de compatibilidad ¿verdad?

Pensaba abrir un tema nuevo para una duda que me ha surgido, pero ya que estoy a ver si tengo la suerte de volver a contar con tus conocimientos.

Practicando con los bordes de las cajas me ocurre lo siguiente:

Si uso este código que dejo a continuación, pese a decirle en 'border' que sea azul aparecen negros:

Código HTML:

 <style type="text/css" media="screen">
		div {
		border: 3px blue;
		border-top: dashed;
		border-bottom: solid;
		}
	</style>

Sin embargo, si especifico a border-top y border-bottom que son estilos, se soluciona y salen en azul:

Código HTML:

 <style type="text/css" media="screen">
		div {
		border: 3px blue;
		border-top-style: dashed;
		border-bottom-style: solid;
		}
	</style>

No lo entiendo, porque se supone que style en border define su forma. ¿Por qué le afecta en modo shorthand y no recibe la orden de la primera propiedad que le da el valor azul? Es decir, sin los style recibe que el superior es línea discontinua y que el inferior es sólida (obvio, porque se supone que sería válido por el shorthand), sin embargo no la especificación de que sean azules...

Lo veo un poco ilógico, un poco al revés. Da igual que ponga style o no, que entiende y define la forma que va a tener el borde, sin embargo el color sólo lo percibe cuando le añado el style. Comprendo que lo normal sería que tuviese que poner un border-color: blue; para solucionarlo, y no añadir style a border-top y border-bottom.

Es una duda tonta lo sé, porque además simplemente es añadirle style, pero no llego a entender el por qué y quiero saber si estoy entendiendo bien los conceptos y la sintaxis a la hora de usar shorthand.

Bueno, gracias de nuevo y disculpa las molestias.

pzin · #9 (**permalink**) 18/12/2012, 18:15

Si no entiendes algo, prueba y cambia cosas para ver el comportamiento.

En CSS el orden de las cosas es importante. Primero especificas un borde sin estilo de borde, aunque tenga color, no tiene ningún estilo —aunque se lo pongas después.

Para hacer las cosas más fáciles, yo prefiero meter todo lo que pueda en una sola linea —léase shorthand— y me quito de problemas. Después puedes ser más específico para cambiar y ajustar algo. Depende de lo que vayas a necesitar.

Código CSS:

Ver originalborder: 3px dashed blue;
border-left: 0;
border-right: 0;
border-bottom-style: solid;

Normalmente se ahorra código, pero también tu caso es rarito.

Un caso más normal del día a día sería algo como:

Código CSS:

Ver originalborder: 3px dashed blue;
border-left: 0;
border-right: 0;

Puedes usar none en vez 0 pero son tres letras más.

pzin · #10 (**permalink**) 18/12/2012, 18:39

Cita:

Iniciado por twilvaro

Muchísimas gracias Bonez, otra cosa que aprendo (además, maravillosa). Si no me equivoco (es decir, según he leído) añadiendo varias líneas box-sizing: border-box; con -o-, -moz-, -webkit- y -ms- delante no debería tener problemas de compatibilidad ¿verdad?

No deberías no. Creo que en IE es de IE8 para abajo donde no funciona —aunque lo ideal sería olvidarse ya de IE8, pero a su vez no es práctico hacerlo. Ahora el punto curioso es que en IE6 y anteriores es como si box-sizing estuviera puesto a border-box —modelo de caja de IE: y un artículo muy viejo y conocido acerca del asunto: http://www.disenorama.com/articulos/...e-cajas-en-CSS*.

Yo de hecho uso sólo box-sizing sin prefijos, pero yo soy un mal ejemplo porque soy medio anarquista.

* Lo que llaman el modelo según Bill Gates & Co es como en mi opinión debería ser, por lógico, por facilidad y comodidad.

twilvaro · #11 (**permalink**) 19/12/2012, 11:37

No tiene por qué ser un mal ejemplo ser medio anarquista, y más cuando dan tanto por... en fin, que me lanzo y no puede ser.

De verdad, muchas gracias de nuevo.