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:
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:
<!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>la Hoja de estilo seria la siguiente:
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}