-
El código HTML para Acabar con la superposición de los cabezales
-
páginas Web usan una combinación de HTML y CSS (Cascading Style Sheets) código. El código HTML para una página define los elementos de contenido, así como la estructura general de la página. El código CSS determina la aparición de estos elementos dentro de la estructura de la página. Muchos sitios utilizan diseños estándar que contienen encabezados, pies de página y contenido. Cuando se utiliza HTML y CSS, los desarrolladores a veces tienen dificultades con la superposición. El uso de determinadas propiedades CSS puede ayudar a hacer frente a estas dificultades.Elementos de la página
Una disposición típica página Web implica un área para un encabezado en la parte superior, parte del contenido por debajo de este y una zona de pie de página en la parte inferior. Cada una de estas secciones pueden incluir menús y otros elementos de contenido. El área de encabezado contiene a menudo una imagen y un texto que indica el título de la página y el sitio. Si el área de encabezado contiene más de un elemento de HTML, el desarrollador puede tener que implementar un diseño que se presentarán los elementos a los usuarios en la forma deseada.
Formato HTML
marcado HTML utiliza estructuras etiquetadas para implementar la estructura de página. El siguiente ejemplo de código HTML muestra un esquema básico de la página:
<Html>
<Head> </ head>
<Body>
<Div id = "contenedor">
<Div id = "header">
<Div id = "headerOne"> Aquí está una parte de la cabecera </ div>
<Div id = "headerTwo"> Aquí está la otra parte de la cabecera </ div>
</ Div>
<Div id = "contenido">
Aquí está el contenido de la página
</ Div>
<Div id = "pie"> Aquí está el pie de página </ div>
</ Div>
</ Body>
</ Html>Esta página incluye una sección de la cabecera, en el que dos elementos secundarios definen dos partes distintas de la zona de cabecera. La cabecera puede contener varios elementos para imágenes, texto y enlaces según las necesidades.
Código CSS
El código CSS para una página Web determina cómo los elementos aparecerán en el navegador del usuario. El código CSS puede aparecer dentro de un archivo CSS independiente, o directamente dentro de la sección de cabecera HTML de la siguiente manera:
<Style type = "text / css">
/ Código CSS /
</ Style>Entre las etiquetas de apertura y cierre de secuencia de comandos, el desarrollador puede incluir declaraciones CSS que determinan el diseño y el aspecto de cada elemento de la página. Por ejemplo, para especificar que cada uno de los principales elementos de la página debe ocupar todo el ancho de la página, el siguiente código se podría añadir:
cabecera, #content, #footer {
width: 100%;
}El código siguiente se especifica el ancho total de la página:
envase {width: 800px; margen: auto;}
Elementos cabecera
código CSS puede dictar cómo debería aparecer cada parte de la cabecera. El siguiente CSS demuestra:
headerOne, #headerTwo {
flotador izquierdo;
}Este código se aplica una propiedad float al tanto de los elementos secundarios de cabeza, lo que indica que deben aparecer en la misma línea horizontal dentro del elemento de cabeza de los padres. A continuación se indican las propiedades CSS para cada elemento secundario:
headerOne {width: 50%; padding: 5%;} headerTwo {width: 30%; padding: 4%;}
Esto especifica el porcentaje del elemento padre que cada elemento secundario debe ocupar. A veces, cuando se utilizan las propiedades de flotación, los desarrolladores encuentran que aparecen elementos encajados juntos. La propiedad clear puede ayudar, ya que indica al navegador que no muestre ningún otro elemento en la misma línea que un artículo en particular. El siguiente código extendido demuestra:cabecera, #content, #footer {
width: 100%; Limpia los dos;
}Esto debería garantizar que los tres elementos principales de página aparecen de manera efectiva, con un salto de línea entre ellos.
