Popover e elementi fissi

Bikini Contest coperto da simpatici popoverNegli ultimi mesi i web designer, o chi ne fa le veci, si stanno sbizzarrendo inserendo nei layout elementi fissi o elementi in sovraimpressione, tecnicamente chiamati popover.

Una vera e propria moda, che sfrutta un particolare attributo di stile, che è sempre esistito ma che improvvisamente è stato ripescato ed oggi si sta inflazionando parecchio. Bando alle chiacchiere e vediamo come creare un elemento fisso o un popover.

 

Position:fixed

Il tecnicismo alla base dei popover e dei posizionamenti "fissi" è l'attributo css Position, valorizzato come fixed. Ne avevo già accennato nel post CSS: posizionamento elementi, facciamo un po' di chiarezza. Questo attributo permette di agganciare un elemento ai lati del browser.

Per posizionare l'elemento e decidere a qualche lato agganciarlo possiamo usare le proprietà: left, right, top, bottom debitamente accoppiate. Se ad esempio volete posizionare un DIV sul lato destro dello schermo, a 100 pixel dal top vi sarà sufficiente scrivere:

<div style="position:fixed; top: 100px; right: 0;">...</div>

Se invece volete creare un footer potete inserire:

<div style="position:fixed; bottom:0;">...</div>

Ricordatevi però, che se inserite un footer di 30px, è buona cosa dare ai vostri contenuti uno spazio in calce altrettanto alto, evitando la sovrapposizione dei contenuti.

 

Popover

Avete presente quelle finestre che si aprono sopra ad un sito, che però non sono vere e proprie finestre (di sistema operativo / popup), spesso con dei moduli di inserimento o delle pubblicità? Quelle si chiamano popover e sono semplicemente blocchi di HTML visualizzati sopra al testo.

Per fare i popover la cosa principale è quella di scegliere un posizionamento non in linea. Potete quindi attribuire a position i valori: fixed, absolute o relative. In IE6 Absolute e Fixed purtroppo hanno lo stesso significato.

Elemento importante nella definizione dello stile nei popover è lo z-index, ovvero l'indice di sovrapposizione: più è alto, più l'elemento è visivamente prioritario rispetto agli altri. Se non viene definito, o valorizzato come z-index: auto prende il valore crescente in base allo stack, ovvero all'ordine di caricamento degli elementi nel html.

Lo z-index vale anche per gli elementi fixed, ma attenzione: Adobe Flash purtroppo non rispetta la regola ed è sopra a qualsiasi elemento HTML.

 

Fantasia e JQuery

Imparato a creare elementi fissi e popover con poche righe di HTML e CSS, non vi resta che divertirvi a farli muovere con un po' di Javascript. Come sempre è necessario una buona conoscenza del DOM (document object model) del HTML e delle principali istruzioni javascript per fare apparire / sparire un elemento, oppure per gestire azioni nel tempo / ripetute.

Se invece siete pigri, o volete un framework (insieme di funzionalità) in grado di darvi tutto quasi già fatto, io consiglio vivamente jQuery: in un baleno, leggendo gli esempi, il vostro popover apparirà al mondo!

 

Risorse aggiuntive

Le informazioni che vi ho dato sono solo esempi e idee applicative. Se volete approfondire l'argomento vi consiglio l'articolo di Life is a Flash, oppure quello di html.it. Se poi siete degli insaziabili curiosi / nerd / studiosi non vi resta che spulciare le reference dei CSS.

Loading Facebook Comments ...

Un pensiero su “Popover e elementi fissi

  1. Pingback: Google Chrome: il porting

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *