Varias imagenes en un div
12 seguidores
Necesito saber si con css, puedo meter varias imagenes en un solo div, y si se puede, como se hace.
kkt.
35 comentarios Ir al último comentario
Entra o únete Gratis para comentar
Seguro que tienes mucho que decir, te estamos esperando.
kemie
imagenes normales? o imagenes de fondo?
si te refieres a imagenes normales, es tan sencillo como
<div id="midiv">
< img src="path/a/tu/imagen.jpg">
< img src="path/a/tu/imagen2.jpg">
< img src="path/a/tu/imagen3.jpg">
</div>
y si quisieras darle algun formato, puedes hacerlo, por ejemplo:
#midiv img{
border:1px solid #336699;
float:left;
}
kokito
Pero si yo no lo he entendido mal, cuando maquetas en css, evitas de todas las formas meter imagenes en el codigo, y ponerlas todas en la hoja de estilo, luego todas como background. no?
kkt
kemie
La idea detras de css es separar el contenido de la forma. Si tus imagenes son solo para darle estilo a tu pagina, entonces lo mejor es ponerlas en tu css, pero si son contenido (como por ejemplo, la foto de un producto), entonces no hay nada de malo en tenerla como un < img>
kokito
Vale, he comprendido bien la diferencia.
Y entonces, en el caso de que quiera meterla como estilo, seria posible meter dos imagenes como background.
¿porque no hay otra forma de meter una imagen en el estilo, no?
kkt.
txuma Plus
yo acostumbro a meter las imágenes decorativas como backgroung de los distintos componentes... por ejemplo, como fondo del H1 si es la cabecera de la página.
joseflorido
Hola!
kokito
en el caso de que quiera meterla como estilo, seria posible meter dos imagenes como background.
No es posible poner dos imagenes como background de un mismo elemento, tendrias que poner una como fondo y otra como imagen en el codigo.
kokito
¿porque no hay otra forma de meter una imagen en el estilo, no?
pues... en el css solo puedes meter imagenes como fondo de elementos y tambien como viñetas para listas, pero esto no creo que te sirva en tu caso.
saludos :)
kemie
desgraciadamente solo se puede tener una, pero puedes con trucos tener mas de una, por ejemplo, dandole a un elemento dentro de tu div otra imagen de fondo. checa este articulo como un ejemplo:
http://www.alistapart.com/articles/slidingdoors/
kokito
Pongo un ejemplo.
Tienes un site hecho en tres columnas: menu-info-publicidad (pejemplo)
Las columnas estan delimitadas por lineas, que en css pondria : border-left-style: dashed;
border-right-style: dashed;
Pero y si no quisiera que las lineas fueran puntos suspensivos, sino por ejemplo, redondeles or rombos, o conejitos,... No puedo utilizar el border, tendria que hacer una imagen y que se repitiera en y. Luego si tuviera que poner una imagen a la derecha y otra a la izquierda para delimitar la columna de menu, de contenido y de publicidad.
No se si me he explicado bien. Si quereis pongo un ejemplo.
kkt.
kokito
O sea, que seguimos con los truquillos de casa para maquetar.
kkt.
joseflorido
kokito
si no quisiera que las lineas fueran puntos suspensivos, sino por ejemplo, redondeles or rombos, o conejitos,... No puedo utilizar el border, tendria que hacer una imagen y que se repitiera en y.
sip, esasto, tendrias que hacerlo con una imagen repitiendose en el eje y,ya que css2 no permite imagenes en los bordes. En css3 tendremos la nueva propiedad border-image en el nuevo modulo border y esto ya permitira hacer virgüerias -> http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image
klein
kokito
O sea, que seguimos con los truquillos de casa para maquetar.
kkt.
Efectivamente, esa es la basura que seguimos arrastrando (ahora con los CSS)
txuma Plus
[post editado]
jejeje, me ha ganado el señor florido por segundos con lo del CSS3 :P
joseflorido
txuma
jejeje, me ha ganado el señor florido por segundos con lo del CSS3 :P
jejeje ;)
ha sio suerte! esta jodio ganarte... eres billy el niño :p
cbp
txuma
yo acostumbro a meter las imágenes decorativas como backgroung de los distintos componentes... por ejemplo, como fondo del H1 si es la cabecera de la página.
¿eso no vale, no? en realidad el h1 se reserva para el título de la página, habría que usar el h2 para la cabecera :?
eso me pareció entenderle una vez a meddle...
pedro_fm
la verdad es que vendría bien un poco de luz sobre el uso correcto de los tags. porque creo que todos estamos aprendiendo CSS a base de tutoriales de por ahi, algunos mejores que otros y tal... y con eso tenemos el riesgo de, como comenta Klein, seguir guarreando para maquetar, aunque esta vez en lugar de con tablas, con CSS.
pues eso, sabeis de algun sitio que explique un poco el correcto uso de los tags??
(y luego con el CSS que cada uno se busque la vida, la idea es que el contenido esté bien, como base para un desarrollo bien hecho)
cbp
en minid hay información sobre un buen uso semántico de las etiquetas.
klein
Yo creo que la utilización de los elementos html/xhtml está clara, y es relativamente sencillo aprenderla. Lo único que hay que hacer es irse al W3C y "empollárselo", ésa es la única manera de utilizar correctamente las etiquetas.
El problema viene con la jodida especificación CSS que todavía no se adapta a las necesidades "reales" de presentación.
hartum
Lo unico, dices? pero si es el coñazo mas grande del mundo.
albertoromero
kokito
Pero y si no quisiera que las lineas fueran puntos suspensivos, sino por ejemplo, redondeles or rombos, o conejitos,... No puedo utilizar el border, tendria que hacer una imagen y que se repitiera en y. Luego si tuviera que poner una imagen a la derecha y otra a la izquierda para delimitar la columna de menu, de contenido y de publicidad.
No se si me he explicado bien. Si quereis pongo un ejemplo.
En este caso, una solución puede ser poner una imagen de fondo que ocupe todo el ancho de la columna, pero que solo tenga <em>conejitos</em> a la izquierda y a la derecha, no?
txuma Plus
cbp
<div class="quote">
txuma
<blockquote>yo acostumbro a meter las imágenes decorativas como backgroung de los distintos componentes... por ejemplo, como fondo del H1 si es la cabecera de la página.</blockquote>
</div>
¿eso no vale, no? en realidad el h1 se reserva para el título de la página, habría que usar el h2 para la cabecera :?
eso me pareció entenderle una vez a meddle...
Pues eso... yo en el h1 meto el título de la página... pero después oculto el texto y le pongo una imagen de fondo :) Vamos, algo tal que asin:
<code>
<h1><span>Foro de DMSTK</span></h1>
y en la hoja de estilos:
h1 span {
display: none;
}
h1 {
background-image: url(loquesea.gif);
}
</code>
No es que me mole mucho ese span dentro del H1 semánticamente hablando, pero bueno :P
cbp
ah vale vale, lo había entendido mal :) ya decía yo que eso de darle clases a uno de los gurús... :P
de todas formas, ¿esto valdría?
<h1>Foro de DMSTK</h1>
h1 * {
display: none;
}
h1 {
background-image: url(loquesea.gif);
}
¿funcionaría?
hartum
ya te digo que si funcionaria, y menos chapucero que la version txuma
txuma Plus
estais seguros ??
pedro_fm
cbp
h1 * {
display: none;
}
el asteristo para que es? es simplemente un <em>wildcard</em> o sirve para mas?
hartum
txuma
estais seguros ??
que quieres que te diga? cuando tienes razon la tienes, he probado esto
h1 {
display:none;
background-image: url(letras.gif);
width:300px;
}
y no, asi que le pido disculpas
txuma Plus
no hay que pedirlas, perrete, que todos a veces pensamos que una cosa es de una forma y es de otra ;)
cbp... el 'asterisco' es un selector universal, pero es que dentro de H1, en el ejemplo que tu planteabas no había NADA que seleccionar (por decirlo en plan perogrullo), ¿lo pillas?
cbp
txuma
cbp... el 'asterisco' es un selector universal, pero es que dentro de H1, en el ejemplo que tu planteabas no había NADA que seleccionar (por decirlo en plan perogrullo), ¿lo pillas?
lo había pensado como una forma de decirle que no muestre el texto, pero claro, con el * no se selecciona un texto, sino un elemento, así que no iría no... :(
bueno, poco a poco... :)
ikgoru
No he entendido para q haceis lo del h1, porque darle un texto y luego con los estilos quitarlo y poner una imagen de fondo, si lo que se busca es poner una imagen, no es más sencillo abrir un div y ponerla?
se puede poner desde los estilos si es una imagen para el diseño, por el tema filosofia y tal...
txuma Plus
ikgoru, por un tema de semántica en el código.
el H1 es la etiqueta del 'header principal' (por decirlo en plan perogrullo y que se me entienda), por tanto lo quedebe contener es el título de la página. Para que no aparezca el texto le ponemos una imagen de fondo y ocultamos el texto.
Para que te hagas una idea de a qué me refiero con la semántica del código: si tu abres el código fuente de una página y ves un texto dentro de un H1, automáticamente sabes que eso es una cabecera principal. Si tu metes un DIV y dentro una imagen no consigues que el propio código te indique qué contenido hay dentro.
Espero haberme explicado bien. Un saludo
kokito
Vayatela, "perogrullo", nunca la habia oido, y hoy ya la he leido dos veces en el mismo post.
La has aprendido nueva, txuma? :P
kkt.