Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División.

Presentación del tema: "Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División."— Transcripción de la presentación:

1 Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División de página básica*/ #primarycontent Padding-left: 25px; Padding- Top: 25 px; ) #content { Background: transparent url (images/ Arrow.gif) center bottom no-repeat: } Indica que los párrafos dentro del elemento con el id exclusivo sidebar se alinearán a la derecha, se mostrarán en cursiva y tendrán un margen superior y la mitad de la altura del tamaño de fuente.

2 Barra lateral /*Atributos de representación de la barra lateral*/ #sidebar p { Font-style: Italia; Text-align: rignt; Margin-top: 0.5en; } #sidebar ing { Margin: 30px o 15px o; } #sidebar h2 { Font-size: 1em; Font-weight: normal; Font-style: italic; Margin: 0; Line-height: 1,5; Text-align: right; } Indica que las imagines dentro del elemento con el id exclusivo sidebar tendrá un margen de 30 píxeles, un margen inferior de 15 píxeles y no tendrán espacio en blanco adicional a los lados.

3 Elementos de navegación: /*componentes de la barra de Navegación*/ Tabla#nav { Border-bottom: 1px solid #000; Border-left: 1px solid #000; } Indica a la tabla con el id nav que debe crear un efecto de borde negro sólido de 1 píxel en su parte inferior y a la izquierda (pero no en la parte superior ni a la derecha)

4 Tabla#nav td { Font: 11px verdana, arial, Sans-serif; Text-align: center; Vertical-align: middle; Border-right: 1px solid #000; Border-top: 1px solid #000; } Explica verdana de 11 píxeles como la fuente de texto de menú preferida y que rellena los elementos de borde. En la parte derecha y la parte superior.

5 Table#nav td a { Font-weight: normal; Text.deceration: none; Display: block; Margin: 0; Padding: 0; } Indicamos a los vínculos cómo deben comportarse.

6 La siguiente regla sólo es para los vínculos incluidos en celdas de tabla y sólo si se encuentran en una tabla cuyo identificador exclusivo sea NAV. #nav td a: link, #nav td a: visited { Background: transparent url (images/ Dgpat. Gif) repear; Display: block; Margin: 0; } #nav td a: hover { Color: #000; Background: white url ( images/ Nopat. Gif) repeat; } Estas dos reglas utilizan selectors id para controlar las pseudoclases vínculo, visitado y rellenan las dos primeras clases con nuestra imagen de color de fondo con píxeles alternos También utilizan una imagen de fondo blanco para el estado sobre/imagen cambiante.

7 Css de la barra de navegación: Especificar los tamaños en los efectos de los vínculos: #nav td a: link, #nav td a: visited { Background: transparent url(images/ Bgpat. Gif) repeat; Display: block; Margin: 0; Width: 100px; Height: 24px; } Los botones de la parte derecha se rellenan completamente, pero el logotipo se ve afectado ya que su fondo tiene ahora 100 x 25 pixeles. Por lo cual se tiene que utilizar reglas que reemplacen a las empleadas para crear los botones de 100 x 25.

8 Td# home a: link, td#home a: visited{ Background: transparent url(images/ Bgpat. Gif) repeat; Width: 400px; Height: 75 px; } Td# home a: hover{ Background: white url(images/ Nopal. Gif) repeat; Width: 400px; Height: 75px; } Esta regal rellena el logotipo correctamente y el sitio es casi perfecto.

9 Css de la barra de navegación: final En esta se obtiene todo lo planeado: /* componentes de la barra de Navegación*/ Table#nav { Border-bottom: 1px solid#000; } Table#nav td { Font: 11px verdana, arial, Sans-serif; Text-align: center; Border-right: 1px solid #000; } Table#nav td a { Font-weight: normal; Text-decoration: none; Display: block; Margin: 0; Padding: 0; } #nav td a: link, #nav td a: visited{ Background: transparent url(/images/ Bgpat. Gif) repeat; Display: block; Margin: 0; Width: 100px; Line-height: 25px; } #nav td a:hover { Color: #f60; Background: white url(/images/ Nopat. Gif ) repear; } Td#home a:link img. Td#hombe a: visited Img { Color: #c30; Background: transparent url (/images/ Bypat. Gif) repeat; Wigth: 400px; Height: 75 px; } Td# hombe a: hover img { Color: #f60; Background: white url(/images/ Nopat. Gif) repeat; Width: 400px Height: 75 px; }

10 Se ha eliminado la instruction vertila – align: middle. Con la cual se ha suprimido la línea que indica que los botones tenian una altura de 25 píxeles. Ha colocado correcta mente el texto en el centro vertical de cada botón.

11 Estilos externos y el efecto usted está aquí. Donde se cambian la información e imágenes pero no se cambia nada de la barra de navegación: <!DSCTYPE html PUBLIC”-//N3C//DTD/XHTML Transitional //EN” “http://www.w3.org/tr/xhtml1/DTD/ Xhtml1- transitional. Dts”> < html xmlns=”http://www.w3.org/1999/ Xhtml”> f3form <link tel=”StyleSheet” hret= “/css/i3.css” Type=”text/css” media =”all”/> Se genera una hoja de estilo

12 Para resaltar en negrita: Td# events a:linik, td# events a: visited { Color: #c30; Background: #fff; }