Contenido dinámico para un DIV

arielcasanova · #1 (**permalink**) 14/02/2007, 05:58

Hola. Tengo el siguiente problema:
la página www.uibb.com.ar tiene noticias, las cuales son, a veces cortas, y a veces largas. las toma de una db. En IE se ve perfecto: el div "texto" se agranda o achica de acuerdo a la noticia, pero en FF, no. Prueben de ver este enlace en uno y otro navegador: http://www.uibb.com.ar/notas.php?id=22
Me gustaría saber qué propiedades debe tener la capa para crecer automáticamente en FF.
Gracias!

quinqui · #2 (**permalink**) 14/02/2007, 07:05

holas arielcasanova
para entender qué podía ser lo que pasaba con tu sitio, he tenido que guardarlo en mi equipo para ver el código CSS. espero que no te moleste.
como fuera, el caso es que me atrevería a aventurar que el problema con las DIVs entre estos navegadores viene dado por el parámetro MIN-HEIGHT, el cual sólo funciona en IE.
en este momento no sabría decirte más, porque no he analizado el funcionamiento de tu diseño, pero al menos ese parámetro a mí una vez también me jugó en contra al probarlo en el dichoso firefox...
creo que para solucionarlo aquella vez usé javascript... o no lo solucioné... no recuerdo ^^U jejeje....
bueno, esop.
saludos :)

pd: precioso layout, el del sitio ^_^

Mikmoro · #3 (**permalink**) 14/02/2007, 18:42

Hola, arielcasanova.
Este tema se ha tratado muchas veces en este foro, el problema es que uno no sabe por qué término buscar para encontrarlo, porque deconoce el problema.
La cosa es que en firefox las cajas no crecen según su contenido sin más (y es de hecho la forma correcta de hacerlo). Para crecer, necesita que haya un corte al final del texto (o lo que sea), como una especie de salto de línea.

Se soluciona de esta manera:

-añade a tu css esta clase

.corte { clear: both;}

- en el html, añade un div vacío con esa clase donde termine el texto, justo encima de dónde empieza el pie, es decir, aquí:

<div class="corte"></div>
<div id="pie">

Con esto se solucionará tu problema (espero).

Por otro lado, en realidad es explorer quien no sabe interpretar la propiedad min-height (lo comento para "quinqui", que seguramente por un lapsus lo decía al revés), por eso hay que hacer otras cosas como lo del important, que ya has usado tú, aunque algo desordenado.

Mikel.

quinqui · #4 (**permalink**) 15/02/2007, 09:43

Cita:

Iniciado por Mikmoro

Por otro lado, en realidad es explorer quien no sabe interpretar la propiedad min-height (lo comento para "quinqui", que seguramente por un lapsus lo decía al revés), por eso hay que hacer otras cosas como lo del important, que ya has usado tú, aunque algo desordenado.

Mikel.

oohhh, tienes razón, la verdad no sabía cuál correspondía con cual navegador ^^U. gracias por la aclaración, y por el dato del uso de clear en las clases, espero poder aplicarlo también yo en mis webs ^^

arielcasanova · #5 (**permalink**) 26/02/2007, 12:53

Gente: muchas gracias por la colaboración. pasó un tiempo porque hice la consulta y me olvidé del problema... y ahora me llama mi cliente para decirle que no se lo solucioné, y me acordé de buscar la respuesta.
ahora la busqué, la encontré gracias a uds. y me dio excelentes resultados.
Iuju!
gracias!

MikiBroki · #6 (**permalink**) 27/02/2007, 02:56

El tema de los DIV es algo que me trae a veces de cabeza, sobre todo cuando uno trabaja contrarreloj y termina usando tablas...

Siguiendo con lo expuesto, pongn un ejemplo en el que no logro que el ancho del div se ajuste al contenido en los casos 2 y 3. He probado a poner clear:both en todos lados pero nada.

Sin embargo en el caso 1 va perfecto sin ponerlo. Todo esto en Firefox.

Código:

<html>

<body>
        
<div style="border-style:solid;border-color:red;border-width:2px;">
        
 <!-- CASO1: el div ajusta el contenido, se ve bien (sin clear:both)
 asdf asd fasd fasdf kasdlkasdl kasdlk aslkd faslkd jfalñskj lañksj flñaskjd lñaks jdlñaskjf lñaksjd lñkajsdlñ ajsdlñk jasñldf jasldk jfalsdj añsdj falñsdj alñsdj lñasd jalñsdj faslñdj faslñkf jaslfk j
 -->
        
<!-- CASO2: Se sale por la derecha
       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
-->

<!-- CASO3 -->
<table width="2000px" border=1><tr><td>hola qué tal</td></tr></table>
       
</div>

<div style="clear:both"></div>
        
</body>
</html>

Mikmoro · #7 (**permalink**) 27/02/2007, 03:24

Pues en el caso 1, el contenido se ve bien sin clear: both; porque no lo necesita. En Firefox, un contenedor no crece si lo que tiene dentro son otros contenedores (divs) flotados o en posición absoluta. Si tiene contenedores sin flotar o elementos en línea (o simplemente texto) sí crece sin más, sin necesidad de clear.

En el caso 2, ya comentamos en otro hilo que si no hay espacio entre los caracteres no consigue encontrar el lugar donde hacer el salto de línea (no lo puede hacer aleatoriamente, porque te podría cortar cualquier palabra), por eso no se adapta. Simplemente obliga a que el div sea tan grande como el texto, y si el div tiene un ancho definido, sencillamente el texto se saldrá.

Y en el caso 3, has puesto a la tabla 2.000px de ancho, con lo cual, eso es lo que debería medir (y ocurre lo mismo en explorer, y supongo que en cualquier otro).

Mikel.

MikiBroki · #8 (**permalink**) 27/02/2007, 03:40

Muchas gracias Mikel, lo del caso 1 no lo sabía pero si te he comprendido bien...

En el caso 2 es normal que no se corte porque como muy bien dices, el div no encuentra donde hacer el corte... pero el div NO se adapta al ancho del contenido (en FF)

En el caso 3 sucede lo mismo, tampoco se adapta el div al ancho de la tabla (FF).

Gracias

Mikmoro · #9 (**permalink**) 27/02/2007, 04:07

Ah, vaya, no había entendido bien.

Cuando un div no tiene ninguna especificación en cuanto a tamaño o posición, ocupa por defecto la primera línea disponible en el flujo del documento y todo el ancho de la página.
Para que se adapte al contenido tienes varias opciones: por ejemplo, si le pones un float: left;, el div deja de usar sus valores por defecto y entonces se adapta a su contenido; en el caso 2, si pones display: inline; también se adaptará, porque le estás diciendo que es un elemento en línea y como tal, crecerá para albergar todo el contenido de texto que lleva dentro.

Espero haber dado en el clavo de lo que consultabas.

Mikel.

MikiBroki · #10 (**permalink**) 27/02/2007, 04:46

perfectísimamente MikMoro. Todos los días se aprende algo nuevo, siempre pensé que float:left era sólo para que un elemento se alineará a la izquierda con respecto a otro. Gracias

largo74 · #11 (**permalink**) 29/01/2008, 15:08

Buenas a todos, soy recien llegado en cto a participar posteando pero llevo tiempo leyendo.

Tengo el mismo problema q se comenta aqui y con el div de corte no lo soluciono. No se si sera otro tipo de problema, o quiza por usar posicionamiento relativo. La verdad es q no llevo mucho tiempo dedicado al css.

Os pongo el codigo a ver q os parece.

<?php
include("header.php");
?>
<div id="situacion"><span class="situacion">Inicio</span></div>
<div id="principal">
<div id="navegacion">
<div id="menuprin"><span class="menuprin">MENÚ PRINCIPAL</span></div>
<div id="lista">
<ul id="enlaces">
<li id="textoAct"><a href="index.php"><span class="textoAct">INICIO</span></a></li>
<li><a href="tenis.php"><span class="texto">TENIS</span></a></li>
<li><a href="padel.php"><span class="texto">PADEL</span></a></li>
<li><a href="pool.php"><span class="texto">POOL</span></a></li>
<li><a href="parques.php"><span class="texto">PARQUES INFANTILES</span></a></li>
<li><a href="asfaltos.php"><span class="texto">ASFALTOS</span></a></li>
</ul>
</div>
</div>
<div id="contenido">
<div id="entrada"><span class="entrada">Bienvenido/a a </span></div>
<div id="texto"><span class="texto">
CONTENIDO
</div>
<div id="fotos">
<table border="0" cellspacing="10">
<tr>
<td><A HREF="tenis.php"><IMG SRC="fotos/itenis.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="padel.php"><IMG SRC="fotos/ipadel.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="pool.php"><IMG SRC="fotos/ipiscina.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="parques.php"><IMG SRC="fotos/iparques.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="asfalto.php"><IMG SRC="fotos/iasfalto.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
</tr>
</table>
</div>
<div>
MAS CONTENIDO
</div>
</div>
</div>
<div class="corte"></div>
<?
include("footer.php");
?>

En header.php abro basicamente la calse container y poco mas. En footer.php similar.

El css seria:

#container {
position: relative;
width: 1000px;
margin: 0px auto;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}

#situacion {
position: relative;
width: 954px;
height: 10px;
top: 118px;
left: 25px;
text-indent: 180px;
z-index: 1;
}

#principal {
position: relative;
width: 1000px;
min-height: 550px;;
top: 108px;
background-image: url(images/bck.gif);
overflow: hidden;
}

#contenido {
position: relative;
width: 640px;
top: -485px;
left: 210px;
background-image: url(images/bck2.gif);
background-repeat: no-repeat;
}

.corte {
clear: both;
}

El resto de clases y divs q no aparecen no creo q sean necesarias. Son todas con posicionamiento relativo.

Es claro q algo estoy haciendo mal pero no lo tengo muy claro. No se si es por usar los posicionamientos relativos, aunq el caso es q probe a cambiarlos a absolutos y tampoco.

Espero podais echarme una mano pq llevo ya dias dandole vueltas a esto.

Muchas gracias.

nimraithkar · #12 (**permalink**) 29/01/2008, 15:21

Cita:

pd: precioso layout, el del sitio ^_^

es verdad
es lindisimo.

Cosac_Matsuda · #13 (**permalink**) 30/10/2008, 04:15

En el caso de tener 2 columnas y querer que el contenedor se adapte a su contenido, yo he utilizado el " display:inline-block; " en el css del contenedor.

Si alguien sabe una solución mejor para el caso de que se tuvieran 2 columnas y por lo tanto no se pueda utilizar el clear:both; pues me seria de gran utilidad saberlo.

De momento lo hago con el display.

Mikmoro · #14 (**permalink**) 30/10/2008, 04:48

Creo que sería mejor que pusieras tu propia consulta, porque esta es antigua y bastante extensa, con lo que creo que nadie leerá todo el hilo para saber de qué hablas.