Margin-right
Buenas. Estoy num pequeño lio que la verdad ya...
Estoy intentando dar vueltas a mi portfolio y para eso estoy con indexhibit que supongo que algunos ya lo conocerán.
Las galería están bien, pero, lo que quiero es poner directamente las imágenes en la área de texto que me da esto:
< img src=' ... ' width='500' height='333' / >
Bueno como he creado una div con 1020px de ancho para contener las imágenes, lo que estoy intentando es:
< div style... />
< img src=' ... ' width='500' height='333' / >< img src=' ... ' width='500' height='333' / >
< /div>
Es decir, tener dos imágenes un al lado de la otra pero con unos 10px de espacio, lo que supongo que debería usar un margin-right='10'
segundo la lógica parece que está bien, pero no.
El algún momento en el forum de indexhibit, me habían sugerido crear en el css un estilo para las imágenes, con esa margen y tal, pero lo que pasa es que donde ponga img, se va aplicar a todo lo que sea imagen, y eso no lo quiero.
Alguien me puede ayudar?
Un saludo
ivovaladares
Gracias.
Muchas gracias por las aportaciones
matmac Profesor Plus
El div quedaría <div id="imagenes"> porque luego dentro meterás una etiqueta de imagen <img /> con la imagen.
Para el margin también puedes usar la notación simplificada:
margin: top right bottom left;
margin: 0 10px 10px 0;
ivovaladares
Algún equivoco en el post anterior, justo después del saludo. upppssssss
ivovaladares
Hola. Gracias por las aportaciones.
Si que el index, creo que tiene ya un estilo para las imagenes
Entonces:
"#imagenes img { float:left; margin-right:10px; margin:bottom:20px; }
Esto se aplicará a todas las etiquetas <img> que estén dentro de ese div"
Como no pretendo usar las galerías que vienen por defecto (que son buenas)
El "title" seria para una breve descripción de la imagen. Y a respeto del proyecto, antes de la imagen.
La verdad es que no se que hacer todavía.
Gracias y un saludo
Como quedaria el DIV?
<div id="imagenes img">
serka
Bueno, yo creo que no es necesario tener que asignar una clase a cada imagen que introduzcas en el campo de texto, en indexhibit, el campo de texto se dibuja dentro de:
<div class='container'>Pienso que con asignar el estilo a las imágenes de este div
CSS:#container img {}
y para el resto de imágenes que indexhibit recopila con sus propias galerías:
CSS:#container #img-container img {}
De todos modos si utilizar el titulo y la legenda de la imagen, puedes conseguir que te sirvan de campos para describir la imagen. Si necesitas mas texto puedes manipular un poco el código para que te acepte mas cantidad de palabras.
un saludo
Usuario desconocido
No se deben duplicar ID, utiliza mejor un class común para las imágenes o mejor le pones un id al div que contiene las imágenes y creas una clase así:
#imagenes img { float:left; margin-right:10px; margin:bottom:20px; }
Esto se aplicará a todas las etiquetas <img> que estén dentro de ese div
ivovaladares
Hola. que funciona. Gracias, porque ya me estaba volviendo loco.
El código que tenia, entretanto lo fue cambiando y google y tal
Se lo que dices de no mezclar el CSS con el HTML. Pero ya me lío de como poner en el css y después aplicar al html.
Lo que voy hacer y con base en tu sugerencia, crear un id en el CSS para aplicar solo as estas img, y cambiar en el html el style por "id"
<img title="detail" src="http://www.ivovaladares.com/files/cinema-02.png"; id="mr">
Y claro a la DIV, hare lo mismo.
Ya te entiendo lo que me quieres decir de la resolución y si que lo tengo muy claro de los 1024, pero al mismo tiempo me da miedo que las img queden pequeñas si las bajo a 400px y por otro lado y aunque se que es un poco erróneo pensar así, las pantallas hoy en día ya van un poco por encima de los 1024 llegando a los 1280. Casi todos los portátiles y los de mesa, 17".
Claro que eses portátiles de 13"
Claro hay las galerias que inclui el INDEXHIBIT que son buenas, pero lo que pasa es que con algunos clientes, en cambio de temporada y cuando se hacen anuncios, más carteles, más libro, CD+DVD, programas de tal, pues imagina enlaces para todo eso. Entonces pensé que poniendo así dos img y claro con separadores y texto a explicar que va cada cosa en plan listado...
Nada gracias por la ayuda y buenas noches. Espero no me haber liado con el castellano
La verdad es que no se bien que hacer. Pero bueno tu ayuda ya hay abierto un poco más las posibilidades.
Y
Entonces
Pero
Usuario desconocido
Ee código que tienes es este:
<div style="float: left; width: 1020px; margin-top: 15px;"><img height="333px;" title="detail;'" margin-right:10px;="" 500px;="" width:="" src="http://www.ivovaladares.com/files/cinema-02.png">
</div>
<img height="333" width="500" src="http://www.ivovaladares.com/files/cinema-02.png">
<img height="333" width="500" margin-right="30" src="http://www.ivovaladares.com/files/cinema-02.png">
Creo que deberías meter las imágenes dentro del div y repasar el código de la primera imagen. Has metido el estilo mal, además de meterlo en línea.
Lo correcto para la primera imagen sería esto:
<img title="detail" src="http://www.ivovaladares.com/files/cinema-02.png" style="float:left; margin-right:10px;">Y lo mismo para las demás imagenes, que floten a la izquierda. Además yo le quitaría el ancho en píxeles al div que contiene las imágenes. Y tienes que tener en cuenta que para resoluciones de 1024x768 el ancho que tequeda quitando el scroll es 995px
Te recomiendo que separes código html y css porque meter los estilos en línea es un poco chapuza, salvo que vayas a maquetar una newsletter porque no te queda otra.