Buenos días, Abigail: Antes de nada.. ¿¿Cómo te da por irte a Reikiavik?? Con el frío que allí debe de hacer.. ;)
Bueno, viendo el código del sitio tuyo, veo que tienes: <div id="office"> <img width="250" height="70" alt="logotipo" src="images/office_up.gif"/> <img width="250" height="333" alt="dibujo que simula una pequeña oficina" src="images/office_dwn.gif"/> </div> Con el div con id office, metes la imagen para "completar" las líneas de las lámparas (las bolas rojas); yo, particularmente, metería toda la imagen de la oficina, como fondo del div; veo dos opciones; una, meter otro div anidado, para meter la imagen de la oficina (office_dwn.gif) alineada a la izquierda y abajo; y la otra, hacer una imagen nueva, que tenga más alto del necesario, digamos que se alargue pues hasta los 1.500 px, y alinearla a la izquierda y abajo. La primera opción, habrá muchos en la lista que me "acusarán" de "divitis", pues evidentemente es u div que no aporta ningún significado semántico; sin embargo, hay muchas veces que para conseguir ciertos efectos gráficos, no queda más remedio que utilizar divs.. Con lo cual, pues es un mal menor, en mi opinión (y sigue siendo código totalmente válido y accesible). La segunda opción, tiene la contra de que utilizarás una imagen más pesada de lo que necesitas. Si no sabes cómo aplicar lo que te digo, coméntamelo y pongo código :) Espero haberte sido de ayuda. Un saludo > -----Mensaje original----- > De: [EMAIL PROTECTED] [mailto:ovillo- > [EMAIL PROTECTED] En nombre de Abigail Rodríguez > Enviado el: jueves, 24 de enero de 2008 20:22 > Para: Ovillo, la lista de CSS en castellano > Asunto: Re: [Ovillo] Alinear verticalmente una imagen con CSS > > Hola: > > Podéis ver el caso en mi Web: www.abbyrodd.comLo que intentaba hacer es > que cuando el texto de una sección es extenso, el dibujo de la > izquierda se "alargara" automáticamente. Por ejemplo, la sección "Cómo > trabajo". > Ahora he colocado párrafos vacíos entre la imagen superior que contiene > el logo y la inferior con la mesa de trabajo, para alcanzar la altura > deseada. Pero esto no me parece una buena solución. > > Gracias por vuestros comentarios. > Saludos. > > > > > Date: Wed, 23 Jan 2008 23:04:27 -0300> From: [EMAIL PROTECTED]> > To: [email protected]> Subject: Re: [Ovillo] Alinear > verticalmente una imagen con CSS> > Un ejemplo ?> > 2008/1/23 Hari > Seldon <[EMAIL PROTECTED]>:> > > Sería más fácil si nos > pusieses el ejemplo en línea; así veríamos el> > código> > y esas > cosas...> >> > Si no quieres poner el ejemplo tal cuál es, un prototipo > valdría> >> > O bien usa pastebin para poner el código :)> >> > > Saludos> >> > > -----Mensaje original-----> > > De: ovillo- > [EMAIL PROTECTED] [mailto:ovillo-> > > [EMAIL PROTECTED] > En nombre de Abigail Rodríguez> > > Enviado el: miércoles, 23 de enero > de 2008 23:58> > > Para: Ovillo, la lista de CSS en castellano> > > > Asunto: Re: [Ovillo] Alinear verticalmente una imagen con CSS> > >> > > > El alto de la capa es variable, se ajusta al alto de otra capa> > > > adyacente que tiene los contenidos.> > > La imagen de fondo sólo está > para verse cuando la capa se "alargue"...> > >> > >> > >> > > > Date: > Wed, 23 Jan 2008 23:38:57 +0100> From: [EMAIL PROTECTED]>> > > > To: [email protected]> Subject: Re: [Ovillo] Alinear> > > > verticalmente una imagen con CSS> > #estilo-abigail {padding:0 10px 0> > > > 10px;}> #estilo-abigail { background:#FFF> url(/ruta-nombre-imagen- > de-> > > fondo.jpg)no-repeat bottom left;> border-top:3px solid #666; > border-> > > bottom:3px solid> #666; padding:1px 0 10px 0;}> img > {border:1px solid> > > #ccc; background:#fff; padding:3px; > float:right;> margin:0 0 (aqui pon> > > la altura de la imagen de > fondo)px 0;}> > > <!--Estilo abigail-->> <div> > > id="estilo- > abigail">> <img src="">la imagen aki> </div>> <!--/Estilo> > > abigail- > ->> > Pienso.... si en la capa sólo tienes una imagen la altura> > > de > la capa vendrá> determinada por la altura de la imagen, con lo cual> > > > la imagen de fondo> quedara tapada por la imagen que pones en primer> > > > plano.> > Debes darle un margen al estilo de la imagen igual al la> > > > altura de la imagen> de fondo (ya lo hice yo tu cambia el tamaño > del> > > margen...) el resto> personalizalo a tu gusto> > > > El día > 23/01/08,> > > Abigail Rodríguez <[EMAIL PROTECTED]> escribió:> >> > > Hola:> >> > > Gracias por responder, pero no se ajusta a mi caso... > Quizá no me he> >> > > explicado bien:> > Se trata de una capa con un > alto variable y con un> > > fondo que se repite.> > Dentro de la capa > no hay texto, sólo tengo> > > insertada una imagen y a> > continuación > otra, que quiero que se> > > mantenga alineada a "bottom".> > No sé si > es posible.> >> >> > Gracias> > > de todas formas.> > Saludos.> >> >> > > P.D: en Islandia no tanto frío> > > como podría pensarse, y los mismos> > > quebraderos de cabeza con CSS y> > > toda esta historia ;-)> >> >> >> > > > Date: Wed, 23 Jan 2008 22:31:34> > > +0100> From: > [EMAIL PROTECTED]>> > To: [email protected]>> > > Subject: > Re: [Ovillo] Alinear verticalmente> > una imagen con CSS> >> > > > #estilo-abigail {padding:0 10px 0 10px;}>> > #estilo-abigail {> > > > background:#E3E8C9 url(/nombreimagen.jpg) no-repeat> > bottom> left;> > > > border-top:3px solid #666; border-bottom:3px solid #666;> > > padding:1px> > > 0> 10px 0;}> > #estilo-abigail h2 {font-size:3.3em;}>> > > #estilo-> > > abigail h4 {padding-top:10px;}> #estilo-abigail p > {font-size:1.2em;> >> > > color:#333;}> img {border:1px solid #ccc; > background:#fff;> > > padding:3px;> > float:right;> margin:0 0 10px > 15px;}> > > <!--Estilo> > > abigail-->> <div> > id="estilo-abigail">> > si pones aqui la imagen> > > estará arriba> <h4>texto</h4>>> > > <h2>texto</h2>> texto> <p>texto</p>>> > > </div>> <!--/Estilo abigail-- > >> > >> > DEBERIA FUNCIONAR ¿K TAL EN> > > ISLANDIA¡¡¡¡¡ ME GUSTA EL > FREELANCEO> > El día> > 23/01/08, Abigail> > > Rodríguez > <[EMAIL PROTECTED]> escribió:> >> >> > Saludos a todos:> > > Aunque > leo la lista desde hace un mes o así, es la> >> > primera vez> > > que > intervengo. Me llamo Abby, soy diseñadora freelance, de> >> >> > > > Madrid, aunque ahora estoy en Islandia unos meses. Bueno, voy al > grano:> > > Mi>> > > problema es que no consigo que una imagen se > alinee> > > verticalmente en la> >> > parte inferior de la capa que la > contiene.> > > Debería ser algo muy sencillo,> >> > pero...> >> > Más > concretamente:> > > tengo una capa cuyo alto es variable (en> > función > del> > alto de otra> > > capa adyacente) y que contiene sólo dos> > > imágenes, una arriba y> >> > > otra que quiero que se vaya abajo > siempre, sea> > cual sea el alto de> > > la capa> > contenedora. La > capa además tiene una imagen> > de fondo que> > > se repite.> > > ¿Alguien sabe cómo puede hacerse esto? Llevo> > tiempo> > > con ello, > mirando en> > foros, documentación, etc. pero no consigo> >> > > > solucionarlo.> > Gracias de antemano.> >> >> > > > _________________________________________________________________> >> > > > MSN> > Video.> > http://video.msn.com/?mkt=es-es> >> >> > > > _______________________________________________> > Lista de> > > > distribución> > Ovillo> > Para escribir a la lista, envia un correo a>> > > > > [email protected]> > Puedes modificar tus datos o > desuscribirte> > > en> > la siguiente dirección:> >> > > > http://lists.ovillo.org/mailman/listinfo/ovillo>> > >>> > > > _______________________________________________> Lista de > distribución>> > > > Ovillo> Para escribir a la lista, envia un correo > a> >> > > [email protected]> Puedes modificar tus datos o > desuscribirte en> > > la> > siguiente dirección:> > > > http://lists.ovillo.org/mailman/listinfo/ovillo> >> > > > _________________________________________________________________> >> > > > MSN Noticias> > http://noticias.msn.es/comunidad.aspx> >> > > > _______________________________________________> > Lista de> > > > distribución Ovillo> > Para escribir a la lista, envia un correo a> > > > [email protected]> > Puedes modificar tus datos o desuscribirte> > > > en la siguiente dirección:> >> > > > http://lists.ovillo.org/mailman/listinfo/ovillo> >>> > > > _______________________________________________> Lista de distribución> > > > Ovillo> Para escribir a la lista, envia un correo a> > > > [email protected]> Puedes modificar tus datos o desuscribirte en> > > > la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo> > > > _________________________________________________________________> > > > La vida de los famosos al desnudo en MSN Entretenimiento> > > > http://entretenimiento.es.msn.com/> > > > _______________________________________________> > > Lista de > distribución Ovillo> > > Para escribir a la lista, envia un correo a > [email protected]> > > Puedes modificar tus datos o desuscribirte > en la siguiente dirección:> > > > http://lists.ovillo.org/mailman/listinfo/ovillo> >> > > _______________________________________________> > Lista de > distribución Ovillo> > Para escribir a la lista, envia un correo a > [email protected]> > Puedes modificar tus datos o desuscribirte > en la siguiente dirección:> > > http://lists.ovillo.org/mailman/listinfo/ovillo> >> > _______________________________________________> Lista de distribución > Ovillo> Para escribir a la lista, envia un correo a > [email protected]> Puedes modificar tus datos o desuscribirte en > la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo > _________________________________________________________________ > La vida de los famosos al desnudo en MSN Entretenimiento > http://entretenimiento.es.msn.com/ > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
