¿Algún sistema para que no se descuadre el contenido?

[neoarcangel]

Hola, muchas veces cuando programo en php por una mala colocacion del html se me descuadra parte del contenido, me gustaria saber si haya algo para evitar eso.
Me habian hablado de esta utilidad

http://developer.yahoo.com/yui/grids/builder/

pero francamente no sé como usarla, ya que hace cosas muy raras, para poner 3 columnas, primero hace un div con todo el contenido luego dentro de ese div pone otro que engloba a las 3 columnas, luego dentro de ese div crea 1 columna y otro div que englobará a las dos siguientes, osea un caos, y luego la colocacion en el codigo es algo rara, primero te pone las dos columnas que van a la derecha y por ultimo la columna que va a la izquierda, no sé hasta que punto es efectivo pero me gustaria algo un poco mas sencillo para evitar el descuadré

¿existe?

[valenti_92]

La solución para que no te descuade el contenido son las hojas de estilo, css. Si por ejemplo quieres hacer 3 columnas tendras que hacer los siguiente:

Código:

<style>
#todo{
position:absolute;
}
#clumna1{
position:relative;
float:left;
width:200px;
height:800px;
}
#columan2{
position:relative;
float;left;
width:600px;
height:800px;
}
#columna3{
position:relative;
float:left;
width:200px;
height:800px;
}
</style>
<div id="todo">
<div id="columna1">
Contenido de la columna 1.
</div>
<div id="columna2">
Contenido de la columna 2.
</div>
<div id="columna3">
Contenido columna 3.
</div>
</div>

Este es un ejemplo de lo que podrías hacer para una mejor estructuración de tu página.

[neoarcangel]

Muchas gracias por perder tu tiempo elaborandome un codigo de verdad te lo agradezco, pero lo que no entiendo son las posiciones, ¿Que es lo que hacen realmente?¿sirven para algo? por que yo las he usado alguna vez pero no me hacian nada.

[valenti_92]

Te explicare un poco para que sirven pero esto es mejor que te cojas algun tutorial por internet que seguro hay muchos.
Para crear una capa se usa el siguiente codigo:

Código:

#capa1{
}

que esto irá dentro de la etiqueta de apertura <style> y la etiqueta de cierre </style>.
Entonces dentro de la capa ponemos los atributos que queramos. Uno podría ser el position:absolute que libera la capa contenedora y la puedes poner donde quieras. Usa top:Nºpx pasa asignar los pixeles que estará respecto la altura y left:Nºpx para los pixeles que estará respecto la izquierda.
Luego pones el contenido que quiera dento del siguiente codigo y ya tienes tu capa montada:

Código:

<div id="capa1">
</div>

[jomaruro]

Hola:

Iniciado por neoarcangel

Muchas gracias por perder tu tiempo elaborandome un codigo de verdad te lo agradezco, pero lo que no entiendo son las posiciones, ¿Que es lo que hacen realmente?¿sirven para algo? por que yo las he usado alguna vez pero no me hacian nada.

Deberías darte una vuelta por los manuales de HTML y CSS de www.librosweb.es

Saludos.

[neoarcangel]

MIrá este es mi codigo actual

<div id="contenedor">
<div id="banner" >
<h1>BANNER</h1>
</div>
<div id="menus" >
<?php include "menus.php"?>
</div>
<div id="contenido" >
<div id="contenedorcolumnas">
<div id="columna1">
<!--MENUS--> cols3
</div>
<div id="columna2">
<?php

$p=$_GET["p"];
if(!$p)
{echo $p="un contenido cualquiera";}
include ($p);
?>
</div>
<div id="columna3">
<!--MENUS--> cols3
</div>


</div>

</div>
<div id="pie" ><p>PIE</p></div>
</div>

Y estos son mis estilos

*{margin:0px;
padding:0px;}
body{font-family:century gothic;
//background:url("imagenes/fondoarriba.png") repeat-x top;
//background:#aaaaaa;
font-size:10pt;
}
#contenedor{width:950px;
*width:71.32em;
min-width:950px;
margin: auto auto;
text-align:center;
border:3px solid #000;
background:#aaaaaa;
}

#menus{/margin-left:35px;
width:940px;
padding-left:10px;
height:46px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
background:url('imagenes/fondocajamenus.jpg') repeat-x;
font-size:9pt;

clear:both;}
#menus ul li{float:left;
font-size:9pt;
}
#menus ul li a{ display:block;
color:#fff;
height:36px;
padding-left:120px;
line-height:46px;
text-decoration:none;
vertical-align:center;
font-size:9pt;}
#menus ul li a:hover{font-size:11pt;
font-style:italic;}
#contenido{padding:10px;}
#contenedorcolumnas{border:2px solid #0f0;
text-align:center;
position:absolute;
clear:both;}
#columna1{width:170px;
margin-left:5px;
position:relative;}
#columna2{width:550px;
margin:0 10px;
position:relative;}

#columna1,#columna2,#columna3{border:1px solid #000;
float:left;}
#columna3{width:170px;
margin-right:5px;
position:relative;}

#pie{clear:both;
border:2px solid #0f0;}

Pues bien, todo el tema es el siguiente un contenedor que contiene divs
Un div para el banner
Un div para el menu
Un div para el contenedor global
Dentro de este un div para contener 3 columnas
Dentro de este 3 divs que son las 3 columnas
Y por ultimo un div para el pie

Pues bien haciendolo tal y como esta asi, el pie se me sube justo por encima del div contenedor de las 3 columnas ¿Que me falla?