Continua la rubrica su JuliusDesign, CSS Trick in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.

Oggi vediamo come fissare un elemento a fondo browser, lasciandolo in primo piano rispetto al resto del contenuto.

Questa tecnica di solito si applica per promuovere operazioni di marketing in modo immediato e su tutte le pagine interne.

Gli stili fondamentali sono position e bottom, che ci permetterano di fissare l’elemento e indicargli la posizione.

Codice CSS

#bottom-banner{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background:#CCCCCC;
z-index:999999;
}

Come è possibile notare dallo stile CSS, ho inserito anche uno z-index, che permette di dare al contenuto un livello di visibilità, più il numero è alto, più sarà in primo piano rispetto agli altri contenuti.

Indicando un numero alto, di solito 999999, questo elemento sarà al di sopra di tutto il resto del contenuto e non verrà oscurato dal resto.

Codice HTML

<div id="bottom-banner">Testo o immagine</div>

In questo modo abbiamo creato un div contenitore di ID uguale bottom-banner che includerà il nostro testo o immagine.

Questo div sarà sempre posizionato a fondo browser e sarà in primo piano rispetto al contenuto.

Codice JavaScript

Può essere utile lasciare la possibilità all’utente di nascondere questo elemento tramite un link o pulsante.

Ci basterà creare una funzione JS che renda invisibile solo per quel momento l’elemento di ID uguale bottom-banner.

Inseriamo questo script tra i tag <head> e </head>

<script type="text/javascript">
function hidebar(){
document.getElementById('bottom-banner').style.display = "none";
}
</script>

Una volta inserito associando l’ID del contenitore corretto da rendere invisibile andiamo ad aggiungere il link per attivare l’azione.

Codice HTML

Nel codice precedente andiamo a inserire il nostro link Nascondi sempre dentro il div ID bottom-banner.

<div id="bottom-banner">Testo o immagine
<a onclick="javascript:hidebar();" href="javascript:void();">Nascondi</a></div>

In questo modo abbiamo creato un div contenitore di ID uguale bottom-banner che includerà il nostro testo o immagine.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Lascia un Mi Piace se non conoscevi questo Trick, o se ti piace la rubrica.

Letture Consigliate per CSS Trick

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.