Foros del Web » Creando para Internet » CSS »

Flotar abajo a la derecha.

Estas en el tema de Flotar abajo a la derecha. en el foro de CSS en Foros del Web. Todos sabemos cómo trabaja float: left , y que si lo ponemos en una imagen al comienzo de un texto lo bastante largo, éste va ...
  #1 (permalink)  
Antiguo 21/12/2010, 13:43
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Pregunta Flotar abajo a la derecha.

Todos sabemos cómo trabaja float: left, y que si lo ponemos en una imagen al comienzo de un texto lo bastante largo, éste va a encolumnarse a la derecha de la imagen hasta completar su altura, y después va a fluir normalmente (en este caso, por debajo de la imagen).

Lo que recién ahora se me ocurre hacer es que flote abajo y a la derecha, y que "invierta" el mismo formato. Quiero decir, que el final del texto se acomode a la izquierda hasta llegar al límite inferior de la imagen, en su última línea.

Creí haber visto alguna vez un ejemplo de "Quotes" que usaban unas comillas 'enormes' justamente rodeadas por la cita; pero no la encontré de nuevo, o la que hallé no funciona.

¿Alguien sabe si es posible? Quisiera saber para no ponerme a trabajar inutilmente. Aunque todos estamos seguros de que lo voy a terminar haciendo a lo bestia, cortando líneas con javascript. Pero no es la forma; o no debería ser.
Tendrían que haberlo previsto en CSS, porque es tecnicamente posible. Ya probé varios trucos, que no voy a detallar para no influir en la creatividad de nadie; pero lo aclaro para que no tiren "ideas" sin probarlas. Las obvias ya las probé yo.

Gracias a los que lo intenten. Y muchas más a quienes lo logren.

Saludos

furoya
  #2 (permalink)  
Antiguo 21/12/2010, 13:49
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 8 años, 9 meses
Puntos: 175
Respuesta: Flotar abajo a la derecha.

para mover los div o cajas debes tener parametros CSS tipo position

position:absolute;

o

position: relative;

y los mueves con otros paramentros

left: 300px;
right: 405px;
top: -100px;

y asi, experimentalo
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #3 (permalink)  
Antiguo 21/12/2010, 13:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

No. Gracias. Eso lo ubica en una posición, no fluye con el contenido.
Y el cálculo de cuántas líneas debe ocupar el wrapping lo debe hacer el navegador una vez cargada la página. El diseñador no puede, porque no tenemos control sobre cómo va a terminar ubicado el texto. Pero esto es diseño básico.
Te sugiero que antes de apurarte a responder sigas mi consejo y lo pruebes, así no llenamos el post con "ideas" inútiles.

Y si no se puede, es una pena, no se puede. Quedará como sugerencia para los desarrolladores de browsers. que lo inventen ellos y no nos hagan trabajar a nosotros.
  #4 (permalink)  
Antiguo 21/12/2010, 14:06
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 8 años, 9 meses
Puntos: 175
Respuesta: Flotar abajo a la derecha.

"te sugiero" que no me suegieras como postear.. preguntas una cosa, y te respondemos segun lo que podemos o creemos mejor, si no te sirve la info, no la uses...

no hay info INUTIL como dices, eso suena agresivo, porque no sabes cuando entrara alguien a leer esto y puede servirle... la intencion era ayudarte, sin embargo me quieres dar un consejo de manera muy alzada... aca estamos para ayudarnos, y tal vez no interprete bien tu pregunta, por ello se van descartando posibilidades... no es llenar con IDEAS INUTILES como llamas
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #5 (permalink)  
Antiguo 21/12/2010, 14:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Gracias por tu opinión. Mi 'sugerencia' es muy vieja. Me importa mucho que no llenen los post de datos inú... perdón, "que no sirven".

Te sug... perdón de nuevo, te "recomiendo" que leas mis mensajes. Si bien durante mucho tiempo me dediqué a postear código original y a resolver lo que supuestamente "era imposible", de un tiempo para acá me dedico a explicar un poco cómo hay que publicar en un foro, para no arruinar los temas y que alguien que relmente sabe y quiere aprender un poco más no se fastidie con respuestas obvias que no aportan demasiado. Cuando no es que no aportan nada.

Supongo que después de la rabieta porque no te gustó mi mensaje, te habrás puesto a pensar que lo que estoy planteando es un poquito más complejo. Y tu respuesta es realmente de alguien que no diseña. Lo más elemental es saber que no hacemos aquí diseño gráfico, los contenidos fluyen y las posiciones no sirven salvo para elementos que ya tienen medidas fijas.

No voy a poner mil enlaces donde expuse mi posición ante las respuestas desubicadas, aunque bien intencionadas. Tampoco te lo tomes como algo personal.

Lo que te agradezco es que hayas planteado tu posición en el tema y mo hayas hecho la mariconada de usar el karma o —peor— los "No me gusta", que encima son anónimos. Porque así todos podemos ver los motivos de la diferencia.
  #6 (permalink)  
Antiguo 21/12/2010, 16:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Hola Furoya:
Interesante reto.
Permíteme exponerte lo que he creído entender, que es tarde y ando espeso a estas horas.
Sea un html mínimo tal que:
Código HTML:
Ver original
  1. <div>
  2. <img src="ruta.ext" alt="alt" />
  3. <p>......</p>
  4. <p>......</p>
  5.  
  6. <p>......</p>
  7. <p>......</p>
  8. </div>
Lo que planteas es que la imagen aparezca antes que los párrafos (¿o en el primer párrafo?), que se posicione en la esquina inferior derecha y que el texto fluya por arriba de la imagen y al alcanzarla sólo a su izquierda.
¿Un sólo párrafo (<p></p> o indefinidos?
Así mismo el borde inferior de la imagen tiene que quedar alineado (en x) con la última línea del texto.
Lógicamente, es supuesto exige que sea mayor la altura del texto que la de la imagen.

¿Entendí bien?
Supongo que preferirás un código lo más compatible con cuantos más navegadores mejor.

A ver qué si se nos ocurre algo, si es posible. Porque ahora, a bote pronto, no recuerdo haber visto esta composición sólo con css.
  #7 (permalink)  
Antiguo 21/12/2010, 21:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años
Puntos: 137
Respuesta: Flotar abajo a la derecha.

lo primero que se me ocurrio fue la etiqueta <tfoot> XD... (que apesar de estar antes del <tbody> se mustra despues)
asi que lo aplique pero con CSS al primer <p> (display:table-footer-group;) luego al ulitmo <p> le di el margin-right del ancho de la imagen... y a esta le di un margin-top negativo con su altura...

Funciona pero no como deberia ser, ya que no lleva el flujo del texto, y si la imagen es de otras dimenciones pues no servira asi que no vale :S

Mañana sigo intentando que esta interesante ojala se de la respuesta... estoy casi 99% seguro de que es posible pero de momento 1% posible de que sepa como XD...

PD: igual y no entendi del todo... creo que si respondes a las cuestiones de kseso? quede un poco mas claro...
  #8 (permalink)  
Antiguo 23/12/2010, 07:09
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Pero sí, por supuesto. Gracias por ocuparse.

No puse condicionamientos porque no lo quiero para nada en particular, es que me pareció que no había un ejemplo hecho y quizá valga el trabajo de intentarlo.

Se me ocurre que podría ir en un sólo párrafo o div, y el esquema sería más o menos éste

Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| texto texto texto texto texto texto texto texto |
| texto texto texto texto texto texto texto texto |
| texto texto texto texto texto texto texto texto |
| este texto es continuación del:˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙: |
| anterior , sin salto de línea :    __         : |
| ni etiqueta . El ajuste de la :  <(o )___     : |
| imagen se hace como un 'float':   ( ._> /  ~~ : |
| por su ubicación al final del : ~  `---'  ~~  : |
| del párrafo (antes de </p>).  :...............: |
|_________________________________________________|
Damos por sobreentendido que el hecho de que la imagen "suba" desplazando el texto hacia la izquierda y termine alineada su base con la de la última línea, es un trabajo del navegador; tal y como lo hace con float: left (ejemplo a continuación), pero abajo.

(
Código:
<p style="width: 500px"><img style="float: left; 
width: 100px; height: 70px" alt="pato" src="pato.jpg"> 
texto con imagen arriba a la izquierda. texto ...</p>
)

El problema, que por otro lado tiene su lógica, es que la imagen termina alineada con la parte superior de la última línea de texto

Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| texto texto texto texto texto texto texto texto |
| texto texto texto texto texto texto texto texto |
| texto texto texto texto texto texto texto texto |
| texto texto texto texto texto :˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙: |
|                               :    __         : |
|                               :  <(o )___     : |
|                               :   ( ._> /  ~~ : |
|                               : ~  `---'  ~~  : |
|                               :...............: |
|_________________________________________________|
Como ya estamos tirando ideas, les comento que probé (y no me funcionó) alinear el texto abajo, para ver si lo empujaba hasta el final; pero no quise usar filtros o transform para rotar el párrafo y adentro de nuevo el texto y la imagen por separado, así la podía poner arriba, y al final que apareciera abajo (rarísimo ¿no?. Lo escribo y ya esoy dudando de que funcione).

Todo lo que encontré es "sabiendo" (o más bien "suponiendo") qué altura van a tener las últimas líneas de texto, y así se acomodan casi a mano. Y sí, hay caraduras que publican eso como una solución.

Vamos a ver cómo nos va a nosotros. Si no se puede, al menos va a quedar la inquietud para que la lean los desarrolladores. No sería la primera vez que un asunto así, publicado en este Foro, termina solucionado en la siguiente versión de algún browser.

Otra vez, gracias.
  #9 (permalink)  
Antiguo 07/01/2011, 07:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Vale aclarar que tal como lo dejé planteado el problema no tiene solución. Tiene que ser implementada por los navegadores, que todavía no lo hicieron. O ya la hubiésemos encontrado, ¿no?.

Tecnicamente no es imposible, pero es difícil asociar al efecto propiedades o atributos lo bastante flexibles y claros como para que nosotros los vayamos a usar. A menos que se haga "de una sola manera"; y es eso, o nada.

Pensaba ahora en column, que dentro de un bloque genera dos o más que forman columnas de texto llenas por desborde. En el código fuente puede ser un simple div con texto adentro, paro al darle la propiedad con 3 columnas quedaría así

Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| [‾‾‾‾‾‾‾‾‾‾‾‾‾][‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾][‾‾‾‾‾‾‾‾‾‾‾‾‾] |← DIV
| [             ][               ][             ] |
| [             ][               ][             ] |
| [     ↑       ][      ↑        ][      ↑      ] |
| [ ←COLUMNA 1→ ][  ←COLUMNA 2→  ][ ←COLUMNA 3→ ] |
| [     ↓       ][      ↓        ][      ↓      ] |
| [             ][               ][             ] |
| [             ][               ][             ] |
| [_____________][_______________][_____________] |
|_________________________________________________|
Al terminarse el espacio en la columna 1, el contenido se desborda continuando en la columna 2, y cuando ésta se llena, sigue en la columna 3. El problema para nuestro caso es que estos 3 bloques son 'virtuales', no tenemos control total sobre la posición y el tamaño, ni siquiera usando los selectores CSS (mmm... la verdad es que no lo probé).
En fin, si pudiésemos ubicar las columnas así

Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| [‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾] |
| [               ←COLUMNA 1→                   ] |
| [_____________________________________________] |
| [‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾]:˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙: |
| [                            ]:    __  COL 3  : |
| [                            ]:  <(o )___     : |
| [        ←COLUMNA 2→         ]:   ( ._> /  ~~ : |
| [                            ]: ~  `---'  ~~  : |
| [____________________________]:...............: |
|_________________________________________________|
Donde en Columna 1 empieza el texto, sigue y termina en Columna 2; y en Col 3 va sólo la imagen, entonces tendríamos resuelto el problema.

Pero no, pensemos que la columna 3 tiene ancho y alto fijos (los de la imagen), la 2 tiene alto fijo (igual que la 3) pero su ancho se ajusta al div restando la imagen, y la primera columna tiene el ancho del div, pero el alto libre, para que entre lo que no cabe en la 2. Así que el "ajuste" se hace midiendo el flujo de texto de abajo hacia arriba. Sí, demasiado raro.

Como ya se habrán dado cuenta, la distribución de bloques es algo muy fácil de hacer con HTML + CSS (que fue la propuesta inicial de loncho_rojas). Lo que es imposible es la distribución de texto, porque hay que hacerla en el navegador, no se puede 'adivinar' y meterla en el código fuente.

Lo que sí se puede hacer es crear un escript que la mida por nosotros.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJUSTA IMAGEN ABAJO DERECHA.</title>
<script>
var texto0 = "";
var texto1 = "";
var texto2 = "";
var texto3 = "";
var parr1 = [];
var fino = 0;
var cortado0 , cortado1, anchoDisp, anchoImag, anchoCol, alto1Blq1, alto0Blq1, altoI;

function ajusta() {
anchoDisp = document.getElementById("contenedor").offsetWidth;
anchoImag = document.getElementById("imag").offsetWidth;
anchoCol = (anchoDisp - anchoImag - 2);
//alert(anchoDisp +"-"+ anchoImag +"="+ anchoCol);

texto0 = document.getElementById("contenedor").innerHTML;
//alert(texto1);
texto1 = texto0.split("IMG").join("img"); //alert(texto1+ "SIN IMG");
texto2 = texto1.split("<img"); //alert(texto2);
texto1 = texto2[0]; //alert(texto1);
texto2 = "<img" + texto2[1]; //alert(texto2);
cortado0 = texto1.split(" "); //alert(cortado0);
cortado1 = cortado0;

document.getElementById("contenedor").innerHTML = "<div id='bloq1'></div> <div id='bloq2' style='width: "+(anchoCol)+"px;'></div>" + texto2;

//alert(document.getElementById("contenedor").innerHTML + "bloq2+imag");

document.getElementById("bloq2").innerHTML = cortado1.join(" ");

ajusta2();
}

function ajusta2(){
parr1 += " " + cortado1.shift(); //alert(parr1+"///"+cortado1);

document.getElementById("bloq1").innerHTML = parr1.split(" ").join(" "); 
document.getElementById("bloq2").innerHTML = cortado1.join(" ");
//alert(document.getElementById('bloq2').innerHTML + "cont bloq2")

if(fino == 0) setTimeout("ajusta3()", 200);
else setTimeout("ajusta4()", 1000);
}

function ajusta3() {
//alert("ajusta3");
var altoF = document.getElementById("bloq2").offsetHeight;
var altoI = document.getElementById("imag").offsetHeight;

//alert(altoI+"imag");
//alert(altoF+"bloq2");
if(altoI > altoF) {
fino = 1;
alto1Blq1 = document.getElementById("bloq1").offsetHeight;
}
ajusta2(); 
}

function ajusta4(){ 
//alert("ajusta4");
alto0Blq1 = document.getElementById("bloq1").offsetHeight;
altoI = document.getElementById("imag").offsetHeight;

if(alto0Blq1 == alto1Blq1) {
ajusta2(); 
}
else {//alert("no es =");
//alert(parr1+ " char antes");

parr1 = parr1.split(" ");
//alert(parr1 +" parr1 split");
//document.getElementById("contenedor").style.height = (altoI + alto0Blq1) + "px";
var palabDev0 = parr1.pop();
//alert(parr1+ "char pop");
//alert("palabDev0 = " +palabDev0);

document.getElementById("bloq1").innerHTML = parr1.join(" "); 
document.getElementById("bloq2").innerHTML = palabDev0+ " " +cortado1.join(" ");
}
}

function recarga(){
var bugIE = [email protected]_on!@*/false;
if(!bugIE) window.location = top.location;
}

onload = ajusta;
window.onresize = recarga;
</script>
<style type="text/css">
body {font-size: 100%}
#contenedor {background-color: lime; font-size: 100%; width: 60%; 
overflow: hidden; }
#imag {float: left; width:6em; height: 6em; 
display: block; margin: 0; }
#bloq2 {background-color: yellow; float: left; 
text-align: justify; margin: 0; }
#bloq1 {background-color: silver; text-align: justify; 
margin: 0; }
</style>
</head>
<body>
<h2>Flotar "bottom right".</h2>
<div id="contenedor">

uyrxcqwieucryqoweiuct1 cwqei2 cwqeoteiutc3 rwqtucyweriuc4 
qwtriu5 cvqrtuqpweoict6 qqituc7 eriqtucirt8 
qewrpoictueproiyeu9 veqrycerupoicyt10 eqycitre11 qpct12 
yc13 qeprcit14 uqerpicy15 qertcuq16 peori17 yc18 
yqeruyqeoirucqeiorur19 cyc20 yqeircuqeoiruq21 c22 
uyrxcqwieucryqoweiuct23 cwqei24 cwqeoteiutc25 
rwqtucyweriuc26 qwtriu27 qqituc28 eriqtucirt29 
qewrpoictueproiyeu30 veqrycerupoicyt31 eqycitre32 
qpct33 ycqeprcit34 uqerpicy35 qertcuq36 peori37 yc38 
yqeruyqeoirucqeiorur39 cyc40 yqeircuqeoiruq41 cuyrxc42 
qwieucryqoweiuct43 cwqei44 cwqeoteiutc45 rwqtucyweriuc46 
qwtriu47 cvqrtuqpweoict48 qqituc49 eriqtucirt50.

<img src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" id="imag">
</div>

<p style="clear: both">El texto simula un ajuste rodeando 
la imagen que queda abajo y a la derecha. <br>
La redimensión no funciona en <b>IE</b>.</p>

</body>
</html>
Este ejemplo es un borrador. Y lo que hace es
  1. Capturar el contenido del div (texto e imagen).
  2. Crear los 3 bloques : 2 vacíos (arriba, y abajo a la izquierda) y 1 con la imagen (abajo a la derecha).
  3. Colocar todo el texto en la caja de la izquierda.
  4. Pasar las palabras una a una (comenzando desde la primera) al bloque de arriba.
  5. Cuando el segundo bloque se acerca a la misma altura de la imagen, pasar las palabras al primero sólo hasta completar su última línea.
  6. Si se pasa, retroceder una palabra.

Los colores están para identificar los bloques a simple vista, y le subí los tiempos para que se puedan seguir los pasos -obviamente, los setTimeout deberían estar en 5 ó 10 milisegundos—. Además, dejé sin ocultar con visibility: hidden toda la operación, que en una versión final debería estar oculta hasta completar el proceso.
Pero la versión final no va a existir, este invento no es más que un juego, que ya había usado antes.
Tiene enormes limitaciones, como que divide un texto sin formato sólo por los espàcios, o que la función que recalcula el ajuste cuando se cambia el tamaño de la ventana no anda en IExplorer. Este navegador tiene un bug que algunos dicen que parcharon con JS, pero a mí no me quedó bien, y lo saqué. Si lo ven con IE, apreten [F5] (¡qué embromar!).

El código fuente no tiene comentarios, pero está lleno de alertas para seguir el progreso del escript; ahora están ocultos, pero si tienen una duda los habilitan.

Por último, espero que todo este trabajo les dé un sentimiento de culpa a los desarrolladores, y que en futuras versiones de navegadores pongan algún mecanismo para que el texto fluya entre capas. Así no nos hacen trabajar tanto.

Texto en dos columnas

Presentacion "por paginas"


P.D. : ¡Tipeo esto y se me ocurre de dónde viene el bug de onresize para IE! Creo que ahora sé cómo arreglarlo, pero quedará para otro tema ( que no esté en el Foro de CSS).
  #10 (permalink)  
Antiguo 08/01/2011, 07:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Hola Furoya
En primer lugar mis disculpas por el tiempo transcurrido.

Mi primera acción fue picar un poco de código para probar un par de ideas, que ya suponía a priori que fracasarían (jugar con position, márgenes contrarrestados con paddings, translate y algunas más de css 3).

Pero decidí un acercamiento teórico y he llegado a la conclusión que lo que planteas se escapa a las competencias y posibilidades de css. Espero que si estoy equivocado, haya un alma caritativa que nos alumbre :)

Mi planteamiento y porqué de mi afirmación anterior:
El navegador coloca cada elemento según va apareciendo en el html. Si hay estilos declarados los aplica.
Para modificar la distribución de los elementos sólo hay dos formas: sustraerlos del flujo (el resto de elementos se comportan como si el afectado no estuviese) o respetar el flujo y añadir alguna regla que fuerce algún movimiento manteniendo el orden de aparición.

En el "reto" que propones hay una doble modificación de posición en el eje x e y.
Para ello tenemos básicamente dos caminos:
1º:-> Si queremos mantener "la presencia y efectos" de la imagen sobre su hermano (el propio texto de /p/) sólo podríamos flotarla para llevarla a la derecha (eje x) y añadir un margen superior (eje y). Pero sabemos que el margen forma parte de la propia imagen, con lo que el texto respetará ese espacio "vacío" en la parte superior. Las letras ya no llegarán hasta el borde derecho de la imagen, así que no merece la pena el segundo paso: cómo hacer para que la parte inferior de la imagen quede alineada con la parte inferior de las palabras.

2º:-> Desplazarla sin mantener "su presencia y efectos". Esto es, sacarla del flujo (position). Rápido, eficaz. Pero... ya sabemos qué ocurre con las palabras de /p/. No "saben" de la imagen y se comportan como si no estuviese. Se sobreponen unas sobre la otra (o al verres).

¿Y qué hay de las propiedades de la versión 3 como translate y otras?
Pues nada que hacer. Porque simplemente afectan "a la visualización" del elemento. El resto de propiedades siguen ahí actuando.
Me explico: si a la imagen la flotamos a la derecha y declaramos un translate(X,Y), para las palabras sólo existe la pic a la derecha, la traslación la ignoran. Por lo tanto dejan el hueco en la parte superior derecha y se superponen allá donde se visualice la imagen.

Y todo lo anterior, para recordar que css no es un lenguaje de programación (por lo tanto no realiza cálculos y mucho menos maneja variables condicionadas a o por terceros, con alguna pequeña excepción) , sólo aplica estilos definidos a las etiquetas del html identificadas, y no es poco lo que se puede lograr con ello. Pero evidentemente hay casos y situaciones que deben manejarse y prevenirse por otros métodos.
  #11 (permalink)  
Antiguo 16/01/2011, 06:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

No hay problema con las demoras. Ya sebemos que estas cosas llevan tiempo.

Empiezo esto con un offtopic : a mi mensaje anterior le faltaba el primer párrafo. No le cambia nada, pero como al copiar y pegar se quedó en el Notepad, lo quise poner de nuevo en su sitio. Y no encuentro el botón "Editar". Ahora lo pongo acá, pero voy a preguntar qué pasa. Comenzaba así :

Cita:
O se olvidaron. O se aburrieron. O se ofendieron.


Bien, volvamos al asunto.
Me perdí un poco con tu análisis; pero al final entendí que que te referías justamente a lo que había empezado a comentar sobre las dificultades que tenemos en el código CSS para (por ejemplo) asignar valores a medir entre elementos. Aclaremos un poco, antes de que algún novato se pegue la frente contra el teclado.

No es que el CSS no mida y acomode el documento; lo hace a través de la información del navegador, pero las posibilidades que nos da de jugar con esos valores son muy cerradas. En el ejemplo que puse arriba el texto está justificado; y el estilo ubica cada línea de texto, mide el ancho disponible, pega la primer palabra de cada uno a la izquierda, la última a la derecha y distribuye equitativamente las del medio; así hasta la penúltima línea, porque la última no se justifica.

El punto es que nosotros solamente podemos meter un text-align: justify. Todos los cáculos los hacen entre el CSS y el navegador; no podemos meter (p.e.) una fórmula para que el espaciado de las palabras "del medio" esté prorrateado con un incremento logarítmico.
(Lástima, porque se vería lindo; las palabras apretadas a la izquierda que se van espaciando hacia la derecha).
Tampoco podemos decirle —ni preguntarle— donde empieza y termina cada línea, ni cuánto mide cada palabra. Pero es evidente que el navegador lo sabe.

Un caso más cercano al código que puse, es el mencionado column

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body>
<div style="-moz-column-count:3; -moz-column-gap: 1em; -webkit-column-count:3; -webkit-column-gap: 1em;">
uyrxcqwieucryqoweiuct1 cwqei2 cwqeoteiutc3 rwqtucyweriuc4 
qwtriu5 cvqrtuqpweoict6 qqituc7 eriqtucirt8 
qewrpoictueproiyeu9 veqrycerupoicyt10 eqycitre11 qpct12 
yc13 qeprcit14 uqerpicy15 qertcuq16 peori17 yc18 
yqeruyqeoirucqeiorur19 cyc20 yqeircuqeoiruq21 c22 
uyrxcqwieucryqoweiuct23 cwqei24 cwqeoteiutc25 
rwqtucyweriuc26 qwtriu27 qqituc28 eriqtucirt29 
qewrpoictueproiyeu30 veqrycerupoicyt31 eqycitre32 
qpct33 ycqeprcit34 uqerpicy35 qertcuq36 peori37 yc38 
yqeruyqeoirucqeiorur39 cyc40 yqeircuqeoiruq41 cuyrxc42 
qwieucryqoweiuct43 cwqei44 cwqeoteiutc45 rwqtucyweriuc46 
qwtriu47 cvqrtuqpweoict48 qqituc49 eriqtucirt50.
</div>
</body>
</html>
Como pueden ver, el texto está metido en un div, y así se vería en cualquier navegador. Pero en los Mozilla y Safari / Chrome el CSS crea tres bloques y distribuye el texto formando tres columnas. Él solito calcula las alturas y cuánto texto pone en cada una. Nosotros no podemos cambiar a gusto todos los tamaños y posiciones.
Las "funciones CSS" son lo más cerca que estamos de lograrlo ... pero un expression() ya es javascript. No nos engañemos.

En fin, si después de llorar porque no había columnas inventaron column, y después de quejarnos porque no teníamos eventos onDocZoom ni onTextResize aparece este supuesto "bug" de IE ... vamos a esperar un poco, porque a los desarrolladores siempre se les ocurre algo. Al menos aquí probamos que con JS se puede.
(Aunque a diferencia de CSS que es más que nada "de vista" —o "de oido"— el escript cambie todo el código presentado a lo bruto.)

https://developer.mozilla.org/es/Columnas_con_CSS-3

[edit]

Ya que estaba, "arreglé" ese asunto de la redimensión en IE.
Iba a editar el código anterior, pero como ya dije, no me dejan.
En vez de poner sólo las correcciones, dejo una copia arreglada acá

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJUSTA IMAGEN ABAJO DERECHA.</title>
<script>
var texto0 = "";
var texto1 = "";
var texto2 = "";
var texto3 = "";
var parr1 = [];
var fino = 0;
var cortado0 , cortado1, anchoDisp, anchoImag, anchoCol, alto1Blq1, alto0Blq1, altoI, altoCuerpo, anchoCuerpo;

function ajusta() {
anchoDisp = document.getElementById("contenedor").offsetWidth;
anchoImag = document.getElementById("imag").offsetWidth;
anchoCol = (anchoDisp - anchoImag - 2);
//alert(anchoDisp +"-"+ anchoImag +"="+ anchoCol);

texto0 = document.getElementById("contenedor").innerHTML;
//alert(texto1);
texto1 = texto0.split("IMG").join("img"); //alert(texto1+ "SIN IMG");
texto2 = texto1.split("<img"); //alert(texto2);
texto1 = texto2[0]; //alert(texto1);
texto2 = "<img" + texto2[1]; //alert(texto2);
cortado0 = texto1.split(" "); //alert(cortado0);
cortado1 = cortado0;

document.getElementById("contenedor").innerHTML = "<div id='bloq1'></div> <div id='bloq2' style='width: "+(anchoCol)+"px;'></div>" + texto2;

//alert(document.getElementById("contenedor").innerHTML + "bloq2+imag");

document.getElementById("bloq2").innerHTML = cortado1.join(" ");

ajusta2();
}

function ajusta2(){
parr1 += " " + cortado1.shift(); //alert(parr1+"///"+cortado1);

document.getElementById("bloq1").innerHTML = parr1.split(" ").join(" "); 
document.getElementById("bloq2").innerHTML = cortado1.join(" ");
//alert(document.getElementById('bloq2').innerHTML + "cont bloq2")

if(fino == 0) setTimeout("ajusta3()", 200);
else setTimeout("ajusta4()", 1000);
}

function ajusta3() {
//alert("ajusta3");
var altoF = document.getElementById("bloq2").offsetHeight;
var altoI = document.getElementById("imag").offsetHeight;

//alert(altoI+"imag");
//alert(altoF+"bloq2");
if(altoI > altoF) {
fino = 1;
alto1Blq1 = document.getElementById("bloq1").offsetHeight;
}
ajusta2(); 
}

function ajusta4(){ 
//alert("ajusta4");
alto0Blq1 = document.getElementById("bloq1").offsetHeight;
altoI = document.getElementById("imag").offsetHeight;

if(alto0Blq1 == alto1Blq1) {
ajusta2(); 
}
else {//alert("no es =");
//alert(parr1+ " char antes");

parr1 = parr1.split(" ");
//alert(parr1 +" parr1 split");
//document.getElementById("contenedor").style.height = (altoI + alto0Blq1) + "px";
var palabDev0 = parr1.pop();
//alert(parr1+ "char pop");
//alert("palabDev0 = " +palabDev0);

document.getElementById("bloq1").innerHTML = parr1.join(" "); 
document.getElementById("bloq2").innerHTML = palabDev0+ " " +cortado1.join(" ");
}
}

function recarga(){
window.location = top.location;
}

onload = ajusta;
window.onresize = recarga;
</script>
<style type="text/css">
body , html{font-size: 100%; height: 100%;}
#contenedor {background-color: lime; font-size: 100%; width: 60%; 
overflow: hidden; }
#imag {float: left; width:6em; height: 6em; 
display: block; margin: 0; }
#bloq2 {background-color: yellow; float: left; 
text-align: justify; margin: 0; }
#bloq1 {background-color: silver; text-align: justify; 
margin: 0; }
</style>
</head>
<body>
<h2 onresize="recarga()">Flotar "bottom right".</h2>
<div id="contenedor">

uyrxcqwieucryqoweiuct1 cwqei2 cwqeoteiutc3 rwqtucyweriuc4 
qwtriu5 cvqrtuqpweoict6 qqituc7 eriqtucirt8 
qewrpoictueproiyeu9 veqrycerupoicyt10 eqycitre11 qpct12 
yc13 qeprcit14 uqerpicy15 qertcuq16 peori17 yc18 
yqeruyqeoirucqeiorur19 cyc20 yqeircuqeoiruq21 c22 
uyrxcqwieucryqoweiuct23 cwqei24 cwqeoteiutc25 
rwqtucyweriuc26 qwtriu27 qqituc28 eriqtucirt29 
qewrpoictueproiyeu30 veqrycerupoicyt31 eqycitre32 
qpct33 ycqeprcit34 uqerpicy35 qertcuq36 peori37 yc38 
yqeruyqeoirucqeiorur39 cyc40 yqeircuqeoiruq41 cuyrxc42 
qwieucryqoweiuct43 cwqei44 cwqeoteiutc45 rwqtucyweriuc46 
qwtriu47 cvqrtuqpweoict48 qqituc49 eriqtucirt50.

<img src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" id="imag">
</div>

<p style="clear: both">El texto simula un ajuste rodeando 
la imagen que queda abajo y a la derecha. <br>
La redimensión por cambio de tama&ntilde;o de texto en <b>IE</b> usa un evento <tt>onresize</tt> en bloque con medida relativa.</p>

</body>
</html>
No sé si servirá para algo, pero a mí me molestaba que no anduviese por semejante nonada.

[/edit]

Última edición por furoya; 18/01/2011 a las 07:52 Razón: Corregir código de un mensaje anterior.
  #12 (permalink)  
Antiguo 31/05/2011, 13:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Retomando el tema con las nuevas propuestas de CSS3 para la propiedad float.

Hace unas fechas, y vía twitter, me llegó este enlace:
CSS Floats and Positioning Level 3
W3C Editor's Draft 17 May 2011

Como se ve, a los valores ya conocidos para la propiedad float se añade el valor "positioned":
Cita:
positioned
(New) The element generates a block box that is positioned using the positioning properties. Content flows around the sides of the box, starting at the content directions start position. Note that the term "positioned float", as used in this document, is open for debate, and new suggestions are welcome.
Uno de los ejemplos que ilustran la propuesta es:
Código CSS:
Ver original
  1. #figure
  2.   {
  3.     width: 100px;
  4.     height: 100px;
  5.     background-color: blue;
  6.    
  7.     float: positioned;
  8.     position: absolute;
  9.     bottom: 50px;
  10.     left: 40%;
  11.   }
Que originaría el siguiente html:


Así que para el problema planteado por Furoya quedaría resuelto con cambiar los valores de top y bottom.
Eso sí, sólo será posible si la propuesta pasa los oportunos filtros y cuando los distintos navegadores le den soporte.
  #13 (permalink)  
Antiguo 05/06/2011, 08:31
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

¡Qué bueno, gracias!

Sabía que alguien nos iba a leer.

Y esa sintaxis está muy bien pensada. No pisa otras propiedades sino que las complementa. Esperemos que la revise gente más preparada —por las dudas— y que la incorporen pronto.

(Un detalle. ¿Por qué la imagen no se ve? ¿no se supone que FDW está registrado en ImageShack?)
  #14 (permalink)  
Antiguo 05/06/2011, 09:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Como suele pasar en estos casos, creo que tardará en ser totalmente funcional.

Furoya, si no ves la imagen en el post la tienes en el enlace inicial de #12. Es de donde la obtuve.

Y sólo como curiosidad, ¿se fijaron quienes son los autores de la propuesta?
Sí, aunque parezca mentira, proviene de las filas de Micro$oft y Adobe.
  #15 (permalink)  
Antiguo 07/06/2011, 14:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Cita:
Iniciado por kseso?
¿se fijaron quienes son los autores de la propuesta?
Esteee...no había visto de donde venía. Pero tratemos de ser objetivos. Carezco de argumentos para defender a Adobe, y creo que puedo encontrar alguno para confiar en Microsoft.

Para empezar, recordemos que ellos crearon un estándar cuando a ninguno de nosotros nos importaba un estándar. Y lo hicieron bien. No es reprochable que lo hiciesen más 'práctico' que 'lógico', son posturas.
Lo que no nos gustó es que al imponerse de hecho les daba vía libre para fomentar el uso de unos códigos más 'exclusivos' que 'propietarios'. Por eso comenzó una campaña en su contra; ya todos sabíamos de sus prácticas comerciales y su trato a los clientes (ambos lamentables) y nadie iba a dejar que e hicieran de la web.

Desgraciadamente, muchos se prendieron a pegarle al IE sin entender de lo que hablaban; lo que perjudicó mucho a esa campaña por el simple silogismo de "si este idiota defiende esta campaña, entonces esta campaña debe ser idiota" (mmmm... creo que eso se llama 'entinema').

Pero no divaguemos y volvamos al punto, y es que la gente de MS es capaz de hacer una propuesta aceptable. En ésta, claramente al origen de posición top,left, right hay que agregarle bottom (que me parece que ahora no existe).
Un detalle que puede verse desprolijo es que —en principio— la caja que contiene el texto debe usar position: relative para que la de posición absoluta tome su home como referencia. Pero justamente al ser 'absoluta', quedaría independiente del contenido. Lo lógico es que termine 'delante' (o 'detrás') del texto, y no que éste lo reconozca y lo rodée. Aquí deberían aclarar en el estándar que float tiene preminencia sobre position , en cuanto al contenido inline (*).

Bueno, son cosas que se me ocurre al pensarlo un poco más; voy a mirar el enlace para ver los detalles, porque es seguro que al proponerlo ya pensaron en todo esto.

De cualquier forma, es difícil que se lo acepten. Por más que no diga progid:DXImageTransform.Microsoft , el Consortium tiene la costumbre de no reconocerle ningún código al IE.


(*) ¿Y con position: fixed qué hace? ¿Se 'desplaza' abriendo camino como un rompehielos?. Va a ser más complejo de implementar que el bottom , se me ocurre.
No hay caso, voy a juntar coraje y voy a leer la propuesta del enlace.
  #16 (permalink)  
Antiguo 19/06/2011, 08:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

No creo que al asunto original se le pueda sacar más jugo hasta que termine definitivamente resuelto por quien corresponde. Así que antes de ir al punto que me trajo de vuelta, le hago muy breves comentarios.
No estudié demasiado la propuesta, pero me asustó lo de los div con formas poligonales. Sería algo muy bienvenido, pero no estoy seguro de que se puedan hacer fuera del entorno IE. Y de esas prácticas hablamos más arriba. Hay que esperar un poco a ver qué inventan Chrome, Mozilla y Opera.
Eso de "flotar en medio" parece coherente, pero no es práctico; al menos desde la perspectiva de una diagramación de texto. Hubo algún tema donde lo pidieron; aunque yo no participé ni lo seguí después, sería un antecedente de éste. Voy a buscarlo para ver si explican por qué no nos sirve flotar una imagen en medio de un párrafo.


Ahora sí, al offtopic.
Resulta que a este tema le cayó una "Valoración Negativa". Que no es nada grave, como ya se habló en otros momentos. Lo único importante en estos casos es la justificación; si los "No Me Gusta" tienen algún sentido, es por el mensajito que dejan en el panel de novedades del ususario (los "Me Gusta" son otra historia, que también se explicó hablando del ya desaparecido "karma").
Pero estos micro-mensajes no pueden aclarar mucho, solamente deberían usarse cuando no dejen la más insignificante duda sobre su móvil. Y yendo un poco al extremo, si aparecen razones como
— No me gusta.
— Disiento.
— Puaj!.
— Qué asco.
— Jiqordq kuqerc.
habría que reportar al autor; porque es su obligación justificar, y ese remedo de tuits sólo sirve para eludir su deber.

Claro que todo esto se resuelve haciendo lo que corresponde, que es la aclaración en el mismo tema. (Si existe el riesgo de desvirtuar el debate original, se pasa a otro tema y se linkea). Fue algo que le reconocí a loncho_rojas

Cita:
Lo que te agradezco es que hayas planteado tu posición en el tema y mo hayas hecho la mariconada de usar el karma o —peor— los "No me gusta", que encima son anónimos. Porque así todos podemos ver los motivos de la diferencia.
Lo grave —y volviendo a lo nuestro— es que quien sí puso un "" no dio una explicación evidente, y al pedirle por Mensaje Privado que se explayara mejor aquí ... me mandó otro Mensaje Privado. Allí sí me aclaró un poco cuál era el párrafo en cuestión, lo que me dejó la certeza de que no entendía mucho de lo que hablaba, o al menos no lo meditó lo suficiente. Pero la cereza del postre la puso en una pregunta que me terminó de confirmar que "opinó" del tema sin leerlo hasta el fin.


Vamos a mantener la esperanza de que en algún momento se dé una vuelta por acá. Mientras tanto, me basta con aclarar que su "V-" no me generó ninguna duda en cuanto al desarrollo del debate; tiene que ver con cuestiones marginales donde —¡encima!— riega fuera del cantero.

Texto al rededor de una imagen (era ésta —creo—, pero terminó en cualquier cosa, como de costumbre ultimamente...)
  #17 (permalink)  
Antiguo 20/06/2011, 09:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: Flotar abajo a la derecha.

Hola:

Cita:
Iniciado por furoya Ver Mensaje
Resulta que a este tema le cayó una "Valoración Negativa". Que no es nada grave, como ya se habló en otros momentos.
Desde luego nunca pensé que una simple "Valoración Negativa", que no es tan grave como tu dices, te afectara tanto.

Cita:
Iniciado por furoya Ver Mensaje
Lo grave —y volviendo a lo nuestro— es que quien sí puso un "" no dio una explicación evidente, y al pedirle por Mensaje Privado que se explayara mejor aquí ... me mandó otro Mensaje Privado. Allí sí me aclaró un poco cuál era el párrafo en cuestión, lo que me dejó la certeza de que no entendía mucho de lo que hablaba, o al menos no lo meditó lo suficiente. Pero la cereza del postre la puso en una pregunta que me terminó de confirmar que "opinó" del tema sin leerlo hasta el fin.
Como ya te dije en mi MP de respuesta, la valoración fue por esta respuesta que me pareció airada y salida de tono. Y que no tiene nada que ver con el desarrollo del debate. Simplemente eso.

Cita:
Iniciado por furoya Ver Mensaje
Te sugiero que antes de apurarte a responder sigas mi consejo y lo pruebes, así no llenamos el post con "ideas" inútiles.
Cita:
Iniciado por furoya Ver Mensaje
Vamos a mantener la esperanza de que en algún momento se dé una vuelta por acá. Mientras tanto, me basta con aclarar que su "V-" no me generó ninguna duda en cuanto al desarrollo del debate; tiene que ver con cuestiones marginales donde —¡encima!— riega fuera del cantero.
Si no me he pronunciado con respecto al debate principal es porqué pensé que la solución (a menos que yo también esté espeso, como kseso?) se basa en la que el mismo propuso en el post #6.

Simplemente así:

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" dir="ltr" lang="es">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Inicio</title>
  6.         <style type="text/css">
  7.         * {
  8.             padding: 0;
  9.             margin: 0 auto;
  10.         }
  11.  
  12.         body, html {
  13.             width:100%;
  14.         }
  15.    
  16.         #contenedor {
  17.             width:1000px;
  18.             height:auto;
  19.             overflow:auto;
  20.         }
  21.  
  22.         #cuerpo {
  23.             width:100%;
  24.             height:auto;
  25.             overflow:auto;
  26.         }
  27.  
  28.         p {
  29.             font-size:12px;
  30.             text-align:justify;
  31.             text-indent:25px;
  32.             padding:20px;
  33.         }
  34.  
  35.         .imagen-r {
  36.             width:73px;
  37.             padding:5px 20px 5px 20px;
  38.             float:right;
  39.         }
  40.         </style>
  41.     </head>
  42.    
  43.     <body>
  44.         <div id="contenedor">
  45.             <div id="cuerpo">
  46.                 <h2>Inicio</h2>
  47.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  48.                 <br />
  49.                 <br />
  50.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  51.                 <br />
  52.                 <br />
  53.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  54.                 <br />
  55.                 <br />
  56.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  57.                 <br />
  58.                 <br />
  59.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  60.                 </p>
  61.                 <div class="imagen-r">
  62.                     <img src="imagenes/libro-3.jpg" alt="Portada libro 3" title="Portada Libro 3" />
  63.                 </div>
  64.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit, nisi vitae interdum eleifend, libero dui cursus orci, non fermentum mauris diam sit amet lacus. Duis et bibendum sapien. Sed at quam nulla, blandit laoreet odio. Nulla posuere, lacus aliquam condimentum condimentum, dolor metus gravida quam, eget congue lorem quam non magna. Duis magna mi, facilisis eu gravida in, accumsan eu sapien. Donec mi quam, mattis non interdum at, facilisis ut odio. Integer molestie neque vitae massa bibendum condimentum. Donec mauris massa, ornare nec convallis vel, aliquam vel tellus. Cras laoreet risus ac tellus vehicula a lobortis diam pharetra. Nunc vel est eget turpis faucibus faucibus quis in est.
  65.             </div>
  66.         </div>
  67.     </body>
  68. </html>

Por supuesto, a partir de ahora me abstendré de valorar tus opiniones tanto las negativas como las positivas (de las que no pides explicaciones, por cierto). Y, salvo cuestiones de código me abstendré también de participar en este tema. Por lo que considero que este "apartado personal" entre tu y yo queda zanjado tanto en público como en privado.

Saludos.

  #18 (permalink)  
Antiguo 26/06/2011, 07:57
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Sí, sí. Por supuesto. Aunque te esfuerzas en demostrar que tus "opiniones" y "consideraciones" no son lo que se dice "fiables". Empecemos conque este apartado personal nunca fue un asunto personal entre tú y yo. A menos que hayas usado adrede la palabra "personal" para sugerir que los reparos que enumero no son cuestiones objetivas; en cuyo caso el asunto se va a convertir en "personal", porque una cosa es hacer daño por error y otra, intencionalmente. ( )

Aunque, desde luego, hiciste bien en nunca pensar que una simple "Valoración Negativa", que no es tan grave como yo digo, me afectara tanto. Claro que debes mejorar un poco tu redacción; esa frase debió ser "Desde luego. Nunca pensé en que una Valoración Negativa —que no es tan grave, tal como dices— te pudiese llegar a afectar". Dicho de aquella forma, parece un noema, una ironía, casi una antífrasis, como si estuvieses insinuando que sí me importó ( ). Y desde luego solamente me ocupé de marcar que hubo errores gruesísimos de criterio en tus mensajes; nunca me quejé de los puntos, ni de las cucardas rojas, ni de los pulgares hacia abajo ... como dije, la Valoración Negativa es importante para saber que uno puso algo que está mal, y exige una descripción del yerro. Como la tuya no fue clara, me obligaste a revisar 2 veces todo el tema para ver donde no te pareció forma de contestar. Y resulta que también como dije, estabas regando fuera del cantero.
Honestamente, esos puntos en más o en menos me nefregan tres pitos. Y por favor, no tomen esto a mal quienes me hayan valorado otros temas previamente. Todos saben que se los agradezco porque seguro lo hacen con buena intención; lo que quiero decir es que un número más alto o más bajo en verdad no nos representa. La única manera de saber quién es quien en un foro es leer los mensajes que cada uno escribe.

Y hablando de escribir ... Me quedó algo pendiente del párrafo anterior. Si la ambigüedad que expresaste sobre la supuesta perturbación de ánimo que me produjo tu 'V-' fue sólo un problema de estilo ¿a qué viene la acotación de que en las 'V+' "no pido explicaciones, por cierto"?. No soy el único que no las pide. FdW tampoco, por eso ya se podía dar karma positivo sin justificarlo, pero no karma negativo. Si no me equivoco, también mencioné esto más arriba. Y si no, resulta que lo discutimos en su momento al implementar alguno de estos puntajes : si uno está de acuerdo, es medio absurdo repetir en un prompt lo que se detalló en el tema. ¿Qué vamos a terminar poniendo? ¿"Aplauso", "Viva", "Bravo", "Hurra"?.
Ahora, si uno disiente, no aclarar el 'por qué' raya la falta de respeto. Es indispensable exigir explicaciones.
Quiero decir, que tu comentario está bastante fuera de lugar (¿o lo habrás puesto adrede para insinuar que la mía era una cuestión subjetiva por los puntos que me quitaste?) ( )

Y haces bien en abstenerte de valorar mis opiniones. Aunque por lo general no opino; yo justifico y pruebo lo que digo. Pero igual —a veces— se me da por emitir algún juicio personal; con 10 años dando vueltas por este sitio ya todos saben cuánto (o cuán poco) valen mis asertos. No me siento obligado a explicarlos.
Aún así, al final te dejo unos enlaces, para que vayas entendiendo por qué no debemos permitir las ideas inútiles en un asunto que tratamos de resolver, aunque a ti te parezca algo airado y salido de tema. Hay que pensar un poco en los novatos, que vienen a aprender y pueden perderse alguna hora experimentando con ese disparate que puso loncho_rojas, creyendo que es una respuesta. Este buen hombre nos dejó en la obligación de aclarar que contestó cualquier cosa y suge... —perdón— "recomendarle" más que firmemente que no lo haga de nuevo.
Tampoco es nada personal, sólo sirve de ejemplo para que otros aprendan que deben leer y no postear burradas empiojando un tema.


Y hablando de...

"salvo cuestiones de código"

¿A qué viene eso de

Cita:
pensé que la solución (a menos que yo también esté espeso, como kseso?) se basa en la que el mismo propuso en el post #6.
si no hizo ninguna propuesta? Era sólo una pregunta para entender mejor mi planteo. El ejemplo que debías usar es el que puse yo ¿O me vas a decir que tampoco lo leíste? ¿O resulta que el post de kseso? te quedaba más cómodo para hacerle creer sólo los dioses saben a quién que el engendro ese que te mandaste era una respuesta a mi pregunta?
¿De verdad pensaste que no nos íbamos a dar cuenta de que tu imagen flota 'arriba a la derecha' del párrafo que tiene debajo, y no 'abajo a la derecha' del párrafo anterior?

O no sabes nada de CSS, o te piensas que somos todos idiotas, y lo hiciste adrede para empiojar el tema ( )

¿Ves lo que conseguiste? ¡Ahora me dio un brote de paranoia! ( )

Campaña "preguntas inteligentes para obtener respuestas rapidas"

Advertencia de msjs antiguos

Tomatelo con calma

Karma en Foros del Web #118
  #19 (permalink)  
Antiguo 26/06/2011, 08:12
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 5 meses
Puntos: 995
Respuesta: Flotar abajo a la derecha.

¡Haya paz! ¡Haya paz! Don jomaruro, furoya, que la calma no se pierda, que si seguís discutiendo os vais a ir a la... ¡Haya paz!

Come on, que son 2 usuarios veteranos... compórtense.
  #20 (permalink)  
Antiguo 26/06/2011, 08:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Bueno, bueno. Está bien.

Ya sabes que soy un viejo cabrón, no me pueden tomar en serio.

...

Y hacía mucho que no nos encontrábamos! Me alegra verte.

Un abrazo
furoya
  #21 (permalink)  
Antiguo 14/04/2012, 18:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

¿Dije que no era posible con css?
¡¡Pues os engañé!! xD

Al menos en ciertas situaciones/consideraciones (más de un párrafo) y con una pizca de css3 y selectores avanzados ¡eureka!

Furoya, con un poco más de tiempo para testearlo y pulirlo y te comparto los códigos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #22 (permalink)  
Antiguo 15/04/2012, 08:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Vamos con lo prometido.
A ver si con algo de suerte enderezamos el tema y dejamos atrás desviaciones o aportaciones que nada tienen que ver con lo planteado inicialmente.
Pero hay veces que es necesario algunos toques de atención para evitar, ¿cómo lo llamas, Furoya?, eso, desviaciones o ¿pavadas?.

Sigo pensando que la solucción que más situaciones puede amparar pasa por los flotados posicionados que mencioné en #12.
Lamentáblemente hoy por hoy es poco (o nada) práctica, incluso a efectos demostrativos.

Otra posible vía de solucción pasa por el uso del flexbox y sus items. Esta queda pendiente de que alguien se anime a explorarla.

Así que la siguiente propuesta pasa por algunas premisas, esto es, no es universal ni perfecta, y habrá que tener presente (o limitar) los casos donde será efectiva:
  • Más de un párrafo.
  • La relación entre contenido del último párrafo y relación del aspecto de la imagen (h/l) y cómo no, el tamaño al que queramos presentar dicha imagen.
  • El último párrafo no va a fluir por encima de la imagen en caso de ser esta menos alta que la caja generada por aquél.

En estos dos ejemplos, la imagen está posicionada abajo derecha de la caja contenedora.
Para hacerle sitio (que el texto no se sobreponga a ella) dos aproximaciones:

Ejemplo 1
limitamos el tamaño del último párrafo con p:last-child
El tamaño del último /p/ queda acotado declarando su width.

Ejemplo 2
El "tamaño" del último /p/ queda acortado utilizando el pseudoelemento ::before flotado para que ocupe el espacio de la imagen: p:last-child::before

Los peligros de estos dos ejemplos ya quedan advertidos: todo se irá de paseo si no hay relación entre tamaño imagen y tamaño de ::before o párrafo.
Creo que en ambos ejemplos se podrá jugar con los max/min en altura y anchura de los 2 elementos implicados: párrafo e imagen.

Estos dos riesgos se evitarían, creo porque no he seguido adelante, con el uso de las nuevas propiedades de css como son:
Variables CSS módulo 1 y para hacerlo más flexible combinarlo con la utilización en sus valores de la Función cal() o la propiedad box-sizing.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #23 (permalink)  
Antiguo 15/04/2012, 08:53
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 8 meses
Puntos: 317
Respuesta: Flotar abajo a la derecha.

Sí. Por el momento, la única forma es acomodar la imagen junto a un párrafo. No se puede "rodear". Lo que no se me había ocurrido hasta que vi tus ejemplos es que si cortamos un párrafo en dos bloques (y justificamos la última línea del de arriba), en vez de acomodar el texto a la imagen se puede redimensionar la imagen al texto. No estoy seguro si CSS puede hacer esas cuentas, pero es otro camino a explorar.

Nunca vi los flexbox. Después abro el enlace y me entero de qué son.
  #24 (permalink)  
Antiguo 17/04/2012, 16:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 1 mes
Puntos: 538
Respuesta: Flotar abajo a la derecha.

Ese es un campo, manejo de las cajas generadas por el texto en un párrafo /p/, donde css no ofrece casi control.
A parte de la primera letra y la primera línea, no hay propiedades para actuar sobre la Xª palabra o la Yyª letra o las 5 líneas primeras o similares.
Maneja cada una de las cajas como una sola, todo el párrafo en conjunto.

Bueno, si no llenamos todo de span, que ni por el trabajo...
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: "bottom", "down", "float", "right", abajo, derecha
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:41.