Foros del Web » Creando para Internet » CSS »

Duda Urgente Posicionamiento Tres Columnas

Estas en el tema de Duda Urgente Posicionamiento Tres Columnas en el foro de CSS en Foros del Web. Hola. Estoy intentando crear la típica pagina web,con tres columnas, cabecera y footer. Quiero declarar el div central primero( donde irá el contenido) y luego ...
  #1 (permalink)  
Antiguo 21/01/2008, 15:12
Avatar de felix_h  
Fecha de Ingreso: enero-2008
Mensajes: 5
Antigüedad: 9 años, 10 meses
Puntos: 0
Duda Urgente Posicionamiento Tres Columnas

Hola. Estoy intentando crear la típica pagina web,con tres columnas, cabecera y footer. Quiero declarar el div central primero( donde irá el contenido) y luego declarar las dos columnas laterales ( dos barras de navegación).

El problema esta en no usar el orden de siempre:

<div id="columna_izq">
<div id="columna_derecha">
<div id="centro">

sino, que al querer poner otro orden, se me bajan las dos laterales, y no hay forma de ponerlas en su sitio.

Mi idea sería poder declarar así:

<div id="centro">
<div id="columna_izq">
<div id="columna_derecha">

Si pudiese declararlo de esta manera, siempre que se deshabilite CSS, lo primero en aparecer es el bloque de Contenido, que es lo que me interesa que aparezca primero.

Os pongo el Css que he utilizado:

Código HTML:
#contenedor {
  
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	/* border: solid 1px #000; */
	background:url(general/back-header2.png)	repeat-x top left #FFF;
		
	}

#columna-izquierda {
	float: left; 
	width: 170px;
	color: #fff;
	/* background: green; */
	padding: 10px;
	
	
	}

#centro {
    float:none;
	width: 460px; 
	margin-top:20px;
	margin-left: 200px;
		color: #000;
	background: #eee; 
	padding: 10px;
	border: solid 1px #aaa;
	
	}

#columna-derecha {
	float: right;
	width: 180px;
	color: #000;
	 /* background: #ff6; */ 
	padding: 10px;
	
	}



Muchas gracias de antemano por echarle un vistazo, y a ver si logramos sacar el fallo, que no logro pillarlo, y estoy seguro que es porque no domino bien el posicionamiento.
  #2 (permalink)  
Antiguo 21/01/2008, 19:56
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Re: Duda Urgente Posicionamiento Tres Columnas

Mira este ejemplo

Código HTML:
<div id="container">
<div id="header ">
<h1>Título </h1>
<h2 >Subtítulo </h2>
</div>
<div id="sidebar">
<h3 >Sección </h3>
<p>Bla bla ... </p>
</div>
<div id= main">
<h3 >Sección </h3>
<p>Contenido principal </p>
</div>
<div id="footer">
<p>Pie de página </p>
</div >
</div > 
#container
Esta capa es un contenedor para el resto de la página. Establece
la anchura de todo y es la que centra el contenido. El truco
está en usar auto dentro de margin para lograr el centrado. Esto
no funciona en el IE, así que tendremos que echar mano de
text-align: center en el body. El CSS completo es este:
Código HTML:
body {
text-align: center;
}
# container {
width: 700 px;
margin: 0px auto;
text-align: left;
}
Para la barra lateral utilizas
Código HTML:
float: left;
ahora bien. para que el footer te quede abajo utiliza
Código HTML:
clear: both;
NOTA
Cita:
:tu puedes alterar el orden en que quieras que aparezcan los elementos siempre y cuando tomes esa precauciones.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #3 (permalink)  
Antiguo 21/01/2008, 21:04
Avatar de felix_h  
Fecha de Ingreso: enero-2008
Mensajes: 5
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Duda Urgente Posicionamiento Tres Columnas

Muchas gracias, pero No me sirve. En tu ejemplo, tenemos un contenedor, y dentro de el, una cabecera, una barra lateral, un cuerpo principal para el contenido, y un footer. Y todo ello ordenado ( divs) por ese mismo orden.

Sin embargo, mi ejemplo, el que me da problemas, es poder poner tres columnas, donde la central es el contenido.

Como veis, he puesto el div del contenido en función de las otras dos barras. colocando una float: left y la otra float: right, y el resto de espacio para el contenido. ( en el style css) Sin embargo, al declarar en el HTML las divs, tengo que declararlas por el orden tipico:

contenedor
cabecera
1. barra lateral izquierda
2. barrla lateral derecha
3. contenido
footer

Porque al ponerlo en el orden que me interesa:

contenedor
cabecera
1.contenido
2.barra lateral izquierda
3.barra lateral derecha
footer

SE BAJAN las COLUMNAS LATERALES. como si todo el contenido central ocupase todo.



¿Se puede hacer que este orden ( en divs) no afecte a lo visualizado cuando la plantilla CSS esté ACTIVADA.? Es decir, conseguir declarar en el HTML las etiquetas DIVs en el orden que yo quiera, sin que afecte al orden visualizado????

Menudo lio, jejeje.




No se si logro explicarme, si no es asi, intentare subir a alguna web el caso que me sucede, para que podais verlo mas claramente.
  #4 (permalink)  
Antiguo 22/01/2008, 06:32
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Duda Urgente Posicionamiento Tres Columnas

le has dado un ancho a todas las columnas?
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 22/01/2008, 14:12
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Re: Duda Urgente Posicionamiento Tres Columnas

Mira esta web

http://www.inconcientecolectivo.cl/layouts/
No pude dar con tu problema en especifico, a mi me paso lo mismo que a ti, de hecho creía que lo había arreglado pero se me descuadro.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #6 (permalink)  
Antiguo 24/01/2008, 14:03
Avatar de felix_h  
Fecha de Ingreso: enero-2008
Mensajes: 5
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Duda Urgente Posicionamiento Tres Columnas

Oye, Genial la pagina. Ya con eso, he podido solucionarlo, Muchas gracias.

Aunque una lastima no saber porqué pasan estas cosas tan raras.jejeje

Gracias.
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 20:39.