Etiquetas DIV y CSS

etiquetas DIV y CSS
Se necesita es una presentacin con: una espacio para el banner (espacio1) un espacio vertical izquierdo para el men (espacio 2) un espacio a la derecha para los contenidos (espacio 3) un pequeo pie de pgina para cerrar, quiz, con una bonita imagen por abajo (espacio 4)
ALGO AS
#container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } #top { padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; } #top h1 { padding: 0; margin: 0; }
#leftnav { float: left; width: 160px; margin: 0; padding: 1em; } #content { margin-left: 200px; border-left: 1px solid gray; padding: 1em; max-width: 36em; } #footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } #leftnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0 .5em 0; }
CODIGO HTML
<div id="container"> <div id="top"></div> <div id="leftnav"></div> <div id="content"></div> <div id="footer"></div> </div>
las etiquetas div llevarn unas id que me resulten ms familiares:
<div id="contenedor> <div id="banner"></div> <div id="menu"></div> <div id="contenido"></div> <div id="pie"></div> </div>
Analizando este cdigo llegamos pronto a la conclusin de que hay una DIV general (contenedor) que incluye a las otras cuatro. Esta DIV deber estar incluida en la etiqueta BODY:
<body> <div id="contenedor> <div id="banner"></div> <div id="menu"></div> <div id="contenido"></div> <div id="pie"></div> </div> </body>
El atributo id es totalmente necesario puesto que este espacio es creado en HTML pero se editarn todas sus caractersticas desde CSS a travs del selector #nombre_del_DIV Pienso que lo mejor es hacer este trabajo desde el cdigo fuente, porque crear la etiqueta DIV para el contenedor desde el editor visual es un desperdicio de tiempo. Se hara as desde la vista Normal: No es necesario escribir nada. Con la pgina en blanco... Hago la lnea de comandos Formato/Parrafo/Contenedor genrico (DIV) Hago clic en el nuevo icono de este div en la parte de abajo de la interfaz
La lnea de comandos Formato/Propiedades avanzadas... Aparece este cuadro en el que selecciono Atributo id y le pongo de Valor contenedor.
Con esto se crea el div del contenedor con su id. El problema ahora es crear otros divs dentro de ese. Hacer los dems manualmente
Guardar con el nombre index.html y despus abrir con el icono de KadCadeS el editor de Hojas de Estilo de Kompozer
El cdigo no aparece un selector body hay que comenzar por crearlo y as poder editar algunas de sus propiedades. Clic en la paleta de pintor y el editor pregunta por el nombre del selector. Escribimos body y pulsamos Crear regla de estilo
Una vez creado nos aseguramos de tenerlo seleccionado y accedemos a la pestaa Fondo y escogemos un color. De este modo comprobamos rpidamente que el enlace entre el CSS y el HTML funciona (yo escojo #f0feff)
Si en Kompozer estamos en el modo Normal debemos ver el cambio en tiempo real: Este cambio en el selector body hace que cambie el color del fondo de toda la pgina. Ahora creamos un nuevo selector al que denominamos #contenedor y le aplicamos nuevamente un cambio de color de fondo (es provisional)
Esto har que se cambie de color el espacio que ahora ocupa nuestro DIV contenedor: Ver el cdigo:
Vemos que fuera del BODY se encuentra el CSS con sus dos selectores creados y con los atributos que se han definido. En este caso slo el color de fondo (background-color)
de seguir cambio el HTML por el original con todos los textos pero no olvidar de cambiar el nombre a los divs o de lo contrario el CSS no funcionar
Pueden apreciarse algunos lugares en los que se ve el color del contenedor debido a algn que otro h1, h2... El contenedor es de vital importancia puesto que habr ediciones que se hagan sobre l y que ahorren mucho trabajo. Por ejemplo: centrar toda la zona de diseo definir el ancho total de esa zona de diseo Este es el cdigo que tenemos para estudiar
#container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; }
Accedemos al editor de hojas de estilo y seleccionamos el selector #contenedor. Pestaa Caja: El ancho (weith): no me interesa lo del 90%. Ejemplo: un ancho fijo de 780px. Pestaa Caja: Margen superior e inferior de 10px y mrgen izquierdo y derecho auto. Hay que escribir auto a mano. Con esta definicin de los mrgenes derecho e izquierdo conseguimos que el contenedor se centre en la pgina
Pestaa Fondo: escojo color de fondo blanco #ffffff Pestaa Bordes: solid de 1px en los cuatro lados. Color gray (se puede escribir el nombre de determinados colores en estos campos de edicin)
Pestaa Texto: color para el texto #333333 El asunto de line-heigth no s dnde se edita desde el editor grfico y tampoco s lo que significa. De hecho si en la pestaa General lo escribo a mano desaparece nada ms que voy a otra pestaa y regreso. En el modo Normal debe aparecer el cambio: el espacio del contenedor se reduce (780px), queda centrado, todo el espacio del diseo tiene un contorno gris...:
El HTML y la etiqueta BODY tienen predefinidos unos mrgenes (donde mejor se observa es en la parte superior) que es conveniente eliminar cuanto antes. Nos dirigimos en CSS al selector body y en la pestaa Caja ponemos todos los Mrgenes y todos los Rellenos a 0px
Contenedor #banner. Este es nuestro cdigo de referencia: #top { padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; } El relleno (padding) del banner es de 0.5em en lodos los lados. La unidad de medida em hace referencia al tamao de letra que se est utilizando (si usas una fuente de 16px de alto entonces 1em son 16 pxeles). Es ms sencillo usar la unidad px directamente. As que 8px en todos los lados
Definir el color de fondo a estas alturas no debe ser un problema. La novedad en este caso se encuentra en que slo queremos borde en el lado inferior. As que desactivamos la casilla Todos los lados usan el mismo estilo de borde
supongamos que queremos una imagen para este banner. buscar una imagen con una aptura de 780x200px. En tal caso ir a la Caja de este banner y poner la altura adecuada (200px). Una vez que haga el enlace hacia la foto desde la pestaa Fondo... No se olvide de eliminar el padding o le sobrarn pxeles por la parte de abajo Elimine del CSS el cdigo que no hace falta como el color de fondo. Aqu se va a conservar la lnea de borde inferior, aumentar el grosor a 3px y le doy color black Debe crear un selector nuevo en CSS. Se llamar #banner h1 y contendr las caractersticas del texto que aparece aqu. Si observamos el HTML vemos que ya viene con una etiqueta h1 asignada. Si le anteponemos lo de #banner lo que hacemos es delimitar las caractersticas a este h1 puesto que le hemos puesto nombre y apellidos. Ese #banner h1 tendr un padding derecho de unos 20px, un margen superior de 0px y un tamao y color de texto (definir en la pestaa Texto) a elegir (observe que he usado las flechas del editor para situarlo justo debajo del selector #banner)
sustituir el texto por uno ms apropiado
Este es el cdigo CSS de la pgina hasta ahora (ver que se ha conservado el color del fondo del banner). Es por si a la hora de cargar la pgina falla el enlace a la foto saldr este color en lugar de blanco
body { margin: 0px; padding: 0px; background-color: #f0feff; } #contenedor { border: 1px solid gray; margin: 10px auto; width: 780px; background-color: #ffffff; color: #333333; } #banner { border-bottom: 3px solid black; background-color: #dddddd; background-image: url(foto_banner.jpg); height: 200px; text-align: right; color: #333333 }
#banner h1 { padding-right: 20px; font-size: 40px; margin-top: 0px; } #menu { background-color: #009900; } #contenido { background-color: #3333ff; } #pie { background-color: #993399; }
selector del #men. Este es nuestro cdigo de referencia:

#leftnav { float: left; width: 160px; margin: 0; padding: 1em; } Pestaa Caja: en ella edito widht 160px (que es el ancho), margen 0px para todos los lados y un relleno de 15px en todos los lados sera apropiado (por no usar la unidad de medida em) Pestaa Caja: float: left
Es evidente que queremos que el espacio azul destinado al contenido se coloque rellenado el espacio que ha dejado el men de la izquierda. En el selector del men tenemos que dar la orden correspondiente a travs de la pestaa Caja con Float/Left
El texto que se cuela por debajo debe ser arreglado y el espacio que se desplaza hacia abajo en la zona de arriba del contenido tambin. Vamos al cdigo de referencia para el selector #contenido #content { margin-left: 200px; border-left: 1px solid gray; padding: 1em; max-width: 36em; }
El color del fondo es ninguno. Mrgen izquierdo de 200px es lo que pone solucin al asunto del texto que se colaba por debajo del men. Padding (Relleno) de 15px por lo mismo de antes Max-weith es la anchura mxima que se edita en Caja. Ya tiene un valor de 780px pero si tuviera un valor en % cambiaria.
#pie este es el cdigo de CSS de referencia:
#footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }
Clear: both: Es la novedad aqu. Si ponemos un float a un DIV es posible que queramos que otros DIV de abajo sean insensibles a esa cualidad. Si no pongo clear pasara esto si el texto del menu creciera:
Lo ideal sera que pie detectara ese texto y se desplazara hacia abajo segn creciera. En ese caso tendramos que poner clear:left. Si hubieramos hecho el contenido con float:right tendramos que poner clear:both (por los dos float, left y right) Lo mejor, aunque slo haya un tipo de float es poner clear:both
En el cdigo aparece el texto "Footer". Simplemenete lo elimino. El cdigo original tiene un par de selectores ms menu p y #contenido h2 deberan llamarse Con #menu p definira la etiqueta <p> del men (un simple margen en uno de los lados)
Con #contenido h2 defino las caractersticas del texto que tiene asignado un h2 en el DIV del contenido. Nuevamente un simple margen izquierdo igual que en el selector anterior
Y esta la apariencia de mi pgina con CSS

Etiquetas DIV y CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Etiquetas DIV y CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

etiquetas DIV y CSS

las etiquetas div llevarn unas id que me resulten ms familiares:

sustituir el texto por uno ms apropiado

selector del #men. Este es nuestro cdigo de referencia:

#pie este es el cdigo de CSS de referencia:

Y esta la apariencia de mi pgina con CSS

Anda mungkin juga menyukai