Piojo91 escribió:Hola, quisiera saber como hacer lo siguiente:
Tengo una div q es la pricncipal dentro de ella se encuentra todo el contenido de mi pag. y yo quisiera q dentro de esa div aya 3 div mas una a la izq otra al medio y una a la derecha..
como haria? esq no me qda :S :(
Saludos
y Gracias
Hola:
Hay varias maneras de hacerlo, lógicamente decir "hágalo de esta manera" sería erroneo, ya que depende mucho del diseño que se tenga de la página.
Por ejemplo le daré unos códigos en que la capa cabecera tiene tres capas, todas con float:left, pero mas abajo de la capa navegación hay dispuestas tres capas, una que se llama lateraliz, otra que se llama lateralde y otra que es la central, experimente poniéndo esos códigos en una página de prueba.
Necesita una página index y una hoja de estilo
Estos son los códigos de la página
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tres capas</title>
<link rel="Stylesheet"href="estilo-capas.css"type="text/css"
media="all">
</head>
<body>
<div id="contenido">
<div class="cabecera">
<div class="logotipo">
logotipo capa izquierda</p></div>
<div class="publicidad">
Centro capa centro</p></div>
<div class="derecha">
Derecha capa derecha</p></div>
</div>
<div class="navegacion"><ul>
Seccion 1
Seccion 2
Seccion 3
Seccion 4
</div>
<div class="lateraliz">
<h2>lateraliz</h2>
<ul>
febrero
marzo
abril
mayo
junio
julio
agosto
septiembre
octubre
noviembre
Estos son unos pocos enlaces</p>
</div>
<div class="lateralde">
<h2>lateralde</h2>
<ul>
uno
dos
tres
cuatro
Estos son otros enlaces para la capa derecha, en la que también puede ponerse una imagen</p>
</div>
<div class="central">
<h1>capa central</h1>
La pagina</p>
kdfjkfgjf fdkldfkjdfkre fieitbed sifdufie diksjhiwhds sdisyifdf diowdhif</p>
Sdkjfhurgf fkgogjrf fioefudifndf befdierheirhf dieryierfe</p>
Fskjfhurg dkdgjhidtgf asiufgeh vduwerguerv euwregur eiwureg3u5rv</p>
lkdhgur fkldfdh jsjsdjdfhf fjfjgjktit fjfjfjfjf fjkfjfjf sjsjsjs sjsjsjus dlfotot fgkfgiogig fifigif bdudufud dudud</p>
a</p>
a</p>
a</p>
</div>
<div class="pie">
esta es la capa pie</p></div>
</div>
</body>
</html>
Y estos los de la hoja de estilo llamada estilo-capas.css
h1{font-size:25px;text-align:center;color:blue;font-weight:bold;text-decoration:none;}
h2{font-size:20px;text-align:center;color:blue;font-weight:bold;text-decoration:none;}
p{text-indent:10px;font-size:14px;color:#586885;text-align:justify;line-height:100%;}
body{font-family: Verdana,Arial,Helvetica,sans-serif;text-align:center;background-color:#FFA500;font-size:14px;}
#contenido{width:950px;margin:4px auto;background-color:#808000;border-style:solid;border-color:#000000;height:auto;}
.cabecera{height:72px;background-color:#FFFFFF;border-bottom-style:solid;border-bottom-color:#000000;}
.logotipo{width:361px;height:72px;float:left;background-color:#000000;}
.publicidad{width:358px;height:72px;float:left;background-color:#00FFFF;}
.derecha{heigth:73px;width:223px;float:left;}
.navegacion{height:45px;background-color:#FF0000;border-bottom-style:solid;border-top-style:solid;margin:5px 0px 5px 0px;}
.navegacion li{float:left;list-style:none;margin:3px 20px 3px 20px;}
.navegacion ul{margin-left:80px;}
.lateraliz{;width:158px;height:auto;background-color:#FFFFFF;float:left;border-style:solid;border-width:1px;margin:0px 0px 0px 5px;padding:3px;}
.lateraliz li{list-style:none;margin:3px 3px 3px 3px;}
.lateralde{width:158px;height:auto;background-color:#FFFFFF;float:right;border-style:solid;border-width:1px;margin:0px 5px 0px 0px;padding:5px;}
.lateralde li{list-style:none;margin:3px 3px 3px 3px}
.central{width:576px;height:auto;background-color:#FFFFFF;border-style:solid;border-width:1px;border-color:#000000;padding:10px;margin:0px 5px 0px 175px;}
.pie{width:auto;height:auto;background-color:#00FFFF;border-style:solid;border-width:1px;border-color:#000000;margin:5px;}
a {color:brown;text-decoration:none;display:block}
a: link{}
a: visited{}
a: hover{color:red;text-decoration:none;background-color:silver;}
a: active{}
.navegacion a:hover{color:blue;background-color:black;}
.navegacion a:active{}
Como le digo, hay otras formas como el combinar tantos por ciento con medidas en píxeles.
Saludos