Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/04/2011, 12:39
raulrivero
 
Fecha de Ingreso: julio-2010
Mensajes: 33
Antigüedad: 13 años, 9 meses
Puntos: 0
realice un procedimiento errado

trato de hacer una pagina con el texto en tres columnas y buscando encontre un codigo css que al provarlo funciona :
http://img854.imageshack.us/i/fotodepaginatrescolumna.jpg/
el codigo es este:

<html>
<head>
<title>columnas con div</title>
</head>
<body>

<h1> columnas con div</h1>
<div style="text-align:center;margin:0 auto;width:150%;">

<div style="width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;">texto
<img src="piedra.jpg" width="700" style="margin: 5px 0px 5px 5px;float: left; " /></div>

<div style="width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;">texto</div>

<div style="width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;">texto </div>

<div style="clear: both;"/>
</div>

</body>
</html>

Entiendo q para ahorrar codigo ,css, permite poner todo el codigo en un archivo aparte y trate de convertir el anterior codigo css(<div style="width:....) de manera que pueda escribirse entre los heads y de funcionar, es facil llevar ese codigo css a un archivo de estencion .css .A continuacion lo que hice:


<html>
<head>
<title>columnas con div</title>
<style>
#style
{
text-align:center;margin:0 auto;width:150%;
}
#col 1
{
width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;
}
#col 2
{
width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;
}
#col 3
{
width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;
}
#style both
{
clear: both;
}
</style>
</head>
<body>

<h1> columnas con div</h1>
<div id="style">
<div id="col 1">texto</div>
<div id="col 2">texto</div>
<div id="col 3">texto</div>
<div id="style both"></div>
</div>

</body>
</html>

actualizando:
http://img192.imageshack.us/i/fotodepaginatrescolumna.jpg/
podrian por favor ver si me equivoque de plano o si hay detalles en los que me equivoque .Saludos a todos.

Última edición por raulrivero; 01/04/2011 a las 13:07 Razón: los enlaces no salen azules