Foros del Web » Creando para Internet » CSS »

Crear más div (contenedor) por debajo de otros

Estas en el tema de Crear más div (contenedor) por debajo de otros en el foro de CSS en Foros del Web. Hola, antes que nada, muy buen sitio para aprender cosas nuevas de creación web's! Bueno, mi pregunta es: Como puedo crear más contenedores en los ...
  #1 (permalink)  
Antiguo 20/10/2009, 09:41
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Mensaje Crear más div (contenedor) por debajo de otros

Hola, antes que nada, muy buen sitio para aprender cosas nuevas de creación web's!

Bueno, mi pregunta es: Como puedo crear más contenedores en los lados, tanto en la derecha como en la izquierda, y justamente por debajo, dejando espacio entre ambos contenedores.

He intentado crearlos, pero siempre me deja al lado del otro cubriendo al cuerpo central.

Espero que me entendais a lo que me refiero exactamente.

muchas gracias!
  #2 (permalink)  
Antiguo 20/10/2009, 10:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

Hola zoloquoki, que bueno te guste fdw, uno mas en el foro!

crea los divs que quieras y luego dale sus correspondientes id. Luego los llamas en <style> y les aplicas las propiedades float y clear. También te servirá aprender a trabajar con la propiedad position. http://www.librosweb.es/css/

En head:
<style type="text/css">
div {width:100px; float:left;}
#a {background-color:red;}
#b {background-color:yellow;}
#c {background-color:green;}
#debajo {clear:both; background-color:purple; width:300px;}
</style>

En body:
<div id="a">asd ada a das das dasd sas d asd as d</div>
<div id="b"> as da sd as da sd as das s da sd</div>
<div id="c"> as da d asd a sd as da sd as d</div>
<div id="debajo">asdas a da as d a sd as d asda sd </div>

Es solo un modo de hacerlo, espero te sirva.
Saludos!
  #3 (permalink)  
Antiguo 20/10/2009, 10:32
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

gracias por la respuesta. El enlace que me has pasado, ya lo habia mirado e intentado, pero no me sale.

Principalmente son 3 columnas (no son frames). En la derecha quiero poner 2 contenedores y en la izquierda 3. Y en la central, esta otro contenedor más grande y amplio para ver la información facilmente.

Cada vez que inserto un div nuevo, siempre me deja al lado del contenedor derecho, y si pongo "clear:both", el contenedor de la izquierda se pone por debajo del contenedor derecho, o sea que no consigo que se fijen los divs en su sitio.

Me gustaría poner mi codigo html y hoja css para que podais echar un vistazo, al parecer no me permiten por ser nuevo.

gracias!!
  #4 (permalink)  
Antiguo 20/10/2009, 12:32
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

Puedes postear el codigo o bien una URL con espacios (misitio . com . ar) hasta que llegues a los 30 mensajes.

- si aplicas clear:both, esta propiedad no permitira que se flote nada (ni por derecha ni por izquierda) alrededor del elemento poseedor de esa propiedad.

Nunca digas no me sale, solo intentalo. Empieza aprendiendo a usar float y clear. Toma, con esto aprendi yo http://www.librosweb.es/css/capitulo...nto_float.html. Si no lo lees es imposible que sigas porque son propiedades fundamentales.
Si lo lees y se te plantea una duda aquí estaremos para ayudarte

Suerte con eso!
  #5 (permalink)  
Antiguo 20/10/2009, 18:10
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

gracias por tu ayuda, y no quiero que me consideres como que no lo intento y que quiero soluciones. Me he pasado todo el día solo para ver si consigo fijar los contenedores donde yo quiero. El enlace que me has pasado, lo he leido por lo menos unas 20 veces, pero el problema es que yo quiero fijar un contenedor a la derecha y justo debajo del superior.

He subido mi web a un sitio para que puedas mirarlo y a ver si está bien.

He coloreado el "contendor 3" en AZUL, y a ver si hay algún fallo.

El "contenedor 1" es el de la izquierda, y el "2" el de la derecha arriba.

(3w.miweb. zxq. net)

gracias!!
  #6 (permalink)  
Antiguo 20/10/2009, 18:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

zoloquiki, valoro tu esfuerzo, mas no puedo ver tu sitio. Dice: "esta cuenta necesita activacion".
Avisame cuando lo hagas funcionar y vemos el problema.

Saludos!
  #7 (permalink)  
Antiguo 20/10/2009, 18:32
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

prueba ahora...
  #8 (permalink)  
Antiguo 20/10/2009, 18:37
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

y recuerda que "3w" es "www". ;)

saludos!
  #9 (permalink)  
Antiguo 20/10/2009, 19:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

zoloquoki: incluye lo siguiente en tu codigo de acuerdo a si quieres que tu div "azul" se coloque debajo del div principal (el que ocupa el centro) o bien se coloque debajo del superior (del lado derecho)

abajo del principal:

#invisible {
clear:both;
}
.thrColLiqHdr #contenedor3 {
float:left;
margin-left:146px;
}

y en body agregas:
<div id="invisible"></div>

antes de:
<div class="thrColLiqHdr" id="contenedor3" align="right">

abajo del superior: dale los siguientes valores a #contenedor3:

#contenedor3 {
float:right;
margin-right:2px;
margin-top:-218px;
}

No es el mejor modo de hacerlo puesto que tienes que ir definiendo las propiedades empezando por las etiquetas "padre" y finalizando con las "hijas" y a ti te faltan las etiquetas "padre"

es decir: si planteas tres columnas entonces crea <div id="col1">, <div id="col2"> y <div id="col3"> y luego a col3 le anidas los dos divs hijos. De ese modo me parece que podras llevar mejor el control de tu maqueta.

Saludos!
  #10 (permalink)  
Antiguo 21/10/2009, 10:13
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

Precisamente por eso no se podía fijar el contenedor por debajo del contenedor derecho. He probado lo que me has dicho, y la verdad no queda nada bien, y debería de hacer otra nueva desde el principio. Crear "padre" y luego "[email protected]", pero quisiera hacer:

Me gustaría hacer un div donde queda dentro demás div's para dar una interfaz más agradable, es decir, el div externo solo para darle el borde como contorno, y dentro varios divs, primero el encabezado, luego las 3 columnas y por último el pie. Pregunta: No afectará al crear dentro del div externo el "padre" e "hij@" sabiendo que las 3 columnas va a estar por debajo del "encabezado". Me explico?

Tal como está la web que miraste, quiero dejarla así pero mejorada.

mil gracias!!
  #11 (permalink)  
Antiguo 21/10/2009, 10:52
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

ouuii!!! por fiiinnnn!!! Ya lo he conseguido!!!!

He tenido que crear otra plantilla con CSS propio del programa CS3. Es que la plantilla de antes era una de 3 columnas flotantes con encabezado y pie, y creo que era esto el que me daba problemas. La que me ha funcionado es la de 3 columnas fijas con encabezado y pie (a partir de ahí he modificado la anchura del container, en vez de 780px, he puesto 95%.

Y luego, copias el contenedor y lo pegas, y añades el "clear:left" o "clear:right" según donde quieras ponerlo. Al mismo tiempo, el float tiene que ser el mismo que el clear. y rulando a la perfección!!!

ahora toca trabajar con javascript para crear menús desplegables... (a veeer q tal...)

Cristian_cena, muchas gracias de verdad!!

salu2!!!
  #12 (permalink)  
Antiguo 21/10/2009, 11:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

Enhorabuena! no hay de que agradecer, me alegro que lo hayas solucionado, y me alegro también en que hayas dado un gran paso respecto a maquetacion, anidando hijos y dando estilos. Eso si .. el codigo que te pasé funcionaba para tu maqueta anterior "sin padres" ahora probablemente ya no te sirva, pero bien puedes ir aprendiendo a usar la propiedad position que te ahorrará mucho tiempo y esfuerzo y sobre todo te dará fluidez en el dominio de css.

Saludos!
  #13 (permalink)  
Antiguo 21/10/2009, 13:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 9 meses
Puntos: 361
Respuesta: Crear más div (contenedor) por debajo de otros

Hola:

Cita:
Iniciado por zoloquoki Ver Mensaje
ahora toca trabajar con javascript para crear menús desplegables... (a veeer q tal...)
Y porqué no hacerlo sólo con CSS, aquí tienes varios ejemplos creados por Mikmoro.

Saludos.

  #14 (permalink)  
Antiguo 21/10/2009, 14:39
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Crear más div (contenedor) por debajo de otros

el enlace que os pasé está actualizada, y si podeis, echadle un vistazo. Acepto cualquier propuesta a mejorar.

jomaruro, gracias por los ejemplos.

Hay alguna mejora en cuanto a lo de las esquinas CSS redondeadas donde funcione en todos los exploradores. En la plantilla anterior he utilizado "-moz-border-radius". Que me decís sobre eso?

saludos!!
  #15 (permalink)  
Antiguo 21/10/2009, 17:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Crear más div (contenedor) por debajo de otros

No veo las esquinas redondeadas en firefox, -moz-border-radius es necesario para que la propiedad css3 border-radius sea interpretada por firefox. Si bien tengo entendido que usándola la hoja de estilo no validá en http://jigsaw.w3.org/css-validator/. De todos modos la uso.
Suerte con eso, veo que mejoro la maqueta
  #16 (permalink)  
Antiguo 13/07/2011, 09:09
 
Fecha de Ingreso: febrero-2007
Mensajes: 16
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Crear más div (contenedor) por debajo de otros

Hola a todos, necesito crear 2 divs al lado del contenedor, una a la izquierda y otra a la derecha, la izquierda me quedo mas o menos como queria, pero la derecha me quedo debajo del contenedor en vez de al costado, que esta mal?

HTML
Código:
<!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">
<link href="estilo.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Poner algo alos costados del contenedor</title>
</head>

<body>
<div id="Izquierda">
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
  <p>Un brazo izquierdo </p>
</div>
<div id="MainContainer">
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
  <p>Estupido centro y estupido flanders</p>
</div>
<div id="Derecha">
  <p>Esto deberia ir a la derecha</p>
  <p>Esto deberia ir a la derecha</p>
  <p>Esto deberia ir a la derecha</p>
</div>
</body>
</html>

CSS
Código:
@charset "utf-8";
/* CSS Document */

html{
	height:100%;
}

body {
	height:100%;
}

#Izquierda {
	margin:left;
	background-color:#ececec;
	width:200px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
	float: left;
	color: #00F;
}

#MainContainer {
	margin:auto;
	background-color:#ececec;
	width:400px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
}

#Derecha {
	margin:right;
	background-color:#ececec;
	width:200px;
	height:100%;
	position:relative;
	top:0px;
	bottom:0px;
	float: right;
	color: #F00;
}
  #17 (permalink)  
Antiguo 13/07/2011, 09:39
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: Crear más div (contenedor) por debajo de otros

Tienes que declarar float el div del centro, para que el de la derecha flote y se coloque donde quieres.

Añade float:left a #MainContainer y reajusta los márgenes y posiciones.

Espero que te sirva, un saludo.
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 23:27.