Codificación de sitios web con divs usando hojas de estilo en cascada o CSS, es un método preferido entre los diseñadores Web. Sin embargo, algunas cosas que antes eran fácil con diseños de tabla anticuados, como hacer columnas, incluso, son más difíciles con CSS. En CSS, una columna con menos contenido aparecerá más corta que una columna con más contenido. Si bien esto es frustrante, hay una solución utilizando sólo CSS que hará que sus columnas CSS aparecerán incluso con diferentes cantidades de contenido.
Instrucciones
1 Cree su sitio web en HTML básico usando un editor HTML. Su código del sitio web debería aparecer así:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
2 Introduce el código HTML para la plantilla de disposición dentro de las etiquetas <body> y </ body>. Para un simple diseño de dos columnas, el código del sitio web se verá así:
<Div id = "caja">
<Div id = "maintext"> Su contenido principal va aquí. </ Div>
<Div id = "barra lateral"> Su contenido secundario va aquí </ div>
</ Div>
3 Entrada de la CSS para la caja que contiene el contenido div barras laterales y principal. Coloca este código dentro de las etiquetas <head>.
<Style type = "text / css">
caja{
background-color:#fff;
sobrecarga oculta;
Anchura: 600px;
}
</ Style>
En este ejemplo se crea una caja que contiene que es 600 píxeles de ancho y tiene un fondo blanco. El "overflow: hidden" clips etiqueta cualquier contenido, como imágenes, o URLs muy largos que son más de 600 píxeles.
4 Añadir la CSS para sus columnas de sitios web. Coloca este código debajo de la caja de CSS, dentro de las etiquetas de estilo. En este ejemplo, el CSS se vería así:
texto principal{
background-color:#ccc;
Anchura: 400px;
border-right: 200px #ddd sólido;
margin-right: -200px;
flotador izquierdo;
}
{barra lateral
background-color:#ddd;
Anchura: 200px;
flotador izquierdo;
}
Observe cómo la frontera para el div maintext es la misma anchura que el div barra lateral. Esto es lo que da la ilusión de que la barra lateral es tan largo como el espacio de texto principal. La barra lateral div flota sobre la frontera con el comando "flotar", llenando ese espacio vacío con el contenido de la barra lateral.
5 Añadir una columna adicional de contenido si es necesario. Esto se hace de la misma manera exacta como se hizo la columna de la primera barra lateral. Por ejemplo, si usted quiere una segunda barra lateral añadido en la parte izquierda de la zona maintext, ampliar el div "caja" mediante el ajuste de la anchura de 800px, a continuación, añadir el siguiente CSS:
caja{
background-color: #fff;
flotador izquierdo;
Anchura: 600px;
border-left: 250px #ccc sólido;
border-right: 200px #ddd sólido;
}
{barra lateral
flotador izquierdo;
Anchura: 250px;
margin-left: -250px;
position: relative;
}
texto principal{
flotador izquierdo;
Anchura: 600px;
margin-right: - 600px;
}
sidebar2 {
flotar derecho;
Anchura: 200px;
margin-right: -200px;
position: relative;
}
En este código, hay fronteras en el cuadro de Divisiones lo suficientemente grande como para abarcar tanto las barras laterales. Los códigos de margen de CSS en cada posición de la barra lateral los divs flotaba sobre las fronteras, dando la ilusión de que los fondos salgan a la div por lo que el fondo principal de contenido hace. Además, editar el código HTML para dar cabida a la segunda barra lateral:
<Div id = "caja">
<Div id = "barra lateral"> Su contenido secundario va aquí </ div>
<Div id = "maintext"> Su contenido principal va aquí. </ Div>
<Div id = "sidebar2"> Su contenido secundario va aquí </ div>
</ Div>