HTML div organizar contenido
Como todavía me encuentro muchas webs y aplicaciones web con <TABLE><TR><TD>
continúo con el tema de usar div en lugar de table.
Con el siguiente ejemplo podemos organizar una página web o documento html
con divs, centrando el contenido y estableciendo un diseño proporcional,
que se adaptaría a cualquier resolución de pantalla y dispositivo.
No usamos ningún <table> ni <tr> ni <td> ni ..
width="450" height="400" scrolling="auto" frameborder="1" transparency>
Ahora el código html y css
Fundamental es separar el contenido del diseño.
Por un lado nuestro contenido organizado con html o mejor con xhtml
y por otro lado el diseño.
Copia todo el html, guardalo en un fichero html o xhtml y abrelo con un navegador.
Todo el contenido dentro del tag <style> debería pasar a un fichero estilos.css
pero lo puedes dejar así para hacer pruebas.
También ejemplos visuales de divs con distintos css en la propiedad de display
Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML
continúo con el tema de usar div en lugar de table.
Con el siguiente ejemplo podemos organizar una página web o documento html
con divs, centrando el contenido y estableciendo un diseño proporcional,
que se adaptaría a cualquier resolución de pantalla y dispositivo.
No usamos ningún <table> ni <tr> ni <td> ni ..
width="450" height="400" scrolling="auto" frameborder="1" transparency>
Ejemplo de página web organizada mediante divs y css
Ahora el código html y css
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>div html</title>
<!--
/* lo ideal sería tener la hoja de estilos en otro fichero
* pero para el ejemplo lo metemos dentro del documento html
*/
<link rel = "stylesheet" type = "text/css" media="screen" href="media/css/all/estilos.css"/>
-->
<style type="text/css" media="all">
body {
/* para centrar el contenido */
background-color:#ffffff;
text-align:center;
margin:0 auto;
}
#container {
/* # la almoadilla aplica el estilo a los tag html con ese id */
margin: 0 auto;
text-align:left;
/*width:780px; /* para 800 x 600 */
width: 100%;
}
#cabecera {
background-color: blue; /* mejor definir color notación #333ccc */
color: white;
}
#menu {
background-color: orange;
float: right;
width: 20%;
}
#contenido {
background-color: #eadcdc;
float: left;
width: 75%;
}
#pie {
clear: both;
background-color: #333ccc;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<div id="cabecera">
cabecera
</div>
<div id="menu">
menu
<ul>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
</ul>
</div>
<div id="contenido">
contenido
<h2>La Ñ con utf-8</h2>
<p>
Podemos usar cualquier caracter de nuestro queridisimo lenguaje
con la codificación UTF-8
Ñ ñ á é í ó ú Á É Í Ó Ú ç Ç
</p>
<h2>Titulo dentro del contenido</h2>
<p>
Texto dentro del contenido, texto dentro del contenido
Ah los diseñadores gráficos usan el siguiente texto como borrador
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="pie">
pie
</div>
</div>
</body>
</html>
Fundamental es separar el contenido del diseño.
Por un lado nuestro contenido organizado con html o mejor con xhtml
y por otro lado el diseño.
Copia todo el html, guardalo en un fichero html o xhtml y abrelo con un navegador.
Todo el contenido dentro del tag <style> debería pasar a un fichero estilos.css
pero lo puedes dejar así para hacer pruebas.
También ejemplos visuales de divs con distintos css en la propiedad de display
Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML
Excelente guía, muchas gracias por ayudarme a despedirme de las tablas!
ResponderEliminar