Saludos amigos, coloco este post porque tengo mis dudas en cuanto a una de las practicas que se realiza en el apartado de “Ejemplos DIV” “Tres en Uno”.
Bueno, me puse hacer mis prácticas para entender un poco más sobre las capas y logre realizar esta plantilla, mis dudas es si es correcto como la realice y que propiedades se le podrían quitar para mejor la hoja de estilo y obtener el mismo resultado:
la Hoja de estilo seria la siguiente:Código HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Pagina de los DIV</title> <link rel="stylesheet" href="estilo-prueba.css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="bartolo"><p>Diseñando Mi primer DIV llamado Bartolo</p></div> <div id="catalina"><p>Diseñando Mi segundo DIV llamado Catalina</p></div> <div id="perico"><p>Diseñando Mi tercer DIV llamado perico</p></div> <div id="contenido"> <div id="pedro"><p> Diseñando Mi Cuarto DIV llamado Pedro, aqui iria el 1er contenido</p> <p>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".</p> </div> <div id="marco">Diseñando Mi quinto DIV llamado Marco, aqui iria el 2do contenido</div> </div> </div> </body> </html>
Código:body {background-color:gray; text-align:center; } #global {background-color:red; border:#000 1px solid; margin:4px auto; padding:2px 2px 800px 2px; width:800px; } #bartolo {background-color:yellow; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left; padding:0px 0px 650px 0px; } #catalina {background-color:blue; border:#000 1px solid; margin:0px 0px 0px 0px; width:712px; float:right; } #perico {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:712px; float:right; } #contenido {background-color:silver; border:#000 0px solid; margin:2px 0px 0px 4px; width:712px; float:right; padding:0px 0px 10px 0px; text-align:justify; } #pedro {background-color:blue; border:#000 1px solid; margin:2px 6px 0px 0px; width:340px; float:left; padding:10px 10px 10px 10px; text-align:justify; } #marco {background-color:blue; border:#000 1px solid; margin:2px 0px 0px 0px; width:340px; float:right; padding:0px 0px 600px 0px; } p {padding:5px 5px 5px 5px}
Citar
.
