Re: [Ovillo] imagen dentro de div + alinear bottom y right

2005-11-11 Por tema mmundo
El 10/11/05, maira[EMAIL PROTECTED] escribió:
 Gracias Martin y Martí por su ayuda, sin embargo, probé todas esas
 formas, y ninguna me daba un buen resultado.

Hice la prueba en el código que tu adjuntaste y las dos técnicas funcionaron :/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] imagen dentro de div + alinear bottom y right

2005-11-11 Por tema maira
A mi tambien en el codigo que pegué, pero no cuando se encontraba dentro 
del sitio con todos los otros css.

Ahi parece que algo hacía que no anduviera.

mmundo wrote:


El 10/11/05, maira[EMAIL PROTECTED] escribió:
 


Gracias Martin y Martí por su ayuda, sin embargo, probé todas esas
formas, y ninguna me daba un buen resultado.
   



Hice la prueba en el código que tu adjuntaste y las dos técnicas funcionaron :/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

 



___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] imagen dentro de div + alinear bottom y right

2005-11-10 Por tema maira
Gracias Martin y Martí por su ayuda, sin embargo, probé todas esas 
formas, y ninguna me daba un buen resultado.
Justo leyendo otro de los post de Re: [Ovillo] Por qué usar hacks?! ví 
una solución que funciona de Iban Rodriguez, y puse esto:


div.propiedad { height: auto; min-height: 163px; _height: 100%; margin: 
0 0 10px 0; padding: 5px; background: #FFFCF4; border: 1px dotted #E3D190; }


y funcionó perfecto tanto en ie como en ff. Esta bien ponerlo asi?
Pero aún sigo con el segundo problema y no hay vuelta para encontrarle 
la solución.

Gracias nuevamente
Mai.

mmundo wrote:


El 10/11/05, maira[EMAIL PROTECTED] escribió:
 


Hola lista.

Hace unos dias que no puedo resolver esto y ya estoy empezando a enloquecer.
Abajo encontrarán el código.
Es una imagen con float: left y un texto y lista que quedan a la derecha
de la misma.
El primer problema es que el div contenedor queda mas chico que el alto
de la imagen, es decir, que su altura es la del texto.
En explorer anda bien, pero en firefox no, entonces intenté solucionarlo
con min-height y con overflow: hidden. Hay alguna solución un poco mas
linda?

   



Hola Maira,

Sobre el primer problema tienes un ejemplo casi idéntico en la propia
especificación CSS2.1
[http://www.w3.org/TR/CSS21/visuren.html#floats].

Si al párrafo le asignas la propiedad clear: left obligas a
empujarlo hacia la siguiente línea. Este comportamiento está
descrito en la propia especificación y es debido a que se mezclan
elementos que se posicionan según el flujo normal (los párrafos) y
elementos que se posicionan según el flujo flotante (la imágen).

Si no quieres poner un clear al párrafo, con el siguiente hack obligas
a Mozilla recalcular el tamaño del párrafo incluyendo la altura de la
imágen:

p:after {
   content: .; display: block; height: 0; clear: both;
visibility: hidden;
}


Un saludo,
Martí Mundó.
--
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

 



___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] imagen dentro de div + alinear bottom y right [SOLUCIONADO]

2005-11-10 Por tema maira
Lo pego aquí por si a alguien le sirve... parece que algo me iluminó y 
encontré una solución, no se si será la mejor, pero al menos funciona.
En el código de abajo se ven los cambios que basicamente fueron generar 
un div que contenga al texto mas la lista y aplicarle el 100% de altura 
para que funcione tanto en Explorer como Firefox, con el código height: 
auto; min-height: 150px; _height: 160px;. Y se le agregó un position: 
relative.
Luego, se eliminó el div que contenía a la lista, y la clase icons se 
aplicó directamente sobre el ul, al que le puse una position: absolute; 
bottom: 0px; right: 0px;


Gracias por sus colaboraciones.
Maira.

/ * codigo 
/


!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es
title.../title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
style type=text/css

div.propiedad { height: auto; min-height: 163px; _height: 100%; margin: 
0 0 10px 0; padding: 5px; background: #FFFCF4; border: 1px dotted #E3D190; }
div.propiedad img { float: left; clear: left; margin: 0 10px 0 0; 
padding: 5px; border: 1px solid #E3D190; }
div.propiedad_content { position: relative; height: auto; min-height: 
150px; _height: 160px; margin: 0; padding: 0; }

div.propiedad_content h3 { margin: 10px 0 10px 5px; padding: 0 0 2px 0px; }
ul.icons {  position: absolute; bottom: 0px; right: 0px; text-align: 
right; margin: 0; padding: 0; list-style: none; }
ul.icons li { float: left; margin: 0 0 0 15px; padding: 2px 0 0 0; 
background-repeat: no-repeat; list-style: none; background-position: 0 
50%; }
ul.icons li a { margin: 0; padding: 0 0 0 20px; /* width of icon + 
whitespace */ color: #AB7335; text-decoration: none; font-weight: normal; }
ul.icons li a:hover { margin: 0; padding: 0 0 0 20px; /* width of icon + 
whitespace */ color: #5B3E1C; text-decoration: none; font-weight: 
normal; }   
.pcamara { background: url(../images/iconcamara.gif) no-repeat top left; }

.pcontact { background: url(../images/iconcontact.gif) no-repeat top left; }

   /style
/head
body
   div class=propiedad
   img src=images/propiedades/alquileres/_1.jpg alt=Oficina 
Paladino Propiedades width=200 height=150 /

   div class=propiedad_content
   h3MAGNIFICA QUINTA/h3
   pEn barrio privado con seguridad y a metros del lago san 
roque descanse en esta magnifica quinta de 3 dormitorios, gran piscina y 
un parque excepcional. Salida al lago./p
   p$170 por día. consulte descuestos para diciembre y 
febrero./p

   ul class=icons
   liREF: 0001/li
   li class=pcamaraa href=sitio.htmlver 
fotos/a/li
   li class=pcontacta 
href=asdfias.htmlconsultar/a/li

   /ul
   /div
   /div
/body
/html


maira wrote:

Gracias Martin y Martí por su ayuda, sin embargo, probé todas esas 
formas, y ninguna me daba un buen resultado.
Justo leyendo otro de los post de Re: [Ovillo] Por qué usar hacks?! ví 
una solución que funciona de Iban Rodriguez, y puse esto:


div.propiedad { height: auto; min-height: 163px; _height: 100%; 
margin: 0 0 10px 0; padding: 5px; background: #FFFCF4; border: 1px 
dotted #E3D190; }


y funcionó perfecto tanto en ie como en ff. Esta bien ponerlo asi?
Pero aún sigo con el segundo problema y no hay vuelta para encontrarle 
la solución.

Gracias nuevamente
Mai.

mmundo wrote:


El 10/11/05, maira[EMAIL PROTECTED] escribió:
 


Hola lista.

Hace unos dias que no puedo resolver esto y ya estoy empezando a 
enloquecer.

Abajo encontrarán el código.
Es una imagen con float: left y un texto y lista que quedan a la 
derecha

de la misma.
El primer problema es que el div contenedor queda mas chico que el alto
de la imagen, es decir, que su altura es la del texto.
En explorer anda bien, pero en firefox no, entonces intenté 
solucionarlo

con min-height y con overflow: hidden. Hay alguna solución un poco mas
linda?

  



Hola Maira,

Sobre el primer problema tienes un ejemplo casi idéntico en la propia
especificación CSS2.1
[http://www.w3.org/TR/CSS21/visuren.html#floats].

Si al párrafo le asignas la propiedad clear: left obligas a
empujarlo hacia la siguiente línea. Este comportamiento está
descrito en la propia especificación y es debido a que se mezclan
elementos que se posicionan según el flujo normal (los párrafos) y
elementos que se posicionan según el flujo flotante (la imágen).

Si no quieres poner un clear al párrafo, con el siguiente hack obligas
a Mozilla recalcular el tamaño del párrafo incluyendo la altura de la
imágen:

p:after {
   content: .; display: block; height: 0; clear: both;
visibility: hidden;
}


Un saludo,
Martí Mundó.
--
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes 

Re: [Ovillo] imagen dentro de div + alinear bottom y right

2005-11-09 Por tema Martin Szyszlican
Sobre el primer problema, te diría que pruebes con un height: auto para 
el div contenedor.
O, la solucion menos elegante, que pongas un div con un clear: both al 
final de la lista, para que te estire el contenedor.


Con respecto al segundo problema estoy seguro que hay mucha gente 
dispuesta a ayudarte que sabe una solucion.


Martin.

maira wrote:


Hola lista.

Hace unos dias que no puedo resolver esto y ya estoy empezando a 
enloquecer.

Abajo encontrarán el código.
Es una imagen con float: left y un texto y lista que quedan a la 
derecha de la misma.
El primer problema es que el div contenedor queda mas chico que el 
alto de la imagen, es decir, que su altura es la del texto.
En explorer anda bien, pero en firefox no, entonces intenté 
solucionarlo con min-height y con overflow: hidden. Hay alguna 
solución un poco mas linda?


El segundo problema es que no logro posicionar la lista totalmente 
hacia abajo y a la izquierda del div principal. y eso que ya he 
probado de todo.


Cualquier ayuda será realmente agradecida.
Mai.

/** codigo 
***/ 



!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es
title.../title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
style type=text/css

div.propiedad { overflow: hidden; height: 100%; margin: 0 0 10px 0; 
padding: 5px; background: #FFFCF4; border: 1px dotted #E3D190; }
div.propiedad img { float: left; clear: left; margin: 0 10px 0 0; 
padding: 5px; border: 1px solid #E3D190; }
   .icons { position: relative; margin:0 0 0 220px; padding:0; 
border:1px solid green; }
.icons ul {  position: relative; bottom: 0px; right: 0px; text-align: 
right; margin: 10px 0 0 0; padding: 0; list-style: none; border:1px 
solid blue;}
.icons ul li { float: left; margin: 2px 0 0 15px; padding: 0; 
background-repeat: no-repeat; list-style: none; background-position: 0 
50%;  border:1px solid red;}
.icons ul li a { margin: 0; padding: 0 0 0 20px; /* width of icon + 
whitespace */ color: #AB7335; text-decoration: none; font-weight: 
normal; }
.icons ul li a:hover { margin: 0; padding: 0 0 0 20px; /* width of 
icon + whitespace */ color: #5B3E1C; text-decoration: none; 
font-weight: normal; }.pcamara { background: 
url(../images/iconcamara.gif) no-repeat top left; }
.pcontact { background: url(../images/iconcontact.gif) no-repeat top 
left; }


   /style
/head
body
   div class=propiedad
   img src=images/propiedades/alquileres/_1.jpg 
alt=Oficina Paladino Propiedades width=200 height=150 /

   h3MAGNIFICA QUINTA/h3
   pEn barrio privado con seguridad y a metros del lago san 
roque descanse en esta magnifica quinta de 3 dormitorios, gran piscina 
y un parque excepcional. Salida al lago./p

   p$170 por día. consulte descuestos para diciembre y febrero./p
   div class=icons
   ul
   liREF: 0001/li
   li class=pcamaraa href=sitio.htmlver 
fotos/a/li
   li class=pcontacta 
href=asdfias.htmlconsultar/a/li

   /ul
   /div
   /div
/body
/html
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo




--
Martin Szyszlican
www.y.net.ar







___
1GB gratis, Antivirus y Antispam
Correo Yahoo!, el mejor correo web del mundo
http://correo.yahoo.com.ar

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo