Foros del Web » Creando para Internet » CSS »

ajustar divs al contenido

Estas en el tema de ajustar divs al contenido en el foro de CSS en Foros del Web. Se que el título de para mucho así que mejor les grafico lo que necesito hacer El tema es el siguiente, el segundo div tiene ...
  #1 (permalink)  
Antiguo 08/09/2010, 00:17
 
Fecha de Ingreso: noviembre-2004
Ubicación: Buenos Aires
Mensajes: 34
Antigüedad: 13 años
Puntos: 0
ajustar divs al contenido

Se que el título de para mucho así que mejor les grafico lo que necesito hacer



El tema es el siguiente, el segundo div tiene ancho fijo (digamos 300px) pero la propiedades height es variable (depende del contenido) y con left pasa algo parecido.

El tercer div aparece dentro/sobre el div2, centrado verticalmente y horizontalmente, pero desplazado a derecha del div2 (vieron que era más fácil mostrarlo que escribirlo Y, el div3 también tiene ancho fijo (digamos 130px;) pero el height también debiera ajustarse al contenido.

Bueno, eso es lo que no tengo ni idea de como comenzar, así que cualquier ayuda se agradece...
  #2 (permalink)  
Antiguo 08/09/2010, 10:16
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ajustar divs al contenido

Hola!

La estructura se puede crear sin dificultad.. el problema es el tema del Div3, pues está sobre el Div 2 y saliendose de él.

El Div 3 tiene que estár dentro del Div2, y si el Div3 crece de ancho (130px) y a la distancia a la que está se agranda el width del Div 2.

Es decir, se puede poner como tienes en la imagen, pero no te aseguro que el texto corte y baje al llegar al Div3, se quedaría hasta llegar al final del Div2 y bajaría, y el Div3 taparía esa sección.
  #3 (permalink)  
Antiguo 08/09/2010, 21:36
 
Fecha de Ingreso: noviembre-2004
Ubicación: Buenos Aires
Mensajes: 34
Antigüedad: 13 años
Puntos: 0
Respuesta: ajustar divs al contenido

Dejo lo que tengo hasta ahora (muy poco) pero quizás sirba de punto de partida...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prueba</title>
<style type="text/css">
#contenedor {
background-color: #009900;
width: 300px;
}
#contenido {
background-color: #FF9900;
margin-left: 235px; /* 300-(130/2) */
margin-top: -50%;
width: 130px;
}
</style>
</head>
<body>
<div id="contenedor">
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
<div id="contenido">Este el el texto informativo que complementa a la nota principal</div>
</div>
</body>
</html>


Así como está en IE8 el DIV3 no sale del DIV2... En Firefox y Chome si pero el fondo del DIV2 deja de pintarse donde termina el DIV3.

Bueno... sigo escuchando sugerencias y gracias por todo!
  #4 (permalink)  
Antiguo 08/09/2010, 23:27
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: ajustar divs al contenido

Se me ocurre esta manera nose si te sirve.... prueba
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>prueba</title>
  5. <style type="text/css">
  6. #contenedor {
  7. background-color: #009900;
  8. width: 300px;
  9. }
  10. #contenido {
  11. background-color:#FF9900;
  12. float:right;
  13. margin:0 -65px 20px 20px;
  14. width:130px;
  15. }
  16. </head>
  17. <div id="contenedor">
  18.     <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p>
  19.     <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p>
  20.     <div id="contenido">Este el el texto informativo que complementa a la nota principal</div>
  21.     <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
  22.     <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p>
  23. </div>
  24. </body>
  25. </html>
PD: a #contenido sin margin-top (para posicionarlo) ya que el texto superior dejaria un margen hacia la derecha y no se "amoldaria" este segun dicho objeto sobresaliente
PD: la mejor opcion seria position absolute... pero estaria encima del texto... enfin nose en realidad que pretendes chau....
  #5 (permalink)  
Antiguo 09/09/2010, 11:06
 
Fecha de Ingreso: noviembre-2004
Ubicación: Buenos Aires
Mensajes: 34
Antigüedad: 13 años
Puntos: 0
Respuesta: ajustar divs al contenido

Muy bueno! Ajustando un poco la tuerca yo había llegado a esto:

<?php

$txtNota = "Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, "
. "así que simplemente repetiré este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota principal... la verdad que no tengo ni "
. "idea que más escribir, así que simplemente repetiré este texto una y otra vez. Este es el "
. "texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que "
. "simplemente repetiré este texto una y otra vez.";

$txtInfo = "Este el el texto informativo que complementa a la nota principal";

$pos = (int)((strlen($txtNota)-(strlen($txtInfo)*130/170))/2);
$txtA = substr($txtNota,0,$pos);
$txtB = substr($txtNota,$pos);

?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prueba</title>
<style type="text/css">
#contenedor {
background-color: #009900;
width: 300px;
}
#contenido {
background-color: #FF9900;
width: 130px;
float: right;
display: inline;
}
</style>
</head>
<body>
<div id="contenedor">
<?php echo $txtA; ?><span id="contenido"><?php echo $txtInfo; ?></span><?php echo $txtB; ?>
</div>
</body>
</html>

Nota: Lo único malo es que para centrar el div interior lo hice en base a la cantidad de caracteres. Y por otro lado, aparte de controlar donde inserto al div contenido al preparar la página, renuncié a la idea de que salga del contenedor.
  #6 (permalink)  
Antiguo 09/09/2010, 16:53
 
Fecha de Ingreso: noviembre-2004
Ubicación: Buenos Aires
Mensajes: 34
Antigüedad: 13 años
Puntos: 0
Sonrisa Respuesta: ajustar divs al contenido

Bueno... lo de la alineación horizontal del tercer div ya está resuelto!

Ahora me resta ver como hacer para que el div3 quede centrado verticalmente con respoecto del div2...

De momento desde php puedo contar la cantidad de caracteres y meterlo en medio (mi mensaje anterior)... pero siempre y cuando no quiera usar texto con formato.

O bien puedo seguir la idea de alexk, contar la cantidad de párrafos e insertarlo en medio... pero solo quedará centrado si los párrafos de arriba ocupan el mismo alto que los de abajo (cosa muy improbable).

En conclusión, que ninguna de las alternativas centra realmente verticalmente al div :( ¿ideas?

Última edición por diegoturriaga; 09/09/2010 a las 19:14

Etiquetas: contenido
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 18:57.