Abr
5

0


Como ya comentamos en el tutorial de HTML, actualmente los div son los elementos más importantes a la hora de maquetar una página web (anteriormente lo eran las tablas).

Tres son las propiedades básicas más utilizadas: width, para definir el ancho del elemento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }

    #cabecera, #pie {
      width:100%;
    }

    #menu {
      width:100px;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

float, para hacer que flote a un lado u otro del elemento contenedor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }

    #cabecera, #pie {
      width:100%;
    }

    #menu {
      width:100px;
      float:right;
    }

    #contenido {
      float:left;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

y clear para que no se coloque ningún elemento a derecha o izquierda (valores left, right o both)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
  <style type="text/css">
    div {
      border:1px solid black;
    }

    #cabecera, #pie {
      width:100%;
    }

    #pie {
      clear:both;
    }

    #menu {
      width:100px;
      float:right;
    }

    #contenido {
      float:left;
    }
  </style>
</head>

<body>
<div id="cabecera">Mi web de ejemplo</div>
<div id="contenido">Lorem ipsum</div>
<div id="menu">Inicio<br>Archivos<br>Contacto</div>
<div id="pie">Fin</div>
</body>
</html>

No hay que tener miedo a utilizar tantos divs como sea necesario, pero, ojo, es una mala práctica introducirlos cuando no es necesario. En los fragmentos anteriores, sin ir más lejos, también podríamos haber utilizado una lista para el menú lateral, por ejemplo, ya que al fin y al cabo nuestro pequeño menú no es más que una lista de enlaces.

Fecha de edicin: 5 Abril, 2012 -

Leave a Reply

You must be logged in to post a comment.