Como hacer que las imagenes salgan de lado? y no abajo..

#1 (**permalink**) 14/12/2011, 08:26

Hola, Tengo un Blog en Blogger, y quisiera hacer que las imagenes en vez de ir para abajo, se alinean al lado derecho.

Este es el CSS que tengo:

Código PHP:

  .single img { 

 
margin:10px;

float: center;

padding: 0px 43px;

width:180px; /* Este es el ancho de la imagen pequeña */

height:180px; /* Este es el alto de la imagen pequeña */

max-width:500px;

Si alguien me puede ayudar.. estaria muy agradecido!

Arkaitz · #2 (**permalink**) 14/12/2011, 08:30

Quita ésta línea:

Código CSS:

Ver originalfloat: center;

#3 (**permalink**) 14/12/2011, 08:31

Cita:

Iniciado por Arkaitz

Quita ésta línea:

Código CSS:

Ver originalfloat: center;

Gracias, pero a lo que me referia es que queden alineadas uno al lado de otra hasta que no tengan mas espacio, y bajen..

Esta es la entrada para demostrarte: http://jodetemiblogmolamas.blogspot....a-olot_06.html

(Abajo donde pone "Galeria")

Y muchas Gracias por la rapida respuesta!!

emprear · #4 (**permalink**) 14/12/2011, 10:12

Cada una de las imágenes esta en un div contenedor

Código HTML:

Ver original<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s1600/playa+5+quiero+montar+un+negocio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s320/playa+5+quiero+montar+un+negocio.jpg" border="0" height="256" width="320"></a></div><br>

Tendrias que a cada contenedor, removerle el class=separator y todos los estilos y solo poner display: inline; además entre cada div hay un sato de linea que tambien tendrias que remover.
Al inicio hay un div vacia, sacala tambien

Código HTML:

Ver original<div style="display: inline;"><a href="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s1600/playa+5+quiero+montar+un+negocio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s320/playa+5+quiero+montar+un+negocio.jpg" border="0" height="256" width="320"></a></div>

Saludos

#5 (**permalink**) 14/12/2011, 10:15

Cita:

Iniciado por emprear

Cada una de las imágenes esta en un div contenedor

Código HTML:

Ver original<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s1600/playa+5+quiero+montar+un+negocio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s320/playa+5+quiero+montar+un+negocio.jpg" border="0" height="256" width="320"></a></div><br>

Tendrias que a cada contenedor, removerle el class=separator y todos los estilos y solo poner display: inline; además entre cada div hay un sato de linea que tambien tendrias que remover.
Al inicio hay un div vacia, sacala tambien

Código HTML:

Ver original<div style="display: inline;"><a href="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s1600/playa+5+quiero+montar+un+negocio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-PJs4bap9hpM/TtrBML6YnAI/AAAAAAAAAV8/ga8VJZEpjqE/s320/playa+5+quiero+montar+un+negocio.jpg" border="0" height="256" width="320"></a></div>

Saludos

Muchisimas Gracias! Pero tengo otra duda, puedo ponerlo en automatico? quiero decir programar el CSS, para que lo haga en automatico cada vez que ponga las imagenes? sin necesitad de poner div's ni tablas?

La verdad seria un lujazo!

Gracias de nuevo!

emprear · #6 (**permalink**) 14/12/2011, 12:34

no conozco muy bien como funciona Blogger, supongo que deberás editar alguna plantilla. bastaría con hacer los cambios ahi.
Saludos

#7 (**permalink**) 14/12/2011, 13:21

Muchas Gracias, y perdon por ser tan novato...

He visto que en el anterior caso has puesto DIV acompañadas de CSS, en ves de crear el DIV, intente asignar a todas las imagenes estas etiqutas:

img {

clear: both;
display: inline;
text-align: center;
}

Y no he tenido ningun cambio, de todas maneras muchas gracias! Si hay alguna otra alternativa, seria de muchisima ayuda!
Y si no, no abra otra que trabajar con div..

emprear · #8 (**permalink**) 14/12/2011, 13:29

por mas que le des estilo a las imágenes, si estan dentro de un div no te va a surtir efecto, hay que darle el display: inline al div, y remover los saltos de linea <br>

en tanto los divs se comporten como elementos de bloque (display: block) van a colocarse una debajo de la otra,

Saludos

#9 (**permalink**) 14/12/2011, 13:42

Muchas gracias, la verdad ni idea de que hacer jeje.. gracias a tus consejos encontre esta pequeña guia: http://www.librosweb.es/css/capitulo15/ejercicio_6.html

Y por lo que veo que no se puede hacerlo de manera automatica, por que yo cuando introdusco una imagen en Blogger, lo que se crea es un <div> <a> y <img>, entonces este div solo contiene Align="center", y no se puede editar nada de eso, doy por supuesto que no se puede manipular eso con estilos... y que opinas de JavaScript?

Una funcion que meta todas las imagenes que añada, en horizontal.. podria probar? o ni hace falta que haga? mejor hacer manual y ya esta... también tengo pensado ir a la tienda de informatica a investigar si ellos me peuden hacer ellos.. :S

Ni idea.

Bueno muchas gracias a todos por su tiempo! Lo valoro muchisimo!

jguaman90 · #10 (**permalink**) 14/12/2011, 21:57

Hola! la solución más optima (a mi parecer):

.single a{
display:inline-block;
}
.single img{
margin:10px;
padding: 0px 43px; /*why?*/
width:180px;
height:180px;
max-width:500px;
}
debes ajustar el ancho del contenedor, ya que al exceder el ancho pasan a la siguiente "línea".

también hay que tener unas consideraciones con IE, y los espacios

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Saludos!

emprear · #11 (**permalink**) 14/12/2011, 23:04

Cita:

Iniciado por jguaman90

Hola! la solución más optima (a mi parecer):

.single a{
display:inline-block;
}
.single img{
margin:10px;
padding: 0px 43px; /*why?*/
width:180px;
height:180px;
max-width:500px;
}
debes ajustar el ancho del contenedor, ya que al exceder el ancho pasan a la siguiente "línea".

también hay que tener unas consideraciones con IE, y los espacios

http://robertnyman.com/2010/02/24/cs...-why-it-sucks/

Saludos!

no se trata simplemente de alinear una imagen al lado de otra. sino de ver como lo implementa en su código de blogger, deberías leer el post con más atención.

jguaman90 · #12 (**permalink**) 14/12/2011, 23:56

Ups..perdon...

la clase .separator no tiene definida reglas.
a esta le agregas display:inline-block, remueves el atributo style de los div y los <br>

#13 (**permalink**) 15/12/2011, 08:34

Cita:

Iniciado por jguaman90

Ups..perdon...

la clase .separator no tiene definida reglas.
a esta le agregas display:inline-block, remueves el atributo style de los div y los <br>

Mil y una gracias a todos, al final lo pude mas o menos arelgar, aun que no sea automatico... aqui os dejo una web muy util, que pegas ahi las imagenes clicas un boton y en automatico te hace la galeria! Creo que es lo mas rapido y a mi me vale:

http://crear-galeria-vku.blogspot.com/

Nuevemente muchisimas Gracias a todos!