Foros del Web » Creando para Internet » CSS »

Problema con divs relativos.

Estas en el tema de Problema con divs relativos. en el foro de CSS en Foros del Web. Hola de nuevo. Tengo una duda que a ver si saben como solucionarla. Estoy haciendo una web que tiene un montón de DIVS uno detrás ...
  #1 (permalink)  
Antiguo 25/06/2011, 18:58
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Problema con divs relativos.

Hola de nuevo. Tengo una duda que a ver si saben como solucionarla.

Estoy haciendo una web que tiene un montón de DIVS uno detrás de otro. La información que va en cada uno de estos DIVS es variable, por lo que su estructura es parecida a:

Código:
<div id="bloque1>Info</div>
<div id="bloque2>Info2</div>
Donde cada div es algo como:
Código:
#bloque1{ width:560px; background-color:#f3f3f3;}
Dicho de otro modo: Se suceden los divs para que independientemente de la longitud de uno, el otro le vaya detrás y así sucesivamente.

El problema lo tengo en uno de los divs, donde aparte de ir información variable, desearía tener un div alineado a la derecha y otro a la izquierda. (un lateral es información y el otro lateral es un calendario).
Como los divs entre ellos no son ni relativos ni absolutos, no tengo forma de poner un div a cada uno de los extremos de la capa, y si hago un float left/right, el siguiente div ya no queda seguido de este.

Alguien sabe como puedo hacerlo?

Espero que se entienda mi explicación. Gracias de antemano =)
  #2 (permalink)  
Antiguo 25/06/2011, 19:30
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Problema con divs relativos.

no logro entender como queres que queden los divs... podrias hacer una grafica.. aunq sea con paint?? xD
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 25/06/2011, 20:01
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con divs relativos.

Pongo el ejemplo real:


Como veis, el calendario queda abajo a la izquierda, cuando me gustaría que quedase justo al lado del panel de noticias.
Esto es así pq el panel está configurado de la siguiente forma:

Código:
<div id="body> (el color naranja de fondo)
    <div id="news"> (el color blanco que lo engloba todo)
        <div id="panel-noticias></div>
        <div id="panel-agenda></div>
    </div>
</div>
Esto sucede por que por más que le diga que se ponga a 0px right, el panel agenda, al no tener ninguna capa en absolute, no tiene referencia.

El tema está en que todas las capas son relativas, para que como he dicho, si el panel de noticias tiene 6 noticias en vez de 3, el div "panel-noticias" y "body" se alarguen hasta abajo, y el panel footer (el degradado azul) se mantenga debajo de todo.
  #4 (permalink)  
Antiguo 25/06/2011, 23:15
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Problema con divs relativos.

Dale float left a los 2 div

<div id="panel-noticias></div>
<div id="panel-agenda></div>
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 26/06/2011, 03:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con divs relativos.

Hola:

¿Has comprobado que los dos divs, incluidos margin, padding, border y width, "quepan" dentro de su contenedor?

Saludos.

  #6 (permalink)  
Antiguo 26/06/2011, 04:55
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con divs relativos.

Cita:
Iniciado por GAST0N Ver Mensaje
Dale float left a los 2 div

<div id="panel-noticias></div>
<div id="panel-agenda></div>
Con floats lo puedo solucionar, pero entonces la capa de fondo (el recuadro de color blanco que me distingue esta capa de las demás) no se alarga junto a la agenda y a las noticias.


Estoy empezando a pensar que no se puede hacer lo que quiero si no es con divs absolutos.


Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

¿Has comprobado que los dos divs, incluidos margin, padding, border y width, "quepan" dentro de su contenedor?

Saludos.

De caber caben. El tema es que como el contenedor este está en relativo, no puedo decirle al div "agenda" que se ponga a right:0px, top:0px.
  #7 (permalink)  
Antiguo 26/06/2011, 11:56
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Problema con divs relativos.

es cuestion de maquetar bien, lo que queres hacer es muy sencillo... por favor deja el link de la pagina... lo acomodo mediante firebug , y luego te paso el codigo
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #8 (permalink)  
Antiguo 26/06/2011, 16:10
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con divs relativos.

La web está en esta dirección: http://server.gironactiva.com/gironactiva/terramar/

La hoja de estilos está en la siguiente dirección:
http://server.gironactiva.com/girona...stil/estil.css

Muchas gracias por la ayuda =)
  #9 (permalink)  
Antiguo 26/06/2011, 18:23
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Problema con divs relativos.

tu problema es porq usas position absolute en el wraper , tambien tenes q darle float left a los principales div q contienen informacion...menos al contenedor principal ...esta mal maquetado desde un principio por eso no se acomodan los div, empeza con una estructura basica:

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id footer></div>
</div>

esos serian los principales bloques de contencion... y dentro va la info.. los sub bloques ponelos con clases y no con id..

todos esos div dale float left , menos al wrapper...
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #10 (permalink)  
Antiguo 26/06/2011, 19:13
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con divs relativos.

Muchas gracias por tu ayuda!!! No se me había ocurrido lo de sacarle el absolute en el wrapper =/ aparte de que no sabía la diferencia entre class y id (siempre se aprende algo).

Pero bueno, ahora me encuentro con un pseudo-problema que ya me encontraba en la primera fase, y es que dentro de wrapper que ocupa el 100% tengo un div llamado "body" que sirve para: limitar la página a 1000px de ancho, darle un bg y centrar toda la página con un "margin-left/right".

Al aplicarle un float left a todas las capas que están dentro de este body (todas excepto wrapper) este body no se alarga junto al contenido, y si tambien le pongo float left, no se me centra la web.


Editado: Nada nada... solucionado. Me queda un paso más, que lo miro antes de preguntar!!!! ;)

Última edición por chrishxc; 26/06/2011 a las 19:19
  #11 (permalink)  
Antiguo 26/06/2011, 19:33
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con divs relativos.

SOLUCIONADO!!!

Con tus consejos ya ha quedado todo perfecto, tal y como quería.
Muchas gracias por todo!!!!

Un abrazo!

Etiquetas: divs
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:03.