Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Posizionamento del contenuto generato

Link copiato negli appunti

Fino a qualche anno fa il contenuto generato era praticamente impossibile da posizionare rispetto al contenuto dell'elemento al quale era abbinato. Questo perché le specifiche permettevano di usare solo le seguenti proprietà :

  1. bordi
  2. margini
  3. padding
  4. colore del testo
  5. colore di sfondo

Oggi invece le cose sono cambiate in meglio. Si supponga ad esempio di avere un'icona da inserire appena prima del contenuto di un'intestazione di secondo livello. Fino a qualche anno fa si poteva solo scrivere:

div.note h2:before {
    content: url(http://dev.css-zibaldone.com/img/note.gif);
    padding-right: 5px;
}

e si otteneva l'effetto di un'immagine non allineata verticalmente con il testo dell'elemento h2. Oggi invece possiamo scrivere:

div.note h2:before {
    content: url(http://dev.css-zibaldone.com/img/note.gif);
    padding-right: 5px;
    display: inline-block;
    position: relative;
    top: 10px;
}

e otteniamo l'effetto desiderato, come mostrato in questo esempio. Cambiando inoltre i valori della proprietà  display per l'elemento, otteniamo un controllo ancora maggiore sul contenuto generato. L'esempio proposto funziona nelle versioni più recenti di Chrome, Safari, Opera, Firefox ed in IE 8.

Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:

Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.

Ti consigliamo anche