Foros del Web » Creando para Internet » CSS »

Contenido dinámico para un DIV

Estas en el tema de Contenido dinámico para un DIV en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/02/2007, 05:58
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Contenido dinámico para un DIV

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!
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #2 (permalink)  
Antiguo 14/02/2007, 07:05
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 3 meses
Puntos: 56
Re: Contenido dinámico para un DIV

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 ^_^
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #3 (permalink)  
Antiguo 14/02/2007, 18:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Contenido dinámico para un DIV

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.
  #4 (permalink)  
Antiguo 15/02/2007, 09:43
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 3 meses
Puntos: 56
Re: Contenido dinámico para un DIV

Cita:
Iniciado por Mikmoro Ver Mensaje
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 ^^
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #5 (permalink)  
Antiguo 26/02/2007, 12:53
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Re: Contenido dinámico para un DIV

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!
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #6 (permalink)  
Antiguo 27/02/2007, 02:56
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Contenido dinámico para un DIV

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>
  #7 (permalink)  
Antiguo 27/02/2007, 03:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Contenido dinámico para un DIV

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.
  #8 (permalink)  
Antiguo 27/02/2007, 03:40
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Contenido dinámico para un DIV

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
  #9 (permalink)  
Antiguo 27/02/2007, 04:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Contenido dinámico para un DIV

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.
  #10 (permalink)  
Antiguo 27/02/2007, 04:46
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 8 meses
Puntos: 8
Re: Contenido dinámico para un DIV

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
  #11 (permalink)  
Antiguo 29/01/2008, 15:08
 
Fecha de Ingreso: enero-2008
Mensajes: 1
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Contenido dinámico para un DIV

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.

Última edición por largo74; 29/01/2008 a las 15:59
  #12 (permalink)  
Antiguo 29/01/2008, 15:21
 
Fecha de Ingreso: enero-2008
Mensajes: 7
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Contenido dinámico para un DIV

Cita:
pd: precioso layout, el del sitio ^_^
es verdad
es lindisimo.
  #13 (permalink)  
Antiguo 30/10/2008, 05:15
 
Fecha de Ingreso: mayo-2005
Mensajes: 28
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Contenido dinámico para un DIV

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.
  #14 (permalink)  
Antiguo 30/10/2008, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Contenido dinámico para un DIV

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.
__________________
Visita mi nueva web idplus.org
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 14:51.