Comunidad de diseño web y desarrollo en internet online

Div ajustable dentro de otro Div ajustable, cómo lo hago?

Citar            
MensajeEscrito el 15 May 2008 12:07 am
Hola a toda la comunidad, soy nuevo en cristalab y me uni pk me parece el mejor sitio en

español para obtener ayuda sobre desarrollo web.

Tengo un pequeño problema que ya me ha llevado unos días resolverlo y aun no lo logro. En un

inicio mi problema fue hacer que un DIV fuera ajustable a su contenido, y leyendo el

tutorial basico de ajax de este mismo sitio:
http://www.cristalab.com/tutoriales/162/tutorial-de-ajax
efectivamente pude lograr abrir una pagina dentro de un div y esté se ajustaba al tamaño de

la pagina que contenía, basicamente lo que estaba buscando, sin embargo, al estar

implementando mi pagina me topé con un problema. Y es que yo cargo una pagina en un div

llamado "container" y esté está a su vez dentro de otro div llamado "principal", el problema

es que "container" si se ajusta al contenido, pero "principal" no se expande junto con

"container", esto unicamente en Firefox, porque en IExplorer funciona bien. Debajo pongo el

codigo que estoy utilizando para que se entienda mejor:

La estructura de mi HTML es la siguiente:
<!-- .... -->
<body>
<div id="main"><!--este DIV solo sirve para poner una imagen de fondo con efecto de sombra

-->
<div id="header"> <!-- cabecera -->
</div>
<div id="principal"><!-- cuerpo -->
<div id="menu">
<a href="javascript:llamarasincrono('mipagina.html',

container');">Computadoras</a>
</div>
<div id="container"><!--en este div se carga la pagina del link de menu-->
</div>
<div id="bottom"><!-- pie de la pagina-->
</div>
</div>
</body>

y mi codigo css es el siguiente

body{ margin:0px; background-color:#8C9495;}
#main{ width:940px; min-height:1000px; margin-left:auto; margin-right:auto;

background:url(images/background.jpg) repeat-y;}
#header{ width:100%; height:210px; background:url(images/header.jpg);}
#principal{ width:900px; min-height:790px; margin-left:auto; margin-right:auto;

background-color:#FFFFFF;}
#menu{float:left; width:150px; height:600px; margin:0px;}
#container{ width:750px; min-height:790px; float:right; background-color:#FFFFFF;}
#bottom{ width:940px; height:205px; margin-left:auto; margin-right:auto;

background:url(images/bottom.jpg) no-repeat;}

como ya dije, el codigo anterior funciona bien en IExplorer, pero en Firefox el DIV

"container" se expande y pasa sobre el DIV "bottom", por lo que se enciman y se ve un efecto

bastante feo.

Ademas he probado añadir al codigo anterior las siguientes lineas

html{ height:auto; }
body{ height:auto; }

o tambien

html{ min-height:1000px; }
body{ min-height:1000px; }

pero el resultado es el mismo. Espero puedan darme una ayuda para saber que es lo que estoy

haciendo mal. De antemano agradezco la ayuda brindada.

Por NeoAnderson

10 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 15 May 2008 04:24 am
no tienes un pequeño problema tienes un gran problema, no sabes resumir, estoy cansado y he trabajado todo el dia ¿por que debiera analizar mas de 10 lineas?

resume y podre ayudarte

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 15 May 2008 09:22 am
Problema 2:
No sabes dar formato a tus post.

Consejo:
Usa la etiqueta [code]aquí el código fuente[/code]
Usa la etiqueta [quote]aquí las citas[quote]
Usa negritas, así [b]texto en negritas[/b]

Y sí: resume, esquematiza, y sé sintético.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 May 2008 01:47 pm
Pues eso...


Por bydaface

303 de clabLevel

1 tutorial

 

Barcelona, Spain

firefox
Citar            
MensajeEscrito el 15 May 2008 02:49 pm
Ok, una disculpa, intenté dar detalles para que despues no me dijeran "debes dar mas informacion, con eso no te podemos ayudar". Lo de dar formato pues no lo sabía, pero ya lo haré, y editaría el mensaje anterior, pero parece que en este sitio no tienen esa opcion. Ok una vez dicho lo anterior paso al resumen del problema que tengo.

En el tutorial basico de ajax de este sitio, se puede cargar una pagina dentro de un div y este se ajusta al tamaño de la pagina que contenga. Ahora, si el div anterior está dentro de otro div, cómo hago para que el segundo tambien crezca en la medida que crece el primero?? Este problema solo es en firefox.

Ok, espero haber sido lo suficientemente concreto, y espero puedan ayudarme.

Por NeoAnderson

10 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 15 May 2008 05:46 pm
Lo que tienes que hacer es agregar esta propiedad css a tu div bottom:

Código :

 clear: both; 


El problema que tienes es que los div "flotantes" están diseñados para aparecer encima de los otros divs, así que al expandirse tu div container el navegador interpreta que puede colocarlo encima del div bottom. Con la propiedad clear le dices al navegador que no quieres que los elementos flotantes aparezcan encima del div, both significa que no quieres que floten ni por la izquierda ni por la derecha.

En otras palabras debe quedarte así:

Código :

#bottom{ width:940px; height:205px; margin-left:auto; margin-right:auto; clear:both; }


También te recomiendo que utilices las etiquetas code porque hacen más fácil la lectura y así es más fácil que te ayuden.

Por Odin

Claber

639 de clabLevel

2 tutoriales

Genero:Masculino   Premio_Secretos

El valle de las hamacas

firefox
Citar            
MensajeEscrito el 15 May 2008 09:38 pm
Wow, todo un magazo Odin, te estoy enormemente agradecido, funciona perfectamente. Y si, tomaré en cuenta lo de publicar proximos mensajes con las etiquetas adecuadas, de hecho intenté re editar el mensaje original para dejarlo mas entendible, pero creo que no se puede.
Nuevamente te agradezco haberte tomado el tiempo de leer ese mensaje sin formato en vez de solo remarcarme los errores que tuve.

Por NeoAnderson

10 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.