Foros del Web » Creando para Internet » CSS »

bloques (div's) paralelos

Estas en el tema de bloques (div's) paralelos en el foro de CSS en Foros del Web. hola! soy una novata en esto de los css quiero hacer lo siguiente!: estructurar mi pagina, de modo que utilizando las etiquetas div y los ...
  #1 (permalink)  
Antiguo 18/08/2007, 20:16
Avatar de arwen_1  
Fecha de Ingreso: diciembre-2006
Mensajes: 81
Antigüedad: 11 años
Puntos: 0
Pregunta bloques (div's) paralelos

hola! soy una novata en esto de los css

quiero hacer lo siguiente!: estructurar mi pagina, de modo que utilizando las etiquetas div y los css, pueda dividir mi pagina en una barra superior, una derecha una izquierda y la central. como si usara marcos

entonces creo css para cada una de las partes en que quiero estructurar mi pagina, pero cabe destacar que las partes estaran en las mismas filas pero diferentes columnas, es decir, paralelas... entonces abajo les muestro lo que hice, y de lo que muestra la barra superior y la izquierda... pero la central la muestra en la columna adecuada pero justo debajo de la izquierda y lo mismo pasa con la derecha, aparece debajo de la central. no se si sean por justamente los div, ya q en el doc principal haga el uso de los css como muestro en codigo señalizado mas abajo

Código PHP:
<style>

#superior {
    
    
margin-top:5px;
    
margin-left:5px;
    
margin-right:5px;
    
width:100&#37;;
    
height:80px;
    
border:1px solid #FFFFFF;

}

#izquierda {
    
margin:5px 0px 0px 5px;
    
width:17%;
    
height:100%;
    
border:1px solid #003399;
}

#centro {
    
margin:relative;
    
margin:5px 0px 0px 18%;
    
width:66%;
    
height:100%;
    
border:1px solid #FFFFFF;
}

#derecha {
    
position:relative;
    
margin:5px 0px 0px 85%;
    
width:15%;
    
height:100%;
    
border:1px solid #003399;
}
</
style
ahora eso está en el doc .css, en el .php hago las llamadas de los css asi:

Código PHP:
        <div id="superior"></div>
    <
div id="izquierda"></div>
    <
div id="centro"></div>
    <
div id="derecha"></div
por lo que tbn me imagino que al ser div, que bajan una linea, por eso no estan alineados en las mismas filas..

espero que se entienda mi problema!

Última edición por arwen_1; 18/08/2007 a las 20:46 Razón: mejorar la explicacion
  #2 (permalink)  
Antiguo 20/08/2007, 08:16
Avatar de PauCasas  
Fecha de Ingreso: mayo-2006
Mensajes: 5
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: bloques (div's) paralelos

Tienes que jugar con la propiedad float de CSS. Si quieres que un div quede a la izquerda en el estilo poner "float:left;" o si quieres que quede a la derecha "float:right;" Pero para que funcione tendrás que jugar con divs anidados, por ejemplo:

Código HTML:
<html>
<head>
<style>
body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#superior {
    width:100%;
    height:20%;
	background-color:#FFF;
}
#contenedor-inferior{
	padding:0;
	margin:0;
	width:100%;
	height:80%;
}
#izquierda {
	width:100%;
	height:100%;
	background-color:#EEE;
}
#contenedor-derecho{
	float:right;
	width:80%;
	height:100%;
}
#centro {
    width:100%;
	height:100%;
	background-color:#DDD;	
}
#derecha {
	float:right;
    width:25%;
	height:100%;
	background-color:#CCC;		
}
</style>  
</head>
<body>
    <div id="superior"></div>
	<div id="contenedor-inferior">
		<div id="contenedor-derecho">
		    <div id="derecha"></div>  
			<div id="centro"></div>
		</div>
		<div id="izquierda"></div>
	</div>
</body>
</html> 

---------------------------------------------------------------------------------
Curriculums online en http://www.jobgraphy.com
  #3 (permalink)  
Antiguo 21/08/2007, 09:59
Avatar de arwen_1  
Fecha de Ingreso: diciembre-2006
Mensajes: 81
Antigüedad: 11 años
Puntos: 0
Re: bloques (div's) paralelos

pues use lo del float y si funciono... pero los div's no los tengo anidados...

sera por eso que en ie no se ven bien...?

el fierfox queda uno al lado de otro tal y como quiero, pero en ie, entre el div izquierdo y central me queda un espacio del ancho del div izquierdo...

si anido los div q tengo... como el parametro position es relative, no se descuadraria..? igual probaré
  #4 (permalink)  
Antiguo 21/08/2007, 10:14
Avatar de arwen_1  
Fecha de Ingreso: diciembre-2006
Mensajes: 81
Antigüedad: 11 años
Puntos: 0
Re: bloques (div's) paralelos

Hola otra vez, probé el codigo que me enviaste lo aplique al mio y funciona bien en ie! pero en firefox... :s un desastre....
a pesar de que al probar tu codigo sin meterle el mio... si lo muestra bien en firefox..

que podría ser..?
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:17.