Posicionamiento de componentes en HTML con el soporte de CSS.

4
81568

Posicionamiento de componentes en HTML con el soporte de CSS.

0. Índice de contenidos.


1. Introducción

En este tutorial vamos a explicar, de una manera más o menos gráfica, cómo se disponen los componentes visuales que pueden ir dentro del código HTML de una página web, con el soporte de hojas de estilo CSS.

El nivel de complejidad del tutorial es básico, sobre todo si los comparamos con otros publicados recientemente sobre Responsive CSS, pero hay que empezar por abajo, es capital tener las siguientes nociones claras para evitar problemas de renderización de componentes entre distintos navegadores y versiones de los mismos.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.4 GHz Intel Core i7, 8GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Lion 10.7.2
  • Mozilla Firefox 14.0.1


3. Posicionamiento por defecto.

Un navegador web o browser, a través de su agente de usuario, lleva a cabo la lectura del código HTML de una dirección web o url solicitada; la lectura de dicha página es secuencial (de arriba a abajo) y la disposición de los componentes en pantalla dependerá del tipo de elemento que se trate:

  • elementos en línea (span, img, a y otros): ocupan solo el espacio necesario para mostrar el contenido interno de los mismos,
  • elementos de bloque (p, div, h1, h2, fieldset y otros): siempre empiezan en una nueva línea y ocupan todo el espacio disponible en pantalla, o dentro de su contenedor, hasta el final de la línea, aunque sus contenidos no tengan tanto tamaño.

Todos se disponen de izquierda a derecha en pantalla, ocupan un espacio rectangular y, por defecto, en función del contenido de los mismos y solo se dispondrá un elemento en una nueva línea cuando sea un elemento de bloque.

Tan importante es conocer esto como saber que los estilos y, como consecuencia, las posiciones de los componentes en pantalla se pueden modificar aplicando hojas de estilos CSS.

Tanto HTML como CSS tienen una serie de versiones, la de CSS depende de la versión de HTML con la que estemos trabajando y depende del navegador soportará hasta una versión de HTML y CSS concretas.

Además, los navegadores aplican una versión de HTML por defecto cuando, dentro del contenido del documento, no se hace una mención explícita a la misma. Por eso, es de suma importancia que especifiquemos cuál es la versión de HTML y, como consecuencia de CSS, con la que estamos trabajando. Para ello en la cabecera de todos nuestros documentos HTML debemos incorporar la directiva <!DOCTYPE, por ejemplo:

Para XHTML 1.0 transsitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Para HTML 5:

<!DOCTYPE html> 

La ausencia de DOCTYPE es la principal raíz de los problemas de disparidad de visualización entre navegadores.

A continuación un ejemplo de mezcla de elementos de línea y de bloque:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Elementos en línea y elementos de bloque</title>
</head>
<body>
<h3>Adictos al Trabajo.</h3>
<p>Tutoriales sobre JEE en <a href="https://adictosaltrabajo.com">adictos al trabajo</a>.</p>
<span>30/07/2012.</span> - <span id="created">30/07/2012.</span>
</body>
</html>

Se visualizará como sigue:



4. style=»display».

El atributo más básico a nivel de estilos es display y en función del tipo de elemento tiene un valor por defecto:

  • inline: en línea, por defecto para los elementos en línea,
  • block: de bloque, por defecto para los elementos de bloque,
  • none: para ocultar la visualización de un componente sin ocupar espacio en pantalla.

Hay más posibles valores, podéis consultar una referencia rápida aquí.

Si, por ejemplo, en el html anterior incluimos un selector css del siguiente modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Elementos en línea y elementos de bloque</title>
  <style type="text/css">
  	p{
  		display:inline;
  	}
  </style>
</head>
<body>
<h3>Adictos al Trabajo.</h3>
<p>Tutoriales sobre JEE en <a href="https://adictosaltrabajo.com">adictos al trabajo</a>.</p>
<span>30/07/2012.</span> - <span id="created">30/07/2012.</span>
</body>
</html>

Modificaremos la disposición en pantalla del párrafo y, con ello, de todos los componentes posteriores a él.


5. style=»float».

El segundo modificador del que vamos a hablar es float que permite flotar un componente a derecha o izquierda, rompiendo con esa disposición secuencial de los elementos dentro del HTML. Es importante conocer que, si flotamos un elemento, los posteriores se verán afectados puesto que se comportará como un elemento en línea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Elementos en línea y elementos de bloque</title>
  <style type="text/css">
  	div#links{
  		float:left;
  	}
  </style>
</head>
<body>
<div id="header">
	<p>Enlaces</p>
</div>
<div id="links">
<h3>Adictos al Trabajo.</h3>
<p>Tutoriales sobre JEE en <a href="https://adictosaltrabajo.com">adictos al trabajo</a>.</p>
<span id="author">jmsanchez</span> - <span id="created">30/07/2012.</span>
</div>
<div id="menu">
	<ul>
		<li>Ejemplo 1</li>
		<li>Ejemplo 2</li>
	</ul>
</div>
<div id="credits">
	<span>Mi web ©</span>
</div>
</body>
</html>

Tendremos la siguiente disposición en pantalla:

Para romper la aplicación del modificador float a los siguientes elementos podemos usar el modificador clear:both. En el siguiente ejemplo vemos como flotar a izquierda y derecha y romper el float en la siguiente capa.

  <style type="text/css">
  	div#links{
  		float:left;
  	}
  	div#menu{
  		float:right;
  	}
  	div#credits{
  		clear:both;
  	}
  </style>

Con ello la disposición en pantalla cambia como sigue:


6. style=»position».

El último modificador es el de la posición que puede adoptar los siguiente valores:

  • static: la de por defecto para todos,
  • absolute: se posiciona respecto al último elemento en la jerarquía no marcado como estático; si no existe en la jerarquía de padres o contenedores un elemento marcado como no estático se posiciona como fixed, esto es, respecto a la ventana,
  • fixed: su posición será relativa respecto a la posición de la ventana,
  • relative: su posición será relativa respecto a su posición normal.

Imaginemos que tenemos un gráfico que describe el flujo de trabajo en fases dentro de una cadena de negocio, un workflow y queremos visualizar, de forma dinámica, el número de actividades abiertas dentro de cada fase en una página web, con HTML. Empezaremos por tener, por ejemplo, una imagen con el gráfico sin descripciones.

La descripción de cada puesto de trabajo la queremos internacionalizada y mostrará el número de actividades abiertas en el mismo, a modo de cuadro de mando.

Lo primero es crearnos un elemento complejo para cada puesto:

  <div id="diagnosis">
	<span>Diagnóstico
	<span class="activities">15</span>
  </div>
  
  <div id="repair">
	<span>Reparación
	<span class="activities">5</span>
  </div>

El objetivo es, teniendo la imagen de fondo del flujo, posicionar las capas sobre su correpondiente tarea.

Si usamos posiciones absolutas el problema será que, en función del contenido y tamaño de los componentes que posicionemos encima del gráfico, pueden variar la suya puesto que se posicionan respecto a la ventana.

La solución es establecer la imagen como fondo de una capa dispuesta de forma relativa en la página (rompiendo el position=static) y, dentro de la misma, posicionar todas las capas correspondientes a las tareas de forma absoluta. Las posiciones de las capas serán absolutas a la capa de la imagen, con lo que no cambiará su posición debido a redimensionamientos.

<div id="workflow">
  <div id="diagnosis">
	<span>Diagnóstico</span> <!-- El texto se generaría internacionalizado -->
	<span class="activities">8</span> <!-- El número de actividades se asignaría de forma dinámica al generar el html -->
  </div>
  
  <div id="repair">
	<span>Reparación</span>
	<span class="activities">15</span>
  </div>
</div>

Los estilos podrían ser los siguientes:

  <style type="text/css">
  	div#workflow{
  		background: url(./images/workshop.png) no-repeat;
  		position:relative;
  	}
  	div#diagnosis{
  		position:absolute;
  		left:100px;
  		top:250px;
  	}
  	div#repair{
  		position:absolute;
  		left:340px;
  		top:250px;
  	}
  	.activities{
  		background: url(./images/activity.png) no-repeat;
  		float:left;
		margin-right:1em;
  	}
  </style>

Y la información de las distintas fases quedarían cuadradas dentro de cada capa como se muestra a continuación.

Luego está la tarea de internacionalizar el texto de los nodos de decisión.


7. Referencias.


8. Conclusiones.

Plasmando conocimientos y un caso de uso real 😉

Un saludo.

Jose

jmsanchez@autentia.com

4 COMENTARIOS

  1. Me parece bastante, interesante y fundamental para empezar desde lo más básico el Diseño Responsable. Un saludo y gracias por tus tutoriales.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad