[SOLUCIONADO] Sobreponer dos imágenes para fade

[heinzy]

Hola

Tengo una duda que me trae de cabeza.

Os comento, quiero hacer un fade con una imágenes con temporizador con css.. el problema es que según lo que se, para hacerlo hace falta sobreponer dos imágenes, pero con el diseño que tengo, q cambia con la resolución de pantalla (como esta web que cogí de muestra www.bfloral.com) la posición es float: left y así se ajusta a la izquierda según va cambiando la resolución.


la pregunta es,, hay alguna forma de sobreponer dos imágenes sin usar la positón absolute o relative para hacerlo.
o como lo han hecho en la web que os pase como muestra para hacer un fade aun cambiando la resolución?
espero que lo hayáis entendido.

salu2

[pzin]

Es de suponer que la imagen esté dentro de algún contenedor, el cual tendrá una medida porcentual seguramente, o lo que sea, y las propias imágenes tendrán un max-width: 100%. No es nada del otro mundo.

[heinzy]

Hola pzin


Claro si eso esta claro, pero las imágenes salen una al lado de la otra o una debajo de otra, aunque que le ponga un contenedor... ósea que no se sobreponen una encima de la otra como es mi intención.

si no quisiera q la pagina se fuera modificando según cambia la resolución no habría problema ya q a una de las dos imágenes le pongo position relative y listo!!

pero si lo hago por ejemplo poniendo un top -500px al mover la pagina también me mueve la segunda imagen hacia arriba saliendo de su contenedor

espero no estar dando mucho el coñazo.. jeje

gracias y saludos desde mallorca ;)

[pzin]

Siempre puedes ponerle al contenedor una posición relativa y a las imágenes una posición absoluta y luego algo del tipo:

Código CSS:

top: 0;
left: 0;
 

Por lo que siempre estarán en el mismo sitio, esté como esté la resolución.

[heinzy]

Gracias pzin me funcionó

pero después de una solución siempre aparece un nuevo problema...

al poner el contenedor en relative y las fotos en absolute va bien lo que pasa que cuando cambia la resolución y el texto tiene que pasar de derecha a la parte izquierda debajo de las fotos, es como si el contenedor no existiera ya que esta en relative, entonces da igual lo que le ponga que siempre queda el texto detrás de la foto.
he probado en ponerle un contenedor entre medias pero tengo q ponerle un alto fijo y entonces cuando se hace mas pequeña la ventana del navegador se crea una separación entre foto y texto..

[heinzy]

si alguien mas me puede ayudar se lo agradecería un montón..
he probado todas las combinaciones posibles.

Pongo el codigo entero pero en realidad la parte que me afecta es donde pone cambio de resolución he puesto un código del foro color red donde empieza donde tengo el problema,,,
gracias y salud

Código CSS:

<style type="text/css">
   
   
   
   
   
   /*
    R E S E T (Por Eric Meyer)
*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {   margin: 0;  padding: 0; border: 0;  outline: 0; font-size: 100%;
                                                        vertical-align: top;    background: transparent;}
    body                                            {   line-height: 1;}
    ol, ul                                          {   }
    blockquote, q                                   {   quotes: none;}
    :focus                                          {   outline: 0;}
    ins                                             {   text-decoration: none;}
    del                                             {   text-decoration: line-through;}
    table                                           {   border-collapse: collapse;  border-spacing: 0; }
 
    a img                                           {   border:none; }
    a                                               { text-decoration: none;}
    *                                               {   -webkit-box-sizing: border-box;
                                                        -moz-box-sizing: border-box;
                                                          box-sizing: border-box; }         
            
/*
    C L A S E S   P R E S E N T A C I O N A L E S
*/
    .aligncenter            {   display:block; margin:0 auto }
    .alignleft              {   float:left; }
    .alignright             {   float: right;}
    .clear:after            {   clear:both; 
                                display:block; 
                                height:0; 
                                visibility: hidden; 
                                content: ".";}          
 
 
 
/* Estructura */
            
            
 
            #contenedor {
            
                margin: 0 auto; 
                width:80%;
 
            }
            
            header { 
                
                background-color: #F5EEFD;
                overflow: hidden;
                padding: 10px 30px 10px 30px;
                min-width: 290px;
 
            }
            
            a img { float:left; }
            
/*  contenido medio */
 
    
            #contenido-tras-cabecera {
            
                margin-top: 20px;
                min-width: 290px;
                overflow: hidden;
                border:1px black solid;
 
            }
            
            
            footer { 
            
                background-color: #F5EEFD;
                min-width: 290px;
                overflow: hidden;
                padding:30px 10px 5px 10px;
            }
            
            
[COLOR="Red"]/* --------a partir de aqui se ajusta la pagina al cambiar la resolucion --------*/
            
            @media screen and (max-width:720px) {    
            
            ul li { float: left;
                    list-style: none;
                    padding-bottom: 5px;
                    }
            
            .ajustar-nav {
                    float:left;
                    width: 140px;
                    clear: left;
                    
                }                   
            
            
            
            img .imagen-inicio{ 
                    
                position: absolute; 
                width: 95%;
 
            }
            
            
            img .imagen-inicio2{ 
                position: absolute
                width: 95%;
 
            }
            
            img .imagen-inicio3{ 
                position:absoute
                width: 95%;
 
            }
            
            img .imagen-inicio4{ 
                position: absolute
                width: %;
 
            }
            
            
            
            div #cf {
                position: relative;
                width: 100%;
                border: solid 5px black;
            
            
            
                
            }   
            
            .interior-derecho-inicio {
            
            
            clear:both;
            width: 100%;
            
            
            
            
            }
            
            
            [/COLOR]
            
            
            
            .derechos-reservados {
                    float: left; 
                    max-width:220px;
                    padding-left: 18px;
                    
                }       
            
            .imagen-footer-logo {
            
                    width:100%;
                    max-width: 200px;
                    float: left;
                    display: block;
                    margin-right: 80px;
                    padding-bottom: 5px;
                    padding-left: 22px;
            }
                    
            
        
                p.floristeria {
                color:#2DC800;
                font-size: 2.2em;
                float: left;
                clear: both;
            } } 
            
/* ---------aqui acaba el ajuste de media -----------------*/
 
 
 
/* menu de navegacion */            
            
            ul {
                width: 520px;
                margin-top: 10px;
                font-family: arial;
                font-size: 1.0em;
                float:right;
                clear: right;
 
            }
            
            li {
                
                display: inline;
                list-style: square;
                list-style-position: inside; 
            }
            
            
            li:before { 
            
                 content: url("imagenes/circulo.png");
            }
            
            
 
 
/* Tipografia y colores */
            
            
            
            
            h1 {    
 
                font-size: 1.2em; 
                padding-left: 10px; 
                line-height: 22px;
                margin-top: -20px;
                display: block;
                color: #555555;
                font-family: arial, helvetica sans-serif;
                font-weight: 700;
            }
            
            
            article a {
                color: #6633cc;
                
            }
            
            a:hover {
                color: #FF9999;
                }
            
            
            h2 {
                font-size: 1.0em;
                font-family: arial, helvetica sans-serif;
                padding-left: 10px; 
                
                
                }
            .floristeria {
            
                color:#2DC800;
                font-size: 2.2em;
                float: right;
                padding-right: 10px;
                padding-top: 10px;
            }
                
            
            P.texto-inicio {  
                font-size: 0.9em;
                padding: 10px;
                line-height: 22px;
                font-family: arial, helvetica sans-serif;
                color: #555555;
                
            }
            
            
        
            
        
            
 
            
            
 
/* parte media */           
            
            
 
            .caja-inicio {
            
                width:90%;
                padding: 25px;
                margin-top: 25px;
                margin-left: 10px;
                box-shadow: 1px 1px 5px rgba(0,0,0,.8)
            
            
            }
            
            
            article {
            float: right;
            width: 50%;
            margin-right: 5px;
            margin-bottom: 40px;
            }
            
            
            .imagen-inicio{ 
                    
            position: absolute;
            width: 100%;
                
                
            }
    
            .imagen-inicio2{ 
            position: absolute; 
            width: 100%;
            
            }
            .imagen-inicio3{ 
            
            
            position: absolute;
            width: 100%;
                
                
            }
            
            .imagen-inicio4{ 
                    
            position: absolute; 
            width: 100%;
                
                
            }
            
        
 
/* footer */
 
            .imagen-footer-logo {
            
                    width:100%;
                    max-width: 200px;
                    float: left;
                    display: block;
                    margin-right: 50px;
                
            }
            
            .imagen-footer-face {
                    
                    float: right;
                    display: block;
                    padding-top: 5px;
                    
                    clear: left;
                
            }
            
            cite {
                    text-align: center; 
                    margin: 0 auto;
                    max-width:600px;
                    color: #555555;
                    padding-top: 10px;
                    padding-left: 20px;
                    clear:right;
            
                }   
                
            .cajavacia {
                
                height:50px;
                    
                }   
    
</style>
 

Código HTML:

<body>
    
    <div id="contenedor">
    <header>
        <a href="http://www.flowerpower.es"> <img src="imagenes/logo2.png" alt="imagen" /> </a>
            <p class="floristeria">FLORISTERIA <br> 
             <span style=" font-size: 0.4em; color:#2DC800;">DISEÑO Y ARTE FLORAL
             </span>
            </p>
            <nav>
            <ul class="ajustar-nav">
                <li><a href="http://www.flowerpower.es">Inicio</a></li>
                <li><a href="http://www.flowerpower.es">Quienes Somos</a></li>
                <li><a href="http://www.flowerpower.es">Servicios</a></li>
                <li><a href="http://www.flowerpower.es">Trabajos</a></li>
                <li><a href="http://www.flowerpower.es">Noticias</a></li>
                <li><a href="http://www.flowerpower.es">Contacto</a></li>
            </ul>
            </nav>
    </header>
[COLOR="red"]
     <div id="contenido-tras-cabecera">
    
        <div id="cf">
        
        <img class="imagen-inicio" src="imagenes/ramo3.jpg" />  
        <img class="imagen-inicio2" src="imagenes/ramo2.jpg" />
        <img class="imagen-inicio3" src="imagenes/ramo4.jpg" /> 
        <img class="imagen-inicio4" src="imagenes/ramo1.jpg" />
        
        </div>
            <article class="interior-derecho-inicio">
            
            <h1> </br>  </br>Bienvenidos a la web de Floristeria Flower Power </h1>
                
                
              <p class="texto-inicio"> 
                    
                    </br>
                            Desde 1995 nos dedicamos a prestar un esmerado servicio de floristería en general. 
                    </br>
                    </br>
                            Le atenderemos como usted se merece, por profesionales debidamente cualificados y diplomados, 
                            con una amplia experiencia en el sector. Nosotros somos una floristería con comprobada y larga trayectoria, 
                            siempre a la vanguardia en los aspectos más novedosos y modernos, nos preocupamos día a día a contribuir al 
                            logro de sus deseos, ofreciendo un buen servicio, a un costo razonable y a una calidad insuperable.  
                            Esperamos que tu visita sirva para que conozcas mejor nuestra Floristería.
                    </br></br>
                            <a href="http://www.elpais.es"> Pinche aqui para saber mas sobre nuestros servicios -> </a>
                </p>
                <aside>
                    <div class="caja-inicio">
                        <p class="texto-inicio">Próximo <a href="http://www.elpais.es">Evento. </a></p>
                            <a href=""><h2>Dia de la Madre 2014</h2></a> 
                                <p class="texto-inicio">No olvides de apuntar el dia 4 de mayo en tu calendario
                                    es el dia de la Madre.
                                </p>
                    </div>
                </aside>
             </article>[/COLOR]
             
     </div>
            
     
  <footer>
        
        
        <a href="http://www.flowerpower.es"> <img class="imagen-footer-logo" src="imagenes/logo.png" alt="imagen" /> </a>
        <div class="cajavacia">
        
        </div>
        <cite  class="derechos-reservados"> All content ©2014 Flower Power | Todos los derechos reservados 
                                    Web por IZ@N 
        </cite>
        
        <a href="http://www.flowerpower.es"> <img class="imagen-footer-face" src="imagenes/logo-facebook.png" alt="imagen" /> </a>
 </footer>
 
  </div> <!-- cierre de div container -->
 

[pzin]

Lo de la posición relativa era para el elemento contenedor de las imágenes, es decir, div#cf, no sé a dónde se lo aplicaste, pero obviamente donde sea está mal.

[heinzy]

hola pzin!

menos mal q estas tu por aquí por que nadie mas me ayuda...

mira si te fijas en el código que te he pasado en css el contenedor div #cf esta puesto dos veces una para una resolución y otra para otra.. en la primera resolución funciona pero en la otra no ya que el texto pasa por encima como si el div no existiese pero si a ese div le pongo un height por ejemplo 500 px si lo que pasa q al ser flexible con % no me va bien..

porfavor echale un vistazo al codigo..

creo que no se puede.. ya que me estoy volviendo loco..

[pzin]

Ahora que me fijo, tienes muchos errores en el código.

</br> no existe, en todo caso sería <br> o en HTML5, que acepta también la forma de XHTML, puede ser <br/>.

Tienes cosa como:

Código CSS:

position:absoute
width: 95%;
 

Que si te fijas, será leído como:

Código CSS:

position:absoute width: 95%;
 

Es decir, que se ignorará.

O los selectores de CSS, donde muchas veces metes un espacio:

Código CSS:

img .imagen-inicio4
 

Y no es lo mismo ni selecciona el mismo elemento que:

Código CSS:

img.imagen-inicio4
 

Deberías darle un repaso a todo, seguramente existan más errores, y con tanto error pues se volverá bastante complicado que apliques nada y funcione como esperas que funcione.

[heinzy]

Tienes razón que había unos fallos...

en el primero absolute era que al cambiarlos tantas veces antes de meter el código aquí se me había pasado ponerlo bien..

en lo de la los espacios pues solo estaba puesto en el img de las fotos pero bueno hacia referencia a clase imagen-inicio dentro de img en este caso daba igual si lo ponía junto o separado ya que no había clases entre medias..

aun cambiando estos fallos ya no veo ninguno mas y sigue sin funcionar.. no será que un contenedor en position relative no afecta a los elementos de su alrededor y por eso se sobrepone el texto o cualquier div de alrededor??

[pzin]

Iniciado por heinzy

en lo de la los espacios pues solo estaba puesto en el img de las fotos pero bueno hacia referencia a clase imagen-inicio dentro de img en este caso daba igual si lo ponía junto o separado ya que no había clases entre medias..

No da igual. Realmente es un selector imposible, ya que seleccionas un elemento cuya clase sea imagen-inicio4 y que esté contenido de un elemento img, y las imágenes no pueden contenedor otros elementos. Entonces esos estilos no se aplican a nada.

Iniciado por heinzy

aun cambiando estos fallos ya no veo ninguno mas y sigue sin funcionar.. no será que un contenedor en position relative no afecta a los elementos de su alrededor y por eso se sobrepone el texto o cualquier div de alrededor??

El problema es que div#cf no tiene ninguna posición relativa, y aún teniéndola, no afecta para nada a los elementos de alrededor. No obstante, el problema es que no está puesto bien en su lugar, ya que ocupa todo el ancho, y como las imágenes tienen una posición absoluta pues se quedan por encima. Entonces tendrás que indicar que ese contenedor mida lo que tenga que medir:

Código CSS:

div#cf {
  position: relative;
  width: 50%;
}
 

No hace falta ni flotarlo porque ya tienes flotado article hacia la derecha.

No obstante intenta corregir los demás fallos porque eso al final te va a acabar dando problemas y luego será culpa de los navegadores y andamos buscando CSS hacks.

[heinzy]

lo que pasa que si al contenedor le pongo un ancho fijo ya no es flexible a los cambios de resolución. se queda fijo...


al principio va bien, es cuando cambia de resolución cuando da el fallo ósea que el texto se sobrepone a partir de este código:

Código CSS:

img.imagen-inicio{ 
                    
                position: absolute; 
                width: 95%;
        
            }
            
            
            img.imagen-inicio2{ 
                position: absolute;
                width: 95%;
            
            }
            
            img.imagen-inicio3{ 
                position:absolute;
                width: 95%;
            
            }
            
            img.imagen-inicio4{ 
                position: absolute;
                width:95%;
                
            }
            
            
            
            div#cf {
                position: relative;
                width: 100%;
                border: solid 5px black;
            
            
                
            }   
            
            .interior-derecho-inicio {
            
            width: 100%;
            clear: both;
            float:left;
            
            }
 

si le pongo otro porcentaje ocupa solo la mitad..

antes cuando lo tenia con una foto solamente si me funcionaba te paso el código para que lo veas:

Código CSS:

img.imagen-inicio{ 
                    
                    float:left; 
                    width: 100%;
                    max-width:500px;
                    display: block;
            }
    
            
            
            
            .interior-derecho-inicio {
            
            width: 100%;
            float: left;
            clear: both ;
            
            }
 

es ahora cuando me da problemas..

[pzin]

Un 50% no es un "ancho fijo".

De todas formas, si luego quieres cambiar el comportamiento, ¿cuál es el problema? Supongo que en resoluciones pequeñas no querrás tener las imágenes y el texto uno al lado de otro, entonces ya le cambias el ancho a ambos, anulas float y especificas alturas si hace falta.

Si no haces eso, obviamente se pondrá por encima de algo, porque no queda espacio. Pero si no fueran posiciones absolutas, se descuadraría de alguna otra forma, entonces tendrás que pensar qué es lo que quieres que ocurra en resoluciones pequeñas.

[heinzy]

pero si le pongo un ancho de 50% la foto solo ocupa un 50% del contenedor y el texto sigue solapandose detrás de la imagen.

no, al lado del otro no. si no, el texto debajo de la foto. si especifico alturas quedan muchos espacios sin nada..

mira esta pagina http://www.bfloral.com/ es eso exactamente lo que quiero hacer,
si haces la ventana mas pequeña veras q es lo que quiero decir..

[pzin]

Yo es que viendo esa web te tiene que servir lo que te he dicho. ¿No tienes la tuya en algún sitio subido?

De todas formas, en esa web usan JavaScript, no sólo CSS.

[heinzy]

si quieres pasame tu email por privado y te paso el archivo en una carpeta compartida por dropbox.

puede ser que sea con javscript o con caja flexibles css3.. porque si no.. no se lo que puede ser... ya que creo haberlo probado todo..

[heinzy]

bueno veo que nadie a sido capaz de averiguar porque me pasa esto..

tendre que buscarme la vida...

si encuentro la solución ya os la pasare..

salu2

[heinzy]

Hola después de tres días comiéndome el coco..

Lo he conseguido!!!

la solución era usando cajas flexibles. usando la función display: -webkit-flex

luego a cada foto poniéndola en relative no en absolute! y juntandolas con porcentajes negativos..

ufff me a costado pero lo he conseguido

os paso el código por si a alguien lo encuentra útil.

Código CSS:

#cf img.imagen-inicio { 
                
                position: relative;
            }
    
            #cf img.imagen-inicio2 { 
                
                position: relative;
                left: -25%;
            }
            
            #cf img.imagen-inicio3 { 
                
                position: relative;
                left: -50%;
            }
            
            #cf img.imagen-inicio4 { 
                    
            position: relative;
            left: -75%;
            
            }
            
            div#cf {
                
                min-width: 350%;
                display: -webkit-flex;
            }   
            
    
            
            .interior-derecho-inicio {
                
                clear: both;
                width: 100%;
            }
 

saludos y gracias pzin por la ayuda.