Foros del Web » Creando para Internet » Diseño web »

largo de pagina variable en funcion del contenido automaticamente

Estas en el tema de largo de pagina variable en funcion del contenido automaticamente en el foro de Diseño web en Foros del Web. hola, estoy diseñando una web de una empresa, la cuestion es que necesito que el largo de la pagina sea variable acorde con el contenido ...
  #1 (permalink)  
Antiguo 26/04/2011, 01:48
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
largo de pagina variable en funcion del contenido automaticamente

hola, estoy diseñando una web de una empresa, la cuestion es que necesito que el largo de la pagina sea variable acorde con el contenido de la misma, osea, si tengo mucha informacion que se amplie hacia abajo automaticamente y si tengo poca se quede del largo que haga falta.

he metido el contenido en un contenedor (head, contenido, side bar, pie etc..) la pagina me hace overflow automatico en esta pagina que es la que tiene mas contenido [URL="http://alconza.com/test3/reduced_list.html"]http://alconza.com/test3/reduced_list.html[/URL] pero el pie de pagina me desaparece.

pero si se fijan en el index como tiene poco contenido se ve el pie de pagina perfectamente.
[URL="http://alconza.com/test3/index.html"]http://alconza.com/test3/index.html[/URL]

creo que se me esta pasando algo en el estilo, una ayudita por favor. gracias de antemano.
__________________
Everybody Else It's Doing It, So Why Can't We?
  #2 (permalink)  
Antiguo 26/04/2011, 05:13
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: largo de pagina variable en funcion del contenido automaticamente

Hola

Para que el contenido de tu pagina web crezca según la información que contenga solo tienes que decirle a tus div que su higth sea auto , y por lo que veo el problema esta en el css, quizá si nos muestras el código css podria decirte mas
  #3 (permalink)  
Antiguo 26/04/2011, 07:37
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
Respuesta: largo de pagina variable en funcion del contenido automaticamente

hola, gracias saul, ya puse el height en auto y parece que me vaya bien, lo que no consigo es que el pie se coloque debajo sino que sigue quedandose fijo: http://alconza.com/test3/marine/offshore_const_vessels.html
coloco el css para echar un vistazo a ver que se me esta escapando -.-
Código:
*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	margin:0;
        padding:0;
        text-align:center;
	background-color:#fff;	 /*dbe3e8 dedede f8f8f8 e1e1e1 d4d4d4*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
body#item1 a.selected1, body#item2 a.selected2, body#item3 a.selected3,
body#item4 a.selected4, body#item5 a.selected5, body#item6 a.selected6,
body#item7 a.selected7, body#item8 a.selected8
	{
	   text-decoration: none;			
	   background:transparent url('../img/blue_selected.png') repeat-x top left;
	   color:#336699;			
	}
body#item1 a.subselected1, body#item2 a.subselected2, body#item3 a.subselected3,
body#item4 a.subselected4, body#item5 a.subselected5, body#item6 a.subselected6,
body#item7 a.subselected7, body#item8 a.subselected8
	{
	   text-decoration: none;			
	   background:transparent url('../img/black.png') repeat-x top left;
	   color:#336699;
	}		
a:link, a:visited{
	text-decoration: none;
	color:#336699;
}
a:hover { color:black; text-decoration:none;}
a:active {
	text-decoration: none;
	color:#336699;
	font-weight:bold;
}

A.link1:link, A.link1:visited, A.link1:hover,A.link1:active
{
	text-decoration: none; /* pie */
	color:#336699;
}
A.link2:link, A.link2:visited, A.link2:hover,A.link2:active
{
	text-decoration: none; /* cabecera*/
	color:#336699;
}

h {text-align:center;}

#contenedor {	
	margin:0 auto;  
        width:1000px;	
 	background-color:white;
	text-align:left;
	height:auto;
	margin-bottom:5px;	
	}
#top_bar {	
	width:1000px;
	height:30px;
	float:left;	
	text-align:right;	
	z-index:10;		
	background-color:#fff;
	
}
.texto_topbar{
       font-size:11px;
       color:#fff;
       margin:5px;
       color:black;
}	
#head {	
	width:1000px;
	height:40px; 
	float:left;
	z-index:2;	
	background:transparent url('../img/blue4.png') repeat-x top left;
	border-top:0px solid #336699;
	
}

#head2 {
	width:1000px; /*CABECERA IMAGEN */ 
	height:195px;
	text-align:left;	
	}
#division {
	float:left;
	width:1000px;
	height:15px;	
	background-color:white;	
	z-index:20;
	border-top:0px solid #336699;
	}
#foto{
	float:left;
	width:1000px;	
	height:170px;
	z-index:10;
	text-align:left;
	
	}
#side_bar{
	width	:200px;
	height	:575px;	
    float:left;   		
	z-index		:15;
	background-color: white;	
	text-align		:center;
	color			:black;	
	font-size		:14px;	
}
#division2{
	width:1px;	
	height	:575px;	
        float:left;		
	z-index	:20;		
	border-right:1px solid #d4d4d4;	
	
}

#contenido {	
	margin-bottom:10px;
	width:796px;
	height:auto;	
	height:565px;  
	float:right;		
	z-index			:15;
	background-color: white;	
	font-size:12px;
}
#pie {
        width:1000px; 
	height:25px; 	
	z-index:90;
	font-size:11px;
	color: #336699;	
	background:white;	
	/*background:transparent url('../img/blue3.png') repeat-x top left;*/

#texto {

      width: 785px;
      height:auto;	
      float:left;
      margin:5px;
      z-index:	20;
      background-color:white;
      text-align:center;
}		

}
__________________
Everybody Else It's Doing It, So Why Can't We?
  #4 (permalink)  
Antiguo 26/04/2011, 08:57
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: largo de pagina variable en funcion del contenido automaticamente

El problema surge de los elementos flotados.
Una solución rápida es flotar también el pie, pero lo mejor es que revises la estructura y limpies los float o directamente que los borres de donde no son necesarios.
Por ejemplo la cabecera no hace falta que este flotada, luego viene el contenido que lo tienes divido en dos: columna izquierda "side bar" y contenido que estan flotadas a la izq y der respectivamente, lo cual es correcto. Pero veo tambien dos "divisiones" que no tienen contenido alguno, es decir que estan de más, no hacen falta. Y luego tienes el pie.

Pasando en limpio, y como sugerencia, que puede ser correcta o no:
Código HTML:
Ver original
  1. <div id ="contenedor">
  2.  
  3.            <div id="cabecera">
  4.              <!-- contenido de toda la cabecera -->
  5.            </div>
  6.  
  7.            <div id="medio o central etc">
  8.  
  9.                         <div id="sidebar">
  10.                                  <!-- contenido de la columna izquierda o sidebar -->
  11.                         </div>
  12.  
  13.                         <div id="contenido">
  14.                                 <!-- contenido principal de la pagina -->
  15.                         </div>
  16.  
  17.            </div>
  18.  
  19.           <div id="pie">
  20.                <!-- contenido pie -->
  21.           </div>
  22.  
  23. </div>
Luego a cabecera, medio/central/etc, y a pie no debes flotarlo, ya que se acomodarán siguiendo el flujo normal del documento, es decir uno debajo del otro.

Dentro de ellos sí puedes poner lo necesario flotado, por ejemplo en "medio/central o como quieras llamarlo" pones side bar flotado a la izquierda y "contenido" flotado a la izq o derecha (como gustes), teniendo cuidado de que la suma de sus anchos no supere el de la caja que los contiene.
saludos, y espero que se entienda


Enlaces sobre como limpiar los float: http://www.librosweb.es/css_avanzado...ar_floats.html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 26/04/2011 a las 08:59 Razón: Enlace
  #5 (permalink)  
Antiguo 27/04/2011, 03:59
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
De acuerdo Respuesta: largo de pagina variable en funcion del contenido automaticamente

hola C2cam muchas gracias por tu ayuda , he quitado los float y puesto el contenido en los 3 bloques (cabecera - central - pie) y parece va bien.

lo que no me gusta es que me sale la barra de dezplazamiento horizontal como si el ancho de la pagina fuera mayor del normal y no entiendo por que, puesto que el body no tiene ancho predeterminado, esto para que quede el contenedor centrado.

alguna sugerencia al respecto. ¿?


asi ha quedado el codigo.
Código:
*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	
        text-align:center;
	background-color:#fff;	 /*dbe3e8 dedede f8f8f8 e1e1e1 d4d4d4*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#contenedor {	
	margin:0 auto;  
	margin-top:10px ;
        width:1000px;	
	background-color:white;
	text-align:left;
	height:1%;
	margin-bottom:10px;	
	overflow:hidden; 
	} 
 
#top_bar {	
	width:1000px;
	height:15px;
	/* float:left;	 */
	text-align:right;	
	z-index:10;		
	background-color:#fff;
	margin-bottom:5px;
	
}
.texto_topbar{
	font-size:11px;
	color:#fff;
	margin:5px;
	color:black;
}	
#head {	
	width:1000px;
	height:40px; 	
	z-index:2;	
	background:transparent url('../img/blue4.png') repeat-x top left;
}

#head2 {
	width:1000px; /*CABECERA IMAGEN */ 
	height:170px;
	text-align:left;	
	}

#foto{
	width:1000px;	
	height:170px;
	z-index:10;
	text-align:left;
	} 

#side_bar{
	width	:200px;
	height	:530px;	
    float:left;   		
	z-index		:15;
	background-color: white;	
	text-align		:center;
	color			:black;	
	font-size		:14px;	
}
#contenido {	
	margin-bottom:5px;
	width:796px;	
	min-height:530px;
	float:right;
	background-color: white;	
	font-size:12px;
	border-left:1px solid #d4d4d4;	
}
#pie {
    width:1000px; 
	height:15px;
	background:white;	
	margin-bottom:5px;
	/*background:transparent url('../img/blue3.png') repeat-x top left;*/
}
__________________
Everybody Else It's Doing It, So Why Can't We?
  #6 (permalink)  
Antiguo 27/04/2011, 11:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: largo de pagina variable en funcion del contenido automaticamente

es que el ancho del "contenedor" es 1000px y a eso debes sumarle los margenes, padding, bordes de los elementos interiores.
La medida recomendada es mas o menos 950 a 980 (no recuerdo exactamente), así que ve probando.
Busca en este foro sobre medidas aconsejadas para la resolución de 1024x768.

También te dejo este link donde se explica sobre el ancho total de una caja (div)
http://librosweb.es/css/capitulo4/ma..._de_cajas.html

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 02/05/2011, 02:25
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
Respuesta: largo de pagina variable en funcion del contenido automaticamente

hola, lo del largo lo he solucionado bastante bien, pero lo del ancho no lo entiendo, pues cogi la referencia de ese ancho de varios periodicos que usan el mismo ancho (elcorreo.es) y no tiene ese problema de la barra de dezplazamiento.

he leido el tema de los div y entiendo que se va sumando todo, pero si el contenedor tiene 1000px y todo lo demas esta dentro, no deberia hacer ese desplazamiento como si tuviera un elemento mucho mayor que el contenedor e incluso el body.

he puesto el ancho mas pequeño y tampoco se soluciona, se reduce el tamaño pero sigue quedando el desplazamiento en la barra. ya no se ni donde mirar....
__________________
Everybody Else It's Doing It, So Why Can't We?
  #8 (permalink)  
Antiguo 02/05/2011, 05:35
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: largo de pagina variable en funcion del contenido automaticamente

Hola:

Tienes que revisar los anchos del id navegation de tu hoja CSS highlight.css, los tienes definidos con un tamaño del 100% y sobrepasan el ancho del navegador.

Saludos.

  #9 (permalink)  
Antiguo 02/05/2011, 08:43
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
Respuesta: largo de pagina variable en funcion del contenido automaticamente

Mil Gracias, habia mirado en todos los css menos en ese, como antes tenia la pagina completa en % habia olvidado cambiar esos.

si es que 4 ojos ven mas que 2 o.O

Salu2
__________________
Everybody Else It's Doing It, So Why Can't We?

Etiquetas: automaticamente, contenido, funcion, largo, variables
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 06:08.