Foros del Web » Creando para Internet » CSS »

Peginas proporcionales al ancho de la pagina

Estas en el tema de Peginas proporcionales al ancho de la pagina en el foro de CSS en Foros del Web. Hola Amigos. EStoy tratando de hacer una página con css pero se me presenta un problema que antes con una tabla lo solucionaba rapidamente y ...
  #1 (permalink)  
Antiguo 24/01/2008, 12:26
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Mensaje Peginas proporcionales al ancho de la pagina

Hola Amigos.

EStoy tratando de hacer una página con css pero se me presenta un problema que antes con una tabla lo solucionaba rapidamente y ahora estoy un poco parado.

Supongamos que tenga una tabla de 3 columnas por dos filas asi como intento dibujarlo abajo (los puntos son espacios en blanco)


+----------------------------------------+
|................................................. ................................|
|................................................. ................................|
+----------------------------------------+
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
+----------------------------------------+

la idea es que en la segunda fila, la primera y tercera columna tengan anchos fijos y la del centro un ancho proporcional. De esta manera no dependo de la resolucion del monitor porque la pagina siempre estará llegando a los dos extremos de la pagina. Entonces por un lado no estoy sabiendo hacer que sean todos DIVs y que tenga esta misma funcionalidad. Por otro lado esta el alto. Dependiendo de la información cargada en el DIV del medio, la primera y tercera columna deberian de ir hacia abajo manteniendose alineadas al extremo inferior de la segunda columna.

Se entiende?

Es posible hacerlo con CSS?
  #2 (permalink)  
Antiguo 24/01/2008, 18:21
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Peginas proporcionales al ancho de la pagina

mira a ver si esto te sirve:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style type="text/css">
#contenedor{
width: 80%;
height: auto;
border: 1px solid #000;
margin: auto;
}

#columna1{
float: left;
width: 25%;
height: 600px;
border: 1px solid #000;
}

#columna2{
width: 20%;
height: 600px;
width: auto;
border: 1px solid #000;
}

#columna3{
float: right;
width: 25%;
height: 600px;
border: 1px solid #000;
}
</style>

<body>
<div id="contenedor">
<div id="columna1">aaa</div>
<div id="columna3">ccc</div>
<div id="columna2">bbb</div>
</div>
</body>
</html>
__________________
No diseñes usando tablas.

Última edición por hades87; 24/01/2008 a las 18:30
  #3 (permalink)  
Antiguo 25/01/2008, 08:48
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Re: Peginas proporcionales al ancho de la pagina

Hola hades87. Gracias por la respuesta.

Lo estuve mirando pero al empezar a darle más contenido a la columna del medio por ejemplo agregando mas texto llega un momento en que los limites inferiores de las columnas 1 y 3 quedan y el texto continua para abajo en una forma medio rara. justamente lo que necesito es que parezca que todo continua. y por otro lado no abarca toda la ventana en forma horizontal (el 100% de la ventana)

Si pones en la columna2 este contenido te darás cuenta

<div id="columna2">
<p>bbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf as</p>
</div>
  #4 (permalink)  
Antiguo 25/01/2008, 09:04
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Re: Peginas proporcionales al ancho de la pagina

Esto es lo que necesitaría en CSS para no usar tablas.

-Si se fijan la tabla en si tiene 100% de ancho lo que hace que vaya de extremo a extremo horizontal.
-La primera y tercera columna tiene con ancho de la celda 200px lo que hace que nunca cambien de tamaño.
-La columna del medio no tiene un ancho especificado por lo que es ajustable
-La tabla tiene como alto 400px que lo tomo como el mínimo. Si escribimos mucho texto en la celda del medio irá llando para abajo y obligando a las columnas 1y 3 ir también hacia abajo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<table width="100%" height="400" border="1">
<tr>
<td colspan="3" align="left" valign="top">cabecera</td>
</tr>
<tr>
<td width="200" align="left" valign="top">menu</td>
<td align="left" valign="top"><p>parte del layout que ira cambiando de acuerdo a la informaci&oacute;n </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td width="250" align="left" valign="top">Esto estar&iacute;a reservado para mensajes a los usuarios </td>
</tr>
<tr>
<td colspan="3" align="left" valign="top">pie de pagina</td>
</tr>
</table>
</body>
</html>
  #5 (permalink)  
Antiguo 25/01/2008, 09:28
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Peginas proporcionales al ancho de la pagina

yo te aconsejo que tomes como referencia lo que te dí y mírate algún tutorial de css, para saber propiedades y todo eso y así manejar lo a tu gusto :D
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 25/01/2008, 10:11
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Re: Peginas proporcionales al ancho de la pagina

Ya conozco CSS amigo hades87 pero este problema no estoy pudiendo resolverlo. Ya intente mucho con las propiedades de los DIVs por eso recurri al foro.

CSS ayuda mucho para mantener limpia la pagina ya que no estoy metiendo TABLE por todos los lados y por eso quisiera estructurarlo con DIVs

Si alguien tiene alguna manera de como hacer esto agradecería mucho el aporte.

Saludos
  #7 (permalink)  
Antiguo 25/01/2008, 12:02
Avatar de elbecerro  
Fecha de Ingreso: enero-2008
Mensajes: 7
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Peginas proporcionales al ancho de la pagina

El tema de las columnas con la misma altura en css alcanza ya el caracter de clásico.

Te envio este enlace: www.ejeliot.com/blog/61 (inglés)

Tienes varias propuestas de solución.

Tambien googleando un poco: "columnas misma altura css" encontrarás cosas en español, si las lenguas no son lo tuyo.

Espero que te sirva :)
  #8 (permalink)  
Antiguo 26/01/2008, 08:51
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Re: Peginas proporcionales al ancho de la pagina

Gracias amigo. ahora mismo me pongo a verlo.

Si alguien tiene alguna sugerencia con repecto a la otra parte de la consulta estaría muy agradecido. Es con relación a que abarque todo el ancho de la pagina asi como el ejemplo con TABLE que deje.

Muchas gracias
  #9 (permalink)  
Antiguo 27/01/2008, 03:18
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Peginas proporcionales al ancho de la pagina

al contenedor ponle width: 100%
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 27/01/2008, 04:17
 
Fecha de Ingreso: enero-2008
Mensajes: 1
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Peginas proporcionales al ancho de la pagina

Hola,
Espero que te sirba, a mi para practicar un poquillo me a valido :) aunque seguro que hay muchas formas y/o mejores :P

Saludos

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#columnaArriba {
	border: 1px solid black;
}
#contenedor {
	float: left;
	width: 81%;
	border: 2px solid yellow;
}
#columnLeft {
	float: left;
	width: 20%;
	border: 1px solid red;
}
#mainContent {
	float: left;
	width: 79%;
	border: 1px solid green;
}
#columnRight {
	width: 18%;
	/* Lo floto a la derecha para hacerlo coincidir
	 * con el borde derecho de arriba, si no, tambien
	 * se puede en left
	 */
	float: right;
	border: 1px solid blue;
}
#otra {
	clear: both;
}
</style>
</head>
<body>
<div id="columnaArriba">
	<h2>Columna de Arriba</h2>
</div><!-- Fin columnaArriba -->

<div id="contenedor">
	<div id="columnLeft">
		<h4>Columna Izquierda</h4>
	</div><!-- Fin columnLeft -->
	<div id="mainContent">
		<h4>Columna Central</h4>
	</div><!-- Fin mainContent -->
</div><!-- Fin de contenedor -->
<div id="columnRight">
	<h4>Columna derecha</h4>
</div><!-- Fin de columnRight -->
</body>
</html>
  #11 (permalink)  
Antiguo 05/02/2008, 12:40
 
Fecha de Ingreso: noviembre-2003
Ubicación: Paraguay
Mensajes: 382
Antigüedad: 14 años
Puntos: 4
Re: Peginas proporcionales al ancho de la pagina

Muchas gracias Truxo74
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 04:45.