Foros del Web » Creando para Internet » CSS »

Cambiar estructura HTML en estructura de 3 columnas

Estas en el tema de Cambiar estructura HTML en estructura de 3 columnas en el foro de CSS en Foros del Web. Muy buenas y perdonen la redundancia . Tengo una estructura de tres columnas, las dos exteriores son de ancho fijo y la del centro es ...
  #1 (permalink)  
Antiguo 20/04/2009, 03:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Cambiar estructura HTML en estructura de 3 columnas

Muy buenas y perdonen la redundancia .

Tengo una estructura de tres columnas, las dos exteriores son de ancho fijo y la del centro es de ancho variable, según resolución del navegador.

Funciona correctamente, el único problema con el que me topo es que en el HTML tengo que anteponer las columnas laterales a la del contenido, y realmente quedaría mejor si es justamente al revés.

Lo que tengo es algo así:

Código html:
Ver original
  1. <div id="left">
  2. menú izquierda
  3. </div>
  4.  
  5. <div id="right">
  6. menú derecha
  7. </div>
  8.  
  9. <div id="central">
  10. Contenido
  11. </div>


Código css:
Ver original
  1. #central{
  2. margin-left:200px;
  3. margin-right:400px;
  4. }
  5.  
  6. #left{
  7. float: left;
  8. width: 200px;
  9. }
  10.  
  11. #right{
  12. float:right;
  13. width:300px;
  14. }

Y me gustaría tener las capas left y right por debajo de central, pero si lo hago tal cual, right y left se posicionan debajo de central y no al lado.

Saludos y gracias.
  #2 (permalink)  
Antiguo 20/04/2009, 11:07
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Cambiar estructura HTML en estructura de 3 columnas

Busca en www.araudi.net, Mikmoro creo algunos ejemplos de diseño a 3 columnas, solo copias el codigo fuente y lo adaptas a tus necesidades.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 20/04/2009, 12:43
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Cambiar estructura HTML en estructura de 3 columnas

Hola, te paso un codigo con el que puedes empezar:

Código:
  #central{
	background: #999999;
	width: 54%;
	float: left;
}

   
       
  
      #left{
	float: left;
	width: 200px;
	background: #0033CC;   
      }
  
       
 
      #right{
	float:right;
	width:302px;
	background: #009966;
      }

HTML:

<div id="left">
menú izquierda
</div>

<div id="central">
Contenido
</div>   

<div id="right">
menú derecha
</div>
  #4 (permalink)  
Antiguo 22/04/2009, 03:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Respuesta: Cambiar estructura HTML en estructura de 3 columnas

Gracias Triby, tiene ejemplos interesantes, pero para lo que yo necesito, tiene practicamente el mismo código. Uhm...

talmente creo que tu código no funcionaría ya que right estaría debajo del resto del contenido. Eso sí, a la derecha.

El asunto es poner el contenido de la capa central por encima de las otras, ya que es el contenido principal. Por cosas del SEO más que otra cosa.
  #5 (permalink)  
Antiguo 22/04/2009, 03:58
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Cambiar estructura HTML en estructura de 3 columnas

OK, yo te lo mando con medidas en % tu te lo acoplas a lo que quieras:

Código:
 


#contenedor {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #CC99CC;
	float: left;
	position: relative;
}

#contenedor #contenido {
	width: 50%;
	position: relative;
	left: 25%;
	background: #990000;
	float: left;
}
#contenedor #right {
	float: right;
	width: 25%;
	background: #996600;
	clear: right;
}
#contenedor #izq {
	background: #0099CC;
	position: relative;
	left: -50%;
	width: 25%;
	float: left;
}

HTML:
<div id="contenedor">
<div id="contenido"> 
Contenido
</div>

<div id="izq">
menú Izq</div>

<div id="right">
menú derecha</div>
</div>
A ver qué tal
  #6 (permalink)  
Antiguo 22/04/2009, 18:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Respuesta: Cambiar estructura HTML en estructura de 3 columnas

Muchas gracias.

Me pelearé un rato para que #contenido tenga una medida flexible y right y left medidas fijas, pero si que me sirve.
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 21:50.