Las columnas representan un reto para los diseñadores Web que desean evitar las técnicas de la tabla de codificación de fecha, torpe. No hay manera de bloquear partes de la página Web de secciones de contenido o columnas, en parte para evitar la mezcla de código de estilo con código de estructura. Los diseñadores utilizan técnicas flotantes difíciles de colocar las columnas en las páginas Web. Usted puede hacer una columna de "flotar" a la izquierda oa la derecha de su contenido vecina mediante la adición de la propiedad "flotar" en el CSS.
Instrucciones
1
Abra el archivo HTML de su página Web en un editor de código como jEdit, Notepad ++ o BBEdit. También puede utilizar Microsoft Bloc de notas u otro editor de texto plano, pero entiendo que carecen de coloración código HTML útil que hace más fácil la lectura.
2
Encuentre la columna que desea para flotar en el código HTML. Esto generalmente se envuelve en una etiqueta "<div>" o "<section>", aunque algunos programadores utilizan "<aside>" etiquetas para las barras laterales. Añadir un atributo ID a la etiqueta para su columna y darle un nombre único para su valor, como "la columna" o "lado izquierdo".
3
Busque los "<link>" etiquetas en la parte superior de su archivo HTML y encontrar uno que contiene un archivo CSS. Abra el archivo en el editor de código. También puede insertar CSS entre "<style>" etiquetas, pero usted debe poner los "<style>" etiquetas entre los "<head>" etiquetas en el archivo HTML.
4
Configure su columna a un ancho específico o familiar el uso de CSS. Utilice los valores de píxeles para anchos específicos o valores porcentuales para anchuras relativas. Escriba el código de la siguiente manera:
columna {width: 200px;}
Aquí es una columna con una anchura de 20 por ciento, respecto a la anchura de cualquier elemento HTML que anidadas dentro de la columna:
columna {width: 20%;} 5
Añadir la propiedad "flotar" a tu columna y la puso a la derecha oa la izquierda, así:
columna {width: 200px; float: right;}
Cuando "flotar" está ajustado a la derecha, la columna se alinea a la derecha de cualquier contenido adyacente. El contenido adyacente, tales como texto, se envuelve alrededor de la parte inferior de la columna. Añadir la propiedad "flotar" a la sección de contenido de su sitio web en CSS para evitar la envoltura.
Consejos y advertencias
- Utilice una imagen de fondo para crear una "columna de imitación" si usted desea dar a su columna de la apariencia de que se extienden hasta el pie de página de su sitio web. Crear una imagen de altura de un píxel tan amplia como todo el sitio web y aplicarlo a un "<div>" que envuelve tanto el contenido como la columna.
- Las columnas no se estiran hasta el pie de página en una página Web cuando se utiliza la técnica de flotación. Utilice un fondo "columna de imitación" o JavaScript para corregir el problema si interfiere con el diseño de su sitio web.