Lección I
Complicando el tema un poquito...
Aprovechando que nuestro amigo Hq nos pregunta en el Foro CCTW, vamos a publicar el ejemplo que nos pide.
Hq quiere, basándose en el ejemplo que llevamos hasta ahora, poner dentro de un DIV general (global) uno a la izquierda donde colocar el menú (será bartolo) y otros dos a su derecha, uno encima del otro en los que colcoar el título (en catalina) y en el otro de abajo (perico) los textos. Esto es lo que quiere conseguir y a continuación os indico como hacerlo.
Para ello basta con copiar todo el HTML del DIV catalina y pegarlo justo a continuación. Luego le cambiamos el nombre del DIV por "perico" y personalizamos un poco su texto para distinguirlo, poniendo "Este es mi tercer DIV llamado perico".
El HTML quedaría así:
<HTML
<HEAD
<TITLE>Mi Primera Web Con DIVs</TITLE>
<LINK media=all href="estilo-a001.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
< DIV id=global DIV id=bartolo>
<P>Este es mi primer DIV llamado bartolo</P>
</DIV>
<DIV id=catalina>
<P>Este es mi segundo DIV llamado catalina</P>
</DIV>
<DIV id=perico>
<P>Este es mi tercer DIV llamado perico></P>
</DIV>
</DIV>
</BODY>
</HTML >
Ahora hemos de definir en la hoja de estilos las propiedades de perico, que serán idénticas a las de catalina, con lo que basta con copiar todas las propiedades de catalina y pegarselas a perico, quedando la hoja de estilo de este modo:
BODY { BACKGROUND-COLOR:yellow ;TEXT-ALIGN:center; }
#global { BACKGROUND-COLOR:#FF9900 ; MARGIN:0px auto 0px auto; PADDING: 2px 2px 2px 2px ; WIDTH:800px ; BORDER:#000 1px solid ; }
#bartolo { BACKGROUND-COLOR:#00CC00 ; MARGIN:0px 2px 0px 0px ; WIDTH:80px ; FLOAT:left ; BORDER: #000 1px solid ;TEXT-ALIGN:left ; }
#catalina { BACKGROUND-COLOR:#00CCFF ; MARGIN:0px 0px 0px 0px ; WIDTH:712px ; FLOAT:left ; BORDER: #000 1px solid ;TEXT-ALIGN:center ; }
#perico { BACKGROUND-COLOR:#00CCFF ; MARGIN:2px 0px 0px 0px ; WIDTH:712px ; FLOAT:left ; BORDER: #000 1px solid ;TEXT-ALIGN:justify ; }
P {padding: 10px 10px 10px 10px}
Verás que hemos puesto dos pixeles (2px señalado en rojo arriba) a perico de separación por arriba, para que no quede pegado a catalina. Además hemos cambiado el TEXT-ALIGN de catalina a center (señalado en rojo arriba) , pues al llevar un título mejor quedará si está centrado.
Si proponeis algún otro ejemplo en el Foro CCTW intentaré resolverlo y publicarlo aquí, de acuerdo?