Image Gallery

Citar

Escrito el 20 Abr 2017 08:44 am

Hola me gustaría cambiar una posición de un image gallery de horizontal a vertical, con el texto a la derecha a la imagen. Ahora la psición es esta:
IMAGEN
TEXTO
Pero no se muy bien como cambiar la parte que indica la posición. Y también limitar la anchura width:
Me gustaría que la posición seria así:
IMAGEN TEXTO

Este es el code:
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.img:hover {
border: 1px solid #777;
}

div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300"height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300"height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Northern Lights" width="300"height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 21 Abr 2017 01:33 pm

Puedes ponerlo de este modo:

Código HTML :

<html>
<head>
<style>
div.img {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
}

div.img:hover {
 border: 1px solid #777;
}

div.img img {
 width: 100%;
 height: auto;
}

div.desc {
float: left;
width: 150px;
 padding: 15px;
 text-align: left;
}
</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="fjords.jpg">
 <img src="fjords.jpg" alt="Fjords">
 </a></div>
 <div class="desc">Add a description of the image here</div>

<div class="img">
 <a target="_blank" href="forest.jpg">
 <img src="forest.jpg" alt="Forest">
 </a></div>
 <div class="desc">Add a description of the image here</div>

<div class="img">
 <a target="_blank" href="lights.jpg">
 <img src="lights.jpg" alt="Northern Lights">
 </a></div>
 <div class="desc">Add a description of the image here</div>

</body>
</html>

Aunque yo le pondría un contenedor con un minimo width para que no se deformase en resoluciones mas pequeñas que tu diseño.

Por jearj

41 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 25 Abr 2017 03:04 pm

Hola

Muchas gracias por tu esfuerzo, en ayudarme en cambiar la posición de los imágenes en mi “image gallery”. Pero por desgracia no funciona.
El hecho es, que introduciendo la parte de <style> </style> no cambio nada en absoluto.
Mi idea es este:
Imagen Texto/discribción
Imagen Texto/discribción
Imagen Texto/discribción

Es decir cambiar la posición actual a ser un “image gallery” vertical, con los imágenes a la izquierda, y el texto a la derecha de cada imagen.
También estoy de acuerdo en que debería esta en un contenedor que regula la “width” en su totalidad.
Intento aprender, pero precisamente el parte de funciones JS me cuesta mucho.
No se si tienes otra idea, o otros aquí pudría echarme una mano.

Muchas gracias

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 27 Abr 2017 07:49 pm

Si no te funciona, puede que tenga influencia de otra hoja de style.

Repasa tus style y fíjate en las class y los id

Por jearj

41 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 28 Abr 2017 09:18 am

Gracias por tu respuesta. Pero hasta allí no llega mis conocimientos.

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 29 Abr 2017 08:31 am

Este Image Gallery no tiene otra acción style en la pagina donde esta, lo único más que hay es Google analytics.
Pero antes de nada siempre compruebo estos cosas en una pagina nuevo y limpio, como un test. Y lo que tu me enviaste no da la forma que busco y deseo tener. Como eso:

IMAGE - TEXT/DISCRIBTION
IMAGE - TEXT/DISCRIBTION
IMAGE - TEXT/DISCRIBTION

< -------------- MAX WIDT 700 PX -------------->

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 02 May 2017 11:44 am

Si he entendido bien, lo que buscas es solo una columna.

Entonces tienes que añadirle algunas cosas.

Te quedaría así:

Código HTML :

<html>
<head>
<style>
div.principal {
    display: flex;
    justify-content: center;
    clear: both;
    float: none;
    width: 100%; max-width:700px; min-width:100%;
    margin: 0 auto;
}

div.img {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
}

div.img:hover {
 border: 1px solid #777;
}

div.img img {
 width: 100%;
 height: auto;
}

div.desc {
float: left;
width: 150px;
 padding: 15px;
 text-align: left;
}
</style>
</head>
<body>
<div class="principal">
<div class="img">
 <a target="_blank" href="fjords.jpg">
 <img src="fjords.jpg" alt="Fjords">
 </a></div>
 <div class="desc">Add a description of the image here. Add a description of the image here Add a description of the image here Add a description of the image here</div>
</div>

<div class="principal">
<div class="img">
 <a target="_blank" href="forest.jpg">
 <img src="forest.jpg" alt="Forest">
 </a></div>
 <div class="desc">Add a description of the image here</div>
</div>

<div class="principal">
<div class="img">
 <a target="_blank" href="lights.jpg">
 <img src="lights.jpg" alt="Northern Lights">
 </a></div>
 <div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

Por jearj

41 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 03 May 2017 03:17 pm

Hola jearj
Gracias por tu ayuda
Ahora si sale los imágenes a la izquierda, pero me da una problema con el texto. Por alguna razón, el texto se queda en una columna a lo largo del imagen.

Imagen Texto
Texto
Texto

Imagen Texto
Texto

Eso crea una regularidad en todo el diseño, porque toda la parte a la derecha se queda en vacío. Como algunos textos son mas largos que otros desplazan todo. Lo mismo paso en cuando el diseño era horizontal.
Pensé en cambiar a la izquierda y en vertical el texto se desplazaría así:

Imagen Texto texto texto texto texto --------------------------------------------------------
Hasta los 700 px.

Puedes ver aqui, que los textos en dos ejemplos son muy differente, como podria hacer que el texto, se queda a la derecha ocupando todo el espacio, y no en una columna?

<div class="principal">
<div class="img"><a href="arte_budista/imag/buda_thai.jpg" target="_blank"><img alt="Antiguo buda de bronce" src="arte_budista/imag/buda_thai.jpg" /> </a></div>

<div class="desc">Buda Shokotai siglo 19 Impresionante buda de bronce con origen de Tailandia, principio del siglo 19, o más temprano. Una patina muy bello, con menores defectos y patina, típicos por su edad. Alto: 30 cm. Ancho: 20 cm. Profundo 11 cm.</div>
</div>

<div class="principal">
<div class="img"><a href="arte_budista/imag/buda_khmer1.jpg" target="_blank"><img alt="Buda Khmer" src="arte_budista/imag/buda_khmer1.jpg" /> </a></div>

<div class="desc">BUDA KHMER Una impresionante estatua de bronce de un buda garuda. Un ejemplo raro del estimo Khmer donde se sienta encima del cuerpo de la serpiente, las cinco cabezas. La serpiente se levanta a la izquierda del Buda. La decisión del Buda a renunciar a las posesiones mundanas está representada aquí por los lóbulos de las orejas alargadas. La estatua está en excelentes condiciones, con un color marrón verdoso adquirido pátina. Altura de la estatua: 164 mm. Ancho: 185 mm. Peso de la estatua de 958 gramos. </div>
</div>

De nuevo muchísimas gracias. No nací con la era de Internet, así que a veces me cuesta comprender las funciones de js.

Un saludo

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 03 May 2017 06:54 pm

Prueba hacer estos cambios:

div.principal {
display: flex;
justify-content: center;
clear: both;
float: none;
width: 100%; max-width:700px;
margin: 0 auto;
}

div.desc {
float: left;
width: 100%;
padding: 15px;
text-align: left;
}

Por jearj

41 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 05 May 2017 08:17 am

Hola jearj

Muchísimas gracias por tu ayuda, ya funciona bien. Lo único que tuve que cambiar era esta parte:

div.desc {
float: left;
width: 100%;
padding: 15px;
text-align: left;
}

Donde cambio width con 65% para que el texto se quedara mejor en la pantalla.

Si quiero hacer una margen mayor entre la borde izquierda de la pantalla, (para que se queda un poco más centrado) y los imágenes, que parte debería cambiar. Si no recuerdo mal es el padding?

De nuevo muchas gracias.

Un saludo

Por th

15 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 May 2017 10:06 pm

Si, el padding es para crear espacios dentro de la celda.

Por jearj

41 de clabLevel

Envíale un mensaje privado

Image Gallery

Escribe una respuesta rapida