Foros del Web » Creando para Internet » CSS »

Redimensionar un div dependiendo del contenido de otro

Estas en el tema de Redimensionar un div dependiendo del contenido de otro en el foro de CSS en Foros del Web. Muy buenas a todos :) Qué tal ? Tengo un pequeño problema y no se como subsanarlo :S Como os muestro en la imagen de ...
  #1 (permalink)  
Antiguo 25/01/2010, 07:52
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Redimensionar un div dependiendo del contenido de otro

Muy buenas a todos :) Qué tal ?
Tengo un pequeño problema y no se como subsanarlo :S
Como os muestro en la imagen de abajo tengo el texto que pone Noticia 1 y una barra roja a su derecha.
El problema que tengo es que no se como puedo hacer para que cuando el texto sea más grande el otro div encoja y no salte para abajo :S es la rayada.

Aquí dejo la imagen para que lo vean bien:



Y dejo el código para que lo vean ( está mal porque estoy probando cosas ):

HTML
Código HTML:
 <div class="noticias">
                        <div class="titulo">
                        	<span class="tituloizda">Noticia 1asfasfdasf</span>
                            <div class="titulodcha">sadf </div>
                        </div>
                        <div class="texto">
                        	Texto Noticia
                        </div>
                    </div> 
CSS
Código HTML:
.tituloizda{
	float:left;
	color:#ef2b2d;
	font-size:16px;
	font-weight:bold;
}

.titulodcha{
	float:left;
	background-image:url(../images/linea.gif);
	margin:0 2px;
}
Un saludo y gracias de antemano
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 25/01/2010, 12:20
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Redimensionar un div dependiendo del contenido de otro

Hola Jask: Si lo que buscas son columnas equilibradas aquí tienes algunos ejemplos:

http://www.araudi.net/ejemplos/colum...ilibradas.html
http://www.css.devillasbuenas.es/2columnas.html
http://matthewjamestaylor.com/blog/e...r-css-no-hacks
http://www.vectoralia.com/manual/htm...scolumnas.html

Saludos!
  #3 (permalink)  
Antiguo 25/01/2010, 14:27
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Redimensionar un div dependiendo del contenido de otro

Gracias pero no es eso. Lo que busco es que cuando el texto de la noticia sea largo el div de la derecha se haga más pequeño.
Si yo, por ejemplo, cambio Noticia 1 por "La noticia del día más grande.." la línea roja hace un salto de línea y lo que busco es que se haga más pequeño pero en la misma línea.. No se si se me entiende xD Espero que si !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #4 (permalink)  
Antiguo 25/01/2010, 15:03
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Redimensionar un div dependiendo del contenido de otro

mmm ... me parece que lo que dices se resuelve con javascript. puedes subir una imagen del tipo "antes --> después" así me lo imagino?
  #5 (permalink)  
Antiguo 26/01/2010, 02:29
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Redimensionar un div dependiendo del contenido de otro

Ok, lo siento por no haberlo puesto antes. Aquí dejo como lo quiero más o menos :

Yo tengo esta primera imagen y todo perfecto:



Lo que quiero es que cuando amplío el título de esta manera:



Quede tal cual está en esa imagen, pero no puede quedar así ya que queda de esta forma:



Y no se como variar un div según el contenido del otro. Por ejemplo si tengo dos divs que suman el 100% de donde están contenidos. Un div está al 40% el otro está al 60% pero cuando el primero varía al 70% que el segundo se quede en el 30% mostrando la línea roja :)
El otro problema que tengo es que necesito poner un "contenido" dentro de la caja de línea roja ya que si no no me aparece esta, hay alguna forma de hacer que no haya nada y se vea al tamaño deseado ?

Gracias :) !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #6 (permalink)  
Antiguo 26/01/2010, 02:41
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Redimensionar un div dependiendo del contenido de otro

Si no te quieres complicar mucho puedes utilizar una tabla en vez de div, así las celdas se ajustaran automáticamente al contenido.

Aunque no soy muy partidario del uso de tablas si no es para mostrar datos, puede que en un caso así esté justificado. O sino puedes seguir utilizando los div pero modificar la propiedad display en el css para que se comporte compo una celda de una tabla.
  #7 (permalink)  
Antiguo 26/01/2010, 03:31
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
De acuerdo Respuesta: Redimensionar un div dependiendo del contenido de otro

Cita:
Iniciado por Osdiwe Ver Mensaje
Si no te quieres complicar mucho puedes utilizar una tabla en vez de div, así las celdas se ajustaran automáticamente al contenido.

Aunque no soy muy partidario del uso de tablas si no es para mostrar datos, puede que en un caso así esté justificado. O sino puedes seguir utilizando los div pero modificar la propiedad display en el css para que se comporte compo una celda de una tabla.
Estaba pensando lo de las tablas. Voy a probar aunque no me gusta mucho pero bueno si me saca del apuro, luego lo podré revisar con más calma :)
Tendría que poner los valores con tanto por ciento ?
El problema es que es para mostrar datos ya que esa parte es el título y abajo iría el contenido de la noticia (bueno no creo que le afecte a ese xD )

Un saludo y gracias :) !
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #8 (permalink)  
Antiguo 26/01/2010, 06:43
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: Redimensionar un div dependiendo del contenido de otro

En principio, si no indicas porcentajes ni píxeles, las celdas se deberían acomodar correctamente a su contenido. Lo único que debes hacer es que la tabla ocupe el espacio total que quieres.
  #9 (permalink)  
Antiguo 26/01/2010, 06:55
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: Redimensionar un div dependiendo del contenido de otro

Cita:
Iniciado por Osdiwe Ver Mensaje
En principio, si no indicas porcentajes ni píxeles, las celdas se deberían acomodar correctamente a su contenido. Lo único que debes hacer es que la tabla ocupe el espacio total que quieres.
Perfecto, he podido solucionarlo :)

Muchísimas gracias !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #10 (permalink)  
Antiguo 07/03/2010, 07:26
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Redimensionar un div dependiendo del contenido de otro

Y si aplicas al div el atributo "overflow: hidden"?

De esa manera, en teoría el contenido que supera al contenedor no aparece.

un saludo.
  #11 (permalink)  
Antiguo 07/03/2010, 21:12
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Redimensionar un div dependiendo del contenido de otro

sumado a tu solución... aplica width:auto;
eso toma el ancho restante al 100%... recuerda que el 100% debe ser el ancho del contenedor... te dibujo acá abajo una idea

/|anchotit||ancho imagen|/
los / tienen un ancho fijo
el |anchotit| y |ancho imagen| son autoentonces se calculan automaticamente para cubrir al 100% de los // es decir que si los // miden 250px ese sera el 100%;

espero haber ayudado

Etiquetas: contenido, dependiendo, redimensionar
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 20:08.