Solución a dos pesadillas del CSS
30 de septiembre del 2007 
Escrito por Alex Barros Hoy he encontrado del tirón, en un mismo blog, la solución a dos de mis mayores pesadillas en la maquetación CSS.
#1: Float y Clear
Cuando queremos desplazar un elemento a la izquierda o a la derecha, solemos usar la propiedad float, que saca al elemento del flujo de contenido y lo desplaza a donde queramos.
El problema viene cuando este elemento tiene un elemento padre (que lo contiene) y queremos que lo envuelva.
Esto es lo que yo quiero:
Y esto lo que obtengo:
(He de aclarar que no se trata de ningún error, sinó que el estándar CSS especifica su comportamiento de esta forma)
La solución tradicional es incluir un tercer div a continuación de los dos flotantes, y aplicarle la propiedad clear:both, pero esto nos hace meter un div sin razón de ser, y nos hace la página un poco menos semántica.
La solución que he encontrado ahora, mucho mejor, es aplicar al elemento padre la propiedad overflow:hidden. De esta forma evitamos tener que meter elementos y toquetear el flujo (que a veces trae problemas) y obtenemos el resultado deseado.
[para profundizar un poco más en este tema...]
#2: El marquito de los enlaces
Otro problema que encontraba, aúnque menos grave, era el marquito que aparece en los enlaces cuando pulsas en ellos, símplemente me parece antiestético.
Esta propiedad es outline, y podemos bloquearla simplemente introduciendo en nuestra hoja de estilos el siguiente código:
-
a {
-
outline-style: none;
-
}
[para profundizar un poco más en este tema...]
Ambas soluciones magistrales las he encontrado en el blog PlanSeldon.com.
Categorias: Código, CSS, Diseño, HOWTO/CóMO |
Respeta el copyleft
septiembre
22:44 felipe.lavin Ha dicho:
Para el primer problema: a veces, si el contexto lo justifica, una buena alternativa puede ser agregar un
<hr />luego de los dos<div>, tipo:<div class="contenedor"><div class="contenido"></div><!--float-left-->
<div class="navegacion"></div><!--float-right-->
<hr /><!--clear:both-->
</div>
claro que en ese caso el
hrno debe llevardisplay:none, a lo más,visibility:hidden, ya que con la primera es “como si no existiera”, mientras que con la segunda simplemente indica que es invisible. Y/o agregar otros estilos, por supuestoLa idea era extender el elemento contenedor, ¿no?
Bueno, de todos modos… he ahí una opción. Saludos
septiembre
23:05 Alex Barros Ha dicho:
No creo que añadir el br sea más semantico que un div. Me quedo con la expuesta en el blog; te ahorras html, y el código es más claro.
octubre
5:28 felipe.lavin Ha dicho:
No es por ser quisquilloso, pero un
<hr />tiene mucha semántica si se utiliza como lo que es, una barra horizontal.Por lo que recuerdo, tanto XHTML 2 como HTML 5 mantenían el elemento, en el primer caso se renombraba a
separatory en el segundo seguía igual… ¿o era al revés? Eso era hace tiempo, habrá que ver en qué están ahora.octubre
15:07 artberri Ha dicho:
Buena solución, y sí, ahora tengo una pesadilla menos.
octubre
13:17 Alex Barros Ha dicho:
@felipe.lavin: mis disculpas, entendí BR en lugar de HR. En ese caso sí tiene algo de semántica (aunque no le daría yo el 100%)
De todas formas, ese elemento que te ahorras. En muchos contextos no es tan importante la separación como para poner un HR
@artberri: Me alegra oir eso!
octubre
7:55 noth Ha dicho:
Mejor que todo eso, que nada más que hace ensuciar el marcado, es usar la clase clearfix, busca esto en internet, ahora mismo no se el enlace, csslab creo que habla de ello y el código sería
saludos
P.D me apunto tu blog