largo de pagina variable en funcion del contenido automaticamente

[yonaida]

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.

[saul123]

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

[yonaida]

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;
}		

}

[C2am]

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:

<div id ="contenedor">
 
           <div id="cabecera">
             <!-- contenido de toda la cabecera -->
           </div>
 
           <div id="medio o central etc">
 
                        <div id="sidebar">
                                 <!-- contenido de la columna izquierda o sidebar -->
                        </div>
 
                        <div id="contenido">
                                <!-- contenido principal de la pagina -->
                        </div>
 
           </div>
 
          <div id="pie">
               <!-- contenido pie -->
          </div>
 
</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

[yonaida]

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;*/
}

[C2am]

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

[yonaida]

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....

[jomaruro]

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.

[yonaida]

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