Varias imagenes en un div

en realidad podría hacerse sin <span>

http://www.moronicbajebus.com/playground/cssplay/image-replacement/

si quereis aprovecharel h1 para poner una imagen de fondo pero a la vez esconder el titulo de la pagina (que debe ir en el unico h1 de la pagina) entonces os aconsejo meter el titulo de pa peich en un span y hacer un display:none sobre el span, y añadir el bg por css.

PD: entrada relampago de meddle in person from alacant, saludos a los colegas ;)

pos no, el h1 indica que es un titulo importante, y cuando ves el codigo puedes leer hasta lo que pone dentro peeeeeeeeeeeeeero, luego a la hora de enseñarlo pones una imagen, creo que es eso, pero no te fies que ultimamente no ando nada fino.

txuma

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

......asimilando........

Cuando hablas de meter una imagen dentro del h1, hablas de una imagen q fuera el titulo de página?
Si es cualquier otra imagen perderia el sentido lo del h1 y podría hacerse de otra manera no?

lo he entendido?

Que va, es una palabra más vieja que la tos:

perogrullada (de Perogrullo; Pero, n. pr. + grullo, quizás der. de grulla)
1 f. Verdad que por sabida es simpleza el decirla.

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.

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

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

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... :)

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?

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

cbp

h1 * {
display: none;
}

el asteristo para que es? es simplemente un <em>wildcard</em> o sirve para mas?

estais seguros ??

ya te digo que si funcionaria, y menos chapucero que la version txuma

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?

&lt;h1&gt;Foro de DMSTK&lt;/h1&gt;

h1 * {
display: none;
}
h1 {
background-image: url(loquesea.gif);
}

¿funcionaría?

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>
&lt;h1&gt;&lt;span&gt;Foro de DMSTK&lt;/span&gt;&lt;/h1&gt;

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

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?

Lo unico, dices? pero si es el coñazo mas grande del mundo.

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.

en minid hay información sobre un buen uso semántico de las etiquetas.

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)

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...

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

[post editado]

jejeje, me ha ganado el señor florido por segundos con lo del CSS3 :P

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)

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 -&gt; http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image

O sea, que seguimos con los truquillos de casa para maquetar.

kkt.

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.

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/

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 :)