[SOLUCIONADO] H2 con texto e imagen

[ebalmaceda]

Buen dia, necesito hacer esto que se ve en la imagen:




Tiene que estar dentro de la etiqueta <h2></h2>

Pense en hacer algo asi:

Código HTML:

<h2>
<div>Texto</div>
<div>Imagen</div>
<div>Texto</div>
</h2> 

Usaria los divs para posicionar el texto y darle formato mediante CSS. O no se ustedes como recomiendan hacerlo.

Gracias!!!

[maycolalvarez]

de poder hacerlo, se hace, pero dudo mucho que un spider acepte eso como un H2 válido, consulta en el foro de posicionamiento SEO, reporta el tema para que sea movido en tal caso, NO lo duplique.

[ebalmaceda]

Hola! Gracias por responder! Justamente ese es mi temor, que no lo tomen como valido.
Y si lo hago asi:

Código HTML:

<h2>La primer parte del titulo</h2>
<aca la imagen de la muerte>
<h2>La segunda parte del titulo</h2>
 

Sera mejor?

Como hago para reportar el post asi lo mueven?
abrazo!

[pzin]

Yo haría algo así:

Código HTML:

<h2>
  Texto
  <span>Texto2</span>
</h2>
 

Luego puedes aplicar una imagen de fondo a h2 y al span le puedes poner un margen superior y alinearlo a la derecha. Para lo del margen necesitarás que sea un elemento de bloque o de bloque en linea.

[ebalmaceda]

voy a probar asi, con la imagen de fondo, no se me habia ocurrido. Asi es lo mismo no? Con el <br />

Código HTML:

<h2>
  Texto<br />
  <span>Texto2</span>
</h2>
 

[pzin]

Si vas a ponerle un margen a ese span necesitas ponerlo como elemento de bloque:

Código CSS:

h2 span {
  display: block;
}
 

Y no te haría falta ningún br.

[ebalmaceda]

Genial! Me salvaste porque iba a estar renegando un rato sino. Me estoy llendo de la oficina, llego a casa y pruebo.
Mil gracias!

[ebalmaceda]

Buenisimo, lo deje asi:

Código HTML:

h2 span
{
    display: block;
    text-align:right;
    margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top:80px; 
    padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;   
}
 

[pzin]

Todo esto:

Código CSS:

margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top:80px; 
padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;
 

Lo puedes quitar y cambiar por:

Código CSS:

margin-top:80px;
 

[ebalmaceda]

Muchas gracias a todos!