Foros del Web » Creando para Internet » CSS »

Poner cosas en distintos cuadrantes de la página, como si fueran frames

Estas en el tema de Poner cosas en distintos cuadrantes de la página, como si fueran frames en el foro de CSS en Foros del Web. Hola, me gustaría saber cómo lograr que por ejemplo pueda tener una tabla al lado izquierdo de la pantalla, que ocupe 2/3 partes, y en ...
  #1 (permalink)  
Antiguo 09/08/2005, 21:13
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 12 años, 10 meses
Puntos: 6
Poner cosas en distintos cuadrantes de la página, como si fueran frames

Hola, me gustaría saber cómo lograr que por ejemplo pueda tener una tabla al lado izquierdo de la pantalla, que ocupe 2/3 partes, y en el tercio derecho, en forma de columna, que me cupiese más información.

O simplemente, poner dos columnas una al lado de la otra.

En concreto, me gustaría poder poner una tabla en la parte de arriba, y debajo de ella, dos columnas de datos distintos.

¿Cómo se pueden mostrar datos por pantalla así?

Una forma que se me ocurre es usando tablas, pero supongo que este método es poco elegante y estará desfasado estando el css con funciones más "chulas".

Saludos

Última edición por un_tio; 09/08/2005 a las 21:32
  #2 (permalink)  
Antiguo 10/08/2005, 11:37
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
supongo que lo que quieres es un layout de 3 columnas:
div1 | div2 | div3

bueno, eso lo puedes hacer:
<div id="uno"></div>
<div id="tres"></div>
<div id="dos"></div>

y la hoja de estilos:
#uno { float: left; width: 30%;}
#dos { margin-left 30%; margin-right: 30%;}
#tres { float: right; width: 30%;}

si puedes poner una imagen de la estructura que quieres, para ayudarte mejor.
  #3 (permalink)  
Antiguo 10/08/2005, 15:06
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
Código:
table { width: 60%; margin: 2%; padding: 1%; float: left;}

/* para las dos columnas */

.columnas { width: 46%; margin: 1%; padding: 1%; float: left;}

/* esto evitara algunos problemas al flotar */ 

br.limpia [ clear: both;}
Código HTML:
<div>
  <table>
	<tr>
	  <td>contenido</td>
	</tr>
  </table>
  <!--- aqui el contenido adicional a la tabla --->
  <br class="limpia" />
</div>
<div class="columnas">contenido columna 1</div>
<div class="columnas">contenido columna 2</div>
<br class="limpia" /> 
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
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 19:01.