Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de ¿Algún sistema para que no se descuadre el contenido? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/04/2010, 09:29
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
¿Algún sistema para que no se descuadre el contenido?

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?
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #2 (permalink)  
Antiguo 10/04/2010, 12:38
Avatar de valenti_92  
Fecha de Ingreso: enero-2010
Ubicación: Manresa
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 4
Respuesta: ¿Algún sistema para que no se descuadre el contenido?

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.
  #3 (permalink)  
Antiguo 10/04/2010, 17:44
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: ¿Algún sistema para que no se descuadre el contenido?

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.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #4 (permalink)  
Antiguo 10/04/2010, 18:48
Avatar de valenti_92  
Fecha de Ingreso: enero-2010
Ubicación: Manresa
Mensajes: 126
Antigüedad: 7 años, 11 meses
Puntos: 4
Respuesta: ¿Algún sistema para que no se descuadre el contenido?

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>
  #5 (permalink)  
Antiguo 11/04/2010, 06:45
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Algún sistema para que no se descuadre el contenido?

Hola:

Cita:
Iniciado por neoarcangel Ver Mensaje
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.

  #6 (permalink)  
Antiguo 14/04/2010, 13:44
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: ¿Algún sistema para que no se descuadre el contenido?

MIrá este es mi codigo actual

Cita:
<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

Cita:
*{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?
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333

Etiquetas: contenido, sitemap
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:17.