Temas > Programacion > Css > Disposicion de 2 columnas, cabecera y pie en Css
Julio

Disposición de 2 columnas, cabecera y pie
Una estructura muy común en la web es la disposición de una cabecera de
página, seguida de dos columnas y un pie de página. La implementación de
esta estructura de página es la siguiente:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor">
       <div id="cabecera">
             <h1>Aquí el título de la página</h1>
</div>
<div id="columna1">
             <p>columna1. columna1. columna1.</p>
</div>
<div id="columna2">
             <h2>Título de la columna</h2>
             <p>Contenido de la columna2. </p>
</div>
<div id="pie">
             Pié de página.
</div>
</div>
</body>
</html>
?>//esto no va
La hoja de estilo definida para esta página es la siguiente:
<?php //esto no va
*{
  margin:0px;
  padding:0px;
}
#contenedor
{
  width:100%;
  margin:0px;
  border:1px solid #000;
  line-height:130%; //alto de una línea
  background-color:#f2f2f2;
}
#cabecera
{
  padding:10px;
  color:#fff;
  background-color:#becdfe;
  clear:left;
}
#columna1
{
  float:left;
  width:200px;
  margin:0;
  padding:1em;
}
#columna2
{
  margin-left:210px;
  border-left:1px solid #aaa;
  padding:1em;
}
#pie {
  padding:10px;
  color:#fff;
  background-color:#becdfe;
  clear:left;
}
?>//esto no va
Hay algunas propiedades claves que debemos analizar en la regla
#contenedor:
   width:100%;
Con esto estamos indicando que siempre ocupe todo el espacio en ancho del
navegador, indistintamente de la resolución de pantalla o el tamaño de
ventana del navegador.
Luego, tanto para la cabecera como para el pie, tenemos:
  clear:left;
La propiedad clear hace que un elemento no tenga elementos flotantes a su
lado. Eso es lo que queremos para la cabecera y el pie.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar