Dudas frecuentes sobre xhtml-css
1) ¿Cómo garantizo la posición de una capa float en Firefox, sobre
todo si ésta es la primera en aparecer en la página?
Vamos a ver de que modo podemos controlar la posición de cualquier elemento float, independientemente del orden que ocupe en la página, y en cualquier navegador (Netscape, Firefox, Ópera, o Explorer).
Para ello vamos a poner como ejemplo precisamente el currículum de la práctica 2.
Primeros pasos de maquetación. Ejemplo del currículum
Lo primero que debemos hacer con el currículm, al igual que con cualquier documento web que vayamos a maquetar es hacer las divisiones principales. En este caso podrían ser cada uno de los apartados o tipos de datos, ya que cumplen lo que necesitamos para definirlos como selectores “id”, es decir “no se repiten dentro del documento”, solo habrá una sección de datos personales, una de experiencia laboral, formación, etc...
Por lo tanto ya sabemos que en nuestro currículum habrá un “div” para cada una de las secciones de datos. Nunca está de más hacer un primer boceto sobre un papel con las divisiones principales, por lo que haríamos algo similar a la imagen.
Pondríamos un div principal que podemos llamar "hoja", en cuyo interior irán todas las secciones de datos en su correspondiente "div".
En el siguiente paso vamos a controlar la posición de la imagen. Hay más de una forma de hacerlo, de hecho por tratarse de un elemento de línea no es necesario recurrir a la propiedad float para posicionar la foto. Pero este ejemplo nos viene bien para entender un poco mejor como se comportan los elementos con la propiedad float, así que lo resolveremos con esta propiedad.
Ahora debemos pensar donde queremos la foto, dentro de la sección datos personales, o fuera de ella, puede hacerse de los dos modos.
Si nos decidimos a ponerla en datos personales lo normal sería emplear un selector contextual , algo como #datPers img { reglas; }. Pero si existe la posibilidad de que en #datPers haya otras imágenes, como podría ser un simple icono de correo electrónico, entonces deberíamos pensar en resolverlo mediante un selector de clase que es como lo vamos a hacer.
Y aquí viene la sorpresa, cuando ponemos el contenido siguiente a la foto, en este caso los datos personales, vemos que tienden a colocarse en línea con la imagen, cuando tendrían que haber quedado debajo de esta.
Solución:
Tal como se indicó en la sección float del tutorial, esto lo evitamos mediante la propiedad “clear” en el elemento siguiente al flotante.
Por lo tanto en este caso debemos asignar “clear” al selector #datPers puesto que es el siguiente a la imagen.
#datPers { clear: right; }
Si hubiesemos puesto la imagen dentro de la sección "datos personales", entonces deberíamos atribuir clear al selector "h2" ubicado en el contexto de #datPers, lo que nos quedaría del siguiente modo:
#datPers h2 { clear: right; }
ya que como se puede ver en el código xhtml es el elemento que seguiría a la imagen en ese caso.
En resumen:
En lugar de controlar la posición de un float, lo correcto sería decir que controlamos la posición del elemento siguiente al float, y esto lo haremos mediante la propiedad “clear” de ese elemento.