Sovrapporre un'immagine ad un layer senza posizionamento assoluto

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Html

Abbiamo visto con i Css come sovrapporre più livelli con l'ausilio del posizionamento assoluto. In questo Articolo vediamo come sovrapporre un'immagine ad un layer di tipo div senza utilizzo dei Css ma di solo Html:

<div style="border-bottom: Solid 1px #000000; padding: 3px;">
    <img src="icona.gif" border="1" align="left" hspace="5">
    Inserire qui il testo che deve comparire al fianco dell'icona...
</div>
Il solo utilizzo di align="left" sull'immagine fa si che il livello non sia obbligato ad espandersi in altezza per la grandezza dell'immagine ed evita l'utilizzo di una tabella per affiancare l'elemento testo; il codice Css utilizzato si limita a creare un bordo inferiore ed una spaziatura interna al layer per rendere evidente la sovrapposizione.

L'effetto ottico è davvero interessante!

PS. Ringrazio il mio amico Max Bossi per avermi fornito lo spunto durante un lavoro svolto insieme... grazie Max!

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (32.979)

:: Le tabelle Html (31.000)

:: Formattazione del testo in Html (25.042)

:: Referenze dei Tag Html (18.963)

:: Creare tabelle con i bordi curvi (17.800)

:: Guida XHTML (16.238)

:: Struttura di un file Html (14.801)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.525)

:: Inserire le immagini in una pagina Html (10.902)

:: Ritorno a capo nei button di form Html (9.528)

IN EVIDENZA
DOWNLOAD