Cómo posicionar texto e imágenes en CSS
Gracias a las hojas de estilo, es posible posicionar texto o imágenes con la precisión de un píxel mediante las etiquetas "<SPAN>" y "<DIV>". Esto es posible en las versiones 4 y superiores de Netscape e Internet Explorer; sin embargo, la técnica todavía es complicada y puede causar problemas de compatibilidad.
¿Qué es el posicionamiento absoluto y relativo?
- El posicionamiento absoluto {position: absolute} está determinado en relación con la esquina superior izquierda de la ventana del navegador. Las coordenadas de un punto se expresan entonces de arriba a abajo (top) y de izquierda a derecha (left).
- El posicionamiento relativo se define de acuerdo con otros elementos de la página, lo que quiere decir que los elementos que contienen las etiquetas <DIV> o <SPAN> se posicionarán a continuación de los elementos HTML que los precedan.
|
¿Cómo posicionar un texto?
Ubiquemos el texto "Comment ça marche" (''Cómo funciona'' en español) a 80 píxeles de la parte superior de la ventana y 100 píxeles de la izquierda:
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;"> Comment ça marche </SPAN> </BODY> </HTML>
Existen otras maneras de hacer esto, por ejemplo:
<HTML> <HEAD> <STYLE> <!-- .test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large} --> </STYLE> </HEAD> <BODY> <DIV class=test> ¿Cómo funciona? </DIV> </BODY> </HTML>
¿Cómo posicionar una imagen?
Ubiquemos la imagen "test.jpg" a 80 píxeles desde la parte superior de la ventana y 100 píxeles desde la izquierda (la imagen es de 103x61):
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> </BODY> </HTML>
Es importante especificar el tamaño de la imagen en las hojas de estilo para reducir el riesgo de incompatibilidad con el navegador.
¿Cómo superponer elementos?
Vamos a superponer el texto "Comment ça marche?" sobre la imagen "test.jpg":
<HTML> <BODY> <SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> <SPAN style="position: absolute; top: 50 px; left: 100 px;"> Comment ça marche? </SPAN> </BODY> </HTML>
Con esta sintaxis se pueden superponer tanto elementos de texto como imágenes.