Tres en uno

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 pegárselas 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?

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net