Foros del Web » Creando para Internet » CSS »

Adaptar contenido de dos Divs diferentes

Estas en el tema de Adaptar contenido de dos Divs diferentes en el foro de CSS en Foros del Web. A ver si me explico, yo tengo dos divs (uno es invisible, porque cuando le hago clic se muestra y el otro es de fondo), ...
  #1 (permalink)  
Antiguo 30/04/2011, 18:53
 
Fecha de Ingreso: marzo-2011
Mensajes: 18
Antigüedad: 6 años, 9 meses
Puntos: 1
Pregunta Adaptar contenido de dos Divs diferentes

A ver si me explico, yo tengo dos divs (uno es invisible, porque cuando le hago clic se muestra y el otro es de fondo), bien, lo que quiero hacer es que cuando se haga visible, se adapte al de fondo, es decir, que el de fondo tome los píxeles exactos del primer div (el insible), espero que no os haya confundido, perdonad mi ortografia pero es que tengo sueño, saludos
  #2 (permalink)  
Antiguo 30/04/2011, 19:32
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: Adaptar contenido de dos Divs diferentes

Supongo que el hacerlo visible lo harás con JavaScript...que problema sería cambiarle el tamaño entonces?

Explica un poco más como lo haces, si usas jquery, etc.
__________________
Web Designer.
Themes-Up!, próximamente
  #3 (permalink)  
Antiguo 30/04/2011, 23:39
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: Adaptar contenido de dos Divs diferentes

Si entendí correctamente podés intentar encerrando ambos div's en otro. El padre deberá tener position:relative y las dimensiones que necesitás. Los dos div's hijos tendrán position:absolute con left y top puestos en 0 y también las mismas dimensiones. De esa forma ambos divs estarán en el mismo lugar y ocuparán el mismo espacio. Podés ocultarlos y mostrarlos con javascript.
__________________
nahueljose.com.ar
  #4 (permalink)  
Antiguo 01/05/2011, 04:28
 
Fecha de Ingreso: marzo-2011
Mensajes: 18
Antigüedad: 6 años, 9 meses
Puntos: 1
Respuesta: Adaptar contenido de dos Divs diferentes

Bien, gracias por la ayuda.
Pero ya probéa ponerle position:relative y me lo cargue todo...
Se puede hacer con algún tipo de Script?

Te dejo el script por capas que hice:

El cuadro padre su respectivo CSS:
Código CSS:
Ver original
  1. .GloboTrans.GlbTransparent{
  2. background: #f5f6f6; /* old browsers */
  3.  
  4. background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* firefox */
  5.  
  6. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6)); /* webkit */
  7.  
  8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* ie */
  9.  
  10. background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* opera */
  11.     border:6px solid #000000;
  12.         width:1140px;
  13.     height:5100px;
  14.         position:absolute;
  15.         top:230px;
  16.         left:100px;
  17.         padding:5px;
  18. }

Tiene oro padre para varios en común, pero eso no creo que afecte, en todo caso te dejo su CSS:

Código CSS:
Ver original
  1. .GloboTrans {
  2. z-index:1;
  3. filter:alpha(opacity=75);
  4. -moz-opacity:.75;
  5. opacity:.75;
  6.     -moz-border-radius: 5px;
  7.     -khtml-border-radius: 5px;
  8.     -webkit-border-radius: 5px;
  9.    box-shadow: 4px 4px 3px #000;
  10.    -webkit-box-shadow: 4px 4px 3px #000;
  11.    -moz-box-shadow: 4px 4px 3px #000;
  12.    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
  13. }

Y el java Script, con su recuedro para enlazar las dos páginas:

Código Javascript:
Ver original
  1. function Code() {
  2. document.write ( '<!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"><head><script language="Javascript"> function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="visible"; } function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="hidden"; } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body><div id="window1" style="position:absolute; z-index:10; left:1px; top:1px; width:1146px;background-color:#dde3eb; border:1px solid #464f5a; visibility:hidden"> <div style="padding-bottom:8px; width:1146px; height:20px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);"><div style="position:absolute; top:1px; left:5px; font-size:20px; font-weight:bold; color:#FFFFFF;"> <center>' )
  3. }
  4.  
  5. function Code0() {
  6. document.write ( '</center> </div><div style="position:absolute; top:3px; left:1132px; float:right;"> <div onclick="ocultar(\'window1\')"><img src="http://i.imgur.com/Fd6Q2.png" border="0" title="Cerrar" /></div></div> </div> <div style="margin-left:5px;">' )
  7. }
  8.  
  9. function Code1() {
  10. document.write ( '</div></div></body></html>' )
  11. }
  12.  
  13. function Code2() {
  14. document.write ( '<div id="capa1" onclick="mostrar(\'window1\')">' )
  15. }
  16.  
  17. function Code3() {
  18. document.write ( '</div>' )
  19. }

Y el enlace:

Código HTML:
Ver original
  1. <script src="SP Tabs JS.js"></script>

Sí, el archivo JS se llama 'SP Tabs JS', jeje, saludos

Ah, por cierto donde quiero poner la ventanita, solo hago esto:

Código HTML:
Ver original
  1. <script>Code()</script>El título<script>Code0()</script>Contenido<script>Code1()</script><script>Code2()</script>Botón para activar variables<script>Code3()</script>

Última edición por Seazoux; 01/05/2011 a las 04:31 Razón: Me falto un detalle

Etiquetas: contenido, diferentes, divs, adaptador
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 06:15.