a ver... si no te entendi mal ... lo que dberias hacer es contenedor que
contenga otros dos subcontenedores el de la izquierda con la mesa y e logo y
otro con el texto.En el primer subcontenedor la imagen que queres agrandar
de fondo (la lineas que continuen a los bombillas de la imagen de la mesa)
en un div con altura (quiza minima) en porcentaje que queres y la imagen del
logo. y un segundo div con la imagen de la mesa COMO FONDO, este alineado
abajo y sin repetir.
Hasta aca ( si entendes) yo bien... pero ha un problema con la altura de los
div. para solucionar eso hay que agregar en el CSS esta linea: html, body {
height:100%;}.
Obvie algunas muhcas cosas, pero espero que lo interpretes bien.
Es un poco complicado no?, te pongo el CSS y HTML que hice yo :
CSS:
html, body
{ height: 100% }
#sincuchillo {
height:100%;
width:100%;
background-color:#eaeaea;
}
#mesaylogo {
float:left;
margin-right:10px;
height:100%;
width:38%;
background-color: #FFF;
}
#logo {
width:100%;
height:50%;
background-image: url(tuimagen.jpg); /*Aca una imagen con los "cables de
las bombillas"*/
background-position:bottom center;
background-repeat: no-repeat;
background-color:#fad5d5;
}
#mesa {
vertical-align:text-bottom;
width:100%;
height:50%;
background-image: url(tuimagen.jpg); /*Aca la imagen de la mesa que
continua los cables*/
background-position:bottom center;
background-repeat: no-repeat;
background-color:#f8a0a0;
}
#texto{
height:100%;
width:60%;
background-color:#FFF;
}
HTML
<div id=sincuchillo>
<div id="mesaylogo">
<div id="logo">Logo</div>
<div id="mesa">Mesa</div>
</div>
<div id=texto>
Aca todo el texto que quieras que quieras<br>
</div>
</div>
2008/1/24 Abigail Rodríguez <[EMAIL PROTECTED]>:
> 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: [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
