-
Cómo hacer un CSS columna de la izquierda
-
Los desarrolladores web utiliza hojas de estilo en cascada para organizar partes de las páginas web en diseños complicados con encabezados, columnas y pies de página. Decoradas con diseños CSS toma "<div>" etiquetas que el contenido del grupo y les dan anchos y flotadores para crear las columnas visto en las páginas web de todo Internet. Primero debe crear la barra lateral en HTML y el estilo es el uso de "float: left" para crear una columna de la izquierda el uso de CSS.
Instrucciones
1 Abra la página Web en el Bloc de notas para que pueda modificar su código. Localizar el cuerpo principal de los contenidos en el código y lo envuelve en "<div>" etiquetas. Dele a su div un nombre de identificación para que pueda hacer referencia a ella en el CSS más tarde:
<Div id = "contenido">
<H2> Contenido Título </ h2>
<P> Un párrafo de texto ... </ p>
</ Div>
2 Por debajo de la "<div>" que ha creado para el contenido principal de la página, agregar un nuevo conjunto de "<div>" etiquetas para contener el contenido de la barra lateral:
<Div id = "barra lateral">
</ Div>
Añadir cualquier contenido que desea que aparezca en la barra lateral entre los nuevos "<div>" etiquetas. Este conjunto de etiquetas necesita un nombre de identificación por lo que puede estilo en CSS. Normalmente, el contenido de la barra lateral incluye listas de enlaces, "Acerca de mí" secciones y formas de contacto pequeños, pero se puede añadir todo lo que gusta a esta sección.
3 Volver a la parte superior del código y añadir "<style>" etiquetas "entre los <head>" etiquetas ver si hay ninguno:
<Style type = "text / css">
</ Style>
Añadir su código CSS entre los "<style>" etiquetas. También puede colocar el código CSS dentro de una hoja de estilos externa si su sitio web ya utiliza uno.
4 Seleccione tanto el contenido como la barra lateral divs en el código CSS:
contenido {
}{barra lateral
}Cambiar el nombre de "contenido" y "barra lateral" a los nombres de identificación que le dio su divs, pero mantener los símbolos de número como CSS las necesita para saber para buscar nombres de ID en lugar de las etiquetas o las clases.
5 Ajuste el ancho de cada div:
contenido {
anchura: 80%;}
{barra lateral
anchura: 20%;}
También puede establecer el ancho en valores de píxeles como "200px" para dar el divs anchos fijos. El ancho de cada div no puede ir más de 100 por ciento o el número máximo de píxeles para su diseño, pero puede establecer ellos por debajo de 100 por ciento para crear espacio para los márgenes o relleno.
6 Agregue la propiedad "flotar" a la barra lateral div para que sea vea al lado de la div de contenido en lugar de a continuación. Ajuste "flotar" a la izquierda cuando se desea colocar la barra lateral en el lado izquierdo del contenido:
{barra lateral
anchura: 20%;flotador izquierdo;
}
