Jump to content
aixa

Imágenes responsive en "article".

Recommended Posts

Explico mi problema con la esperanza, y la seguridad, de que alguien pueda echarme una mano: estoy absolutamente bloqueada con algo que probablemente sea muy obvio, pero que no consigo resolver.

 

El caso es que quiero comenzar una web con dos "article" responsive que irían tras el "header", conteniendo cada uno de ellos una imagen de fondo, y contenido diverso: enlaces, texto, etc. El problema surge cuando al llegar al navegador, este solo me muestra el primero de los artículos, que sí es responsive y se ve muy bien, pero el segundo desaparece...

 

Os pongo a continuación tanto el HTML como el CSS para que por favor, alguien me indique en donde está el error que estoy cometiendo:

 

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="css/style.css">
</head>

<body>
    <article class="sup">
       
           <div id="barranav">
            <a href="http://www.linkficticio.com" target="blank">Sitio Ficticio</a>            
            </div>
            
           <div class="texto">
               <h1>Artículo Superior</h1> 
               <h3>Prueba de implementación de imágenes en "article".</h3>
           </div> 
            
   	</article> 
   
   	<article class="inf">
   
           <div id="barranav">
            <a href="http://www.linkficiticio.com" target="blank">Sitio Ficticio</a>
           </div>
           
           <div class="texto">
               <h1>Artículo Segundo</h1> 
               <h3>Prueba de implementación de imágenes en "article".</h3>
           </div> 
            
   	</article>   
</body>
</html>

 

CSS

@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

html,body {
color:white;
 font-family:'Opens Sans',helvetica;  
 height:100%;
 width:100%;
 margin: 0px;
}

#barranav {
padding: 10px 0px 10px 0px;
   background: rgba(0,0,0,0.3);
color: #00bdff;
width: 100%;
 text-align:center;
font-size:1.3em; 
}

#barranav a {
padding: 10px;
border:none;
   color: white;
color: #00bdff;
text-decoration: none;
   
}

.sup {
   background: url(http://i86.servimg.com/u/f86/12/12/27/73/superi10.gif) no-repeat fixed top;
   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;
   height: 100%;
   width: 100% ;
   text-align: center;
}

.inf {
   background: url(http://i86.servimg.com/u/f86/12/12/27/73/inferi10.gif) no-repeat fixed;
   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;
   height: 100%;
   width: 100% ;
   text-align: center;
}

h1 {
color: #FFEC01;
font-weight: lighter;
font-size: 3rem;
}

h3 {
color: #FFEC01;
font-weight: lighter;
}	


.texto {
margin: 30px 0px 30px 0px;	
padding: 10px;
background: rgba(255,255,255,0.5);
display: inline-block;
}

 

Con mi agradecimiento anticipado, espero vuestras respuestas.

 

Un saludo

Share this post


Link to post
Share on other sites

Hola aixa:

 

Yo si veo los dos "article" al hacer scroll, pero con un comportamiento algo extraño.

 

Por otro lado veo un par de cosillas:

 

1ª.- Tienes el id #barranav duplicado. Esto puede causar errores. Conviertelo en clase o renombra uno de ellos y crea su css.

 

2ª.- Tienes el background de las clases sup e inf con el atributo fixed en vez del habitual scroll. ¿Quieres que sea así? Esto influye en el comportamiento de las imagenes y supongo que es cosa tuya.

 

Pero te reitero que yo si veo el segundo "article" al hacer scroll. :o

 

Ya nos dirás algo.

 

mon

Share this post


Link to post
Share on other sites

Muchas gracias UHF por tu respuesta.

En efecto sí había una duplicidad del id #barranav que ya he renombrado. Y haciendo caso a tu sugerencia, he sustituido el atributo fixed por scroll y creo que sí ha mejorado levemente, pero no obstante, sigo teniendo el problema de que existe una separación entre los dos article que no se como eliminar ni se por que se origina. Si controlase eso, ya estaría resuelto.

No se si habría un modo mejor de hacerlo, pero yo he hecho mil intentos y no acabo de dar con la solución adecuada. En definitiva, lo que busco, son dos DIVs full-width de comportamiento fluido a los que aplicar un background. Posteriormente aplicaría las media querie para tener un resultado responsive, pero creo que esto ya no sería ningún problema.

 

Dicho así, suena muy fácil, pero yo no consigo el resultado que busco. Muchas gracias por tu colaboración, y un saludo!!!

Edited by aixa

Share this post


Link to post
Share on other sites

Hola de nuevo!

 

Dicho así, suena muy fácil, pero yo no consigo el resultado que busco.

 

Es difícil saber el resultado que buscas y por tanto dar con una solución precisa. Pero vamos a intentarlo.

 

La propiedad contain que tienen las imágenes de fondo es un poco rara para manejarla. Yo probaría con cover aunque esta también tiene lo suyo. Te eliminaría la separación entre los dos article pero te recortaría la imagen algo dependiendo del viewport o formato de la ventana visible.

 

Estas dos propiedades de background están bien para imágenes de fondo, difusas, abstractas, no muy geomérticas en las que no te importa que se pierda algo dependiendo del formato del contenedor.

 

Aquí en w3schools tienes información sobre estas propiedades.

 

Otra alternativa. La que yo usaría si quiero preservar la imagen completa es meterla directamente en el html como imagen responsive, ya sabes ancho 100% y alto en auto y no como background en el CSS.

 

Tendrías que jugar con la posición de todos los elementos.

 

No se si te seré de ayuda o te lio más y es que es difícil hasta para uno mismo saber lo que se quiere o transmitirlo.

 

Tu, pregunta ;)

 

Saludos!

 

mon

Share this post


Link to post
Share on other sites

Hola!!

 

Sí me ayudas, y te lo agradezco muy sinceramente. En efecto he probado las dos propiedades, contain y cover y cada una de ellas tiene sus pros y contras, pero en cualquier caso,ninguna se adapta a lo que pretendo, pues sí me interesaría que no se perdiese nada y mantuviese las proporciones. Sí funciona la imagen metiéndola como responsive directamente en el html, lo que ocurre es que de este modo, obviamente, deja de actuar como fondo y no puedo superponer nada a ella (imágenes, texto, etc.), pero en cualquier caso creo que por ahí tendré que llevar finalmente el diseño.

 

Tal vez no haya sabido transmitir correctamente lo que pretendo, y voy a hacer un último intento, pero, por favor, no quiero que dediques a esto más energías de las que se merece:

 


  •  
  • Dos imágenes. Cada una de ellas en un div full-width alineados verticalmente.
  • divs10.gif
  • Resultado responsive manteniendo ubicación, espacio entre divs, proporciones...
  • divs210.gif
  • Imágenes en background para posibilitar superponer, por ejemplo textos en el div.
  • divs1010.jpg

 

Espero que con estos datos quede un poo más claro qué es lo que pretendo. Me gustaría encontrar la solución, pero lo que no quiero ni puedo, es estar "empantanada" indefinidamente, por lo que en otro caso, tiraré por otra vía.

 

Muchísimas gracias, y discúlpame si no he conseguido hacerme entender correctamente.

 

Saludos!!

Edited by aixa

Share this post


Link to post
Share on other sites

Hola aixa:

 

Echa un vistazo a esto: ejemplo

 

Mira el código html y el css.

 

Ahora no tengo tiempo, pero en un par de horas explico aquí mismo el tema.

 

- - - - - - - - - - - - - - - - - - - -

Continúo.

 

El truco básicamente consiste en tener los contenedores que necesites, en este caso los 2 article, con posicionamiento relativo. Y dentro de cada uno de ellos su imagen con ancho 100% y alto auto y mejor si también le das posicionamiento relativo ya que así puedes ajustar con parametros su posición dentro de su contenedor padre, en este caso article.

 

De esta forma conseguimos que la imagen se adapte al 100% de su contenedor y como éste en este caso no tiene asisgnado un ancho, se va al ancho de la ventana.

Así conseguimos tener dos imágenes adaptables una debajo de la otra.

 

¿Y cómo superponemos y posicionamos el resto de los elementos que deseas que vayan dentro del contenedor article?

 

Con posicionamiento absoluto.

 

¿Y cómo hacemos para que estos elementos tengan un tamaño y posición diferente dependiendo del dispositivo en que se ven?

Esta ya te la sabes ;) Con media queries.

 

Todo esto es una aproximación básica. A partir de aquí te puedes complicar todo lo que quieras.

Como te decía echa un vistazo a los códigos html y css, verás algunas cosas que he añadido y cualquier pregunta que te surja o si no me he explicado bien o no te he entendido correctamente me lo dices sin ningún reparo.

 

Un saludo!

 

mon

Edited by uhf

Share this post


Link to post
Share on other sites

SIIIIIIII !!!!

 

Perfecto. Cuando ya estaba a punto de tirar la toalla... Me has dado la solución a la que yo ya era incapaz de llegar. Y sí que, como siempre, cuando te dan la solución, todo parece muy sencillo, y lo es, pero porque otros te han hecho la labor.

 

Gracias. Muy sinceramente. Me imagino que sabes lo que es encontrarse en una situación en la que ya no sabes por donde tirar. O tal vez no ;-)

 

A partir de aquí, espero que el camino ya se me haga más transitable, en caso contrario, volveré a la carga. :rolleyes: :rolleyes: :rolleyes:

 

Repito, muchísimas gracias y un saludo.

Share this post


Link to post
Share on other sites

Me imagino que sabes lo que es encontrarse en una situación en la que ya no sabes por donde tirar. O tal vez no ;-)

... volveré a la carga

Pues claro. :unsure: Muchas veces.

 

Para lo que necesites.

 

mon :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.