tag <H1> con immagini

[diego78]

Salve a tutti,
devo associare ad una scritta Titolo con tag H1 una immagine piccola sulla dx della scritta.

Come fare ciò con i CSS?

[Mich_]

L'immagine fa parte del contenuto o e` un abbellimento?

Nel primo caso devi inserirla con il tag <img>:

<h1>
  titolo
  [img]...[/img]
</h1>

nel secondo caso devi semplicemente sistemare il CSS con un codice del tipo:

h1 {
  background: url(...);
  background-position: top right;
  height: ...px;  /* l'altezza dell'immagine (se e` maggiore del font) */
  width: ...em;  /* parti con il n. caratteri + 2, poi aggiusta in modo che vada bene */
}

[diego78]

Perchè se provo questa sintassi:

<h2>TITOLO[img]images/arrow.png[/img]</h2>

su tutti i browser è ok mentre con Safari la freccia è più in alto rispetto al testo?

[fcaldera]

Originariamente inviato da diego78
Perchè se provo questa sintassi:

<h2>TITOLO[img]images/arrow.png[/img]</h2>

su tutti i browser è ok mentre con Safari la freccia è più in alto rispetto al testo?

posta un esempio su jsfiddle.net o jsbin.com con l'immagine reale e lo stile che applichi a titolo e immagine

[diego78]

Il codice è questo:

<div class="container">
<div class="row page">
<div class="step">
<div class="span12" >
<h2>TITOLO[img]images/arrow.png[/img]</h2>
</div>
</div>
</div>

CSS:

.row {
margin-left: -20px;
*zoom: 1;
}

.row:before,
.row:after {
display: table;
content: "";
}

.row:after {
clear: both;
}

.page {
position: relative;
}

.page .step {
margin-top: 30px;
}

.page .step h2 {
font-family: sans-serif;
font-weight: weight;
font-size: 28px;
}

[cassano]

Ma con .row:after

cosa si ottiene ?

[codencode]

Originariamente inviato da cassano
Ma con .row:after
cosa si ottiene ?

:after è uno pseudo-elemento che definisce lo stile css di un contenuto generato dopo l'elemento a cui è associato.

[cassano]

però mi viene un dubbio, se lo assegno per esempio ad una div non è lo stesso effetto che assegnarli una classe ?

[codencode]

No, perché l'effetto non ricade sul div ma sull'elemento generato appena dopo il div.

[cassano]

Perfetto ho capito, quindi è come se associo una classe al primo elemento figlio.

Grazie.