Fissare un Div a fondo Browser – CSS Trick #3

- Letture: 13.511

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.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

18 Commenti

  1. Ottimo articolo, ma in questo modo il footer resta sempre in primo piano? Esiste una tecnica dove se la pagina ha pochi contenuti, il footer si “attacca” al fondo della pagina, altrimenti scorre insieme al contenuto e quindi non lo copre ;)

  2. @ Federico Pian:
    non lo vedo molto utile come footer ma piuttosto per mettere in evidenza qualcosa che si vuole segnalare

    @ Stefano Sirianni:
    IE6? cos’è?

  3. A questo bisogna accludere la possibilità di memorizzare il “nascondi”. Se guardiamo gli adv di tuoguru nel footer, è una cosa che mi irrita molto cliccare su nascondi per poi vedermelo ripresentare dopo un refresh.

    Basta fare il nascondi con jquery richiamando una pagina che imposta una sessione su false, al quale si contrappone una generazione del div “bottom-banner” only if session is true.

  4. Joel ha scritto:

    A questo bisogna accludere la possibilità di memorizzare il “nascondi”. Se guardiamo gli adv di tuoguru nel footer, è una cosa che mi irrita molto cliccare su nascondi per poi vedermelo ripresentare dopo un refresh.

    Basta fare il nascondi con jquery richiamando una pagina che imposta una sessione su false, al quale si contrappone una generazione del div “bottom-banner” only if session is true.

    Credo sia appositamente voluto da julius

  5. Ciao ragazzi.
    Ho utilizzato questo div in un mio lavoro fatto per l’azienda ma su IE il div lo trovo in alto e per giunta non è fixed…come scorro sotto con la pagina il div sparisce…
    come si può risolvere questa cosa su IE? perchè non comparo sotto e non resta fixed?

    ps. sia su IE8 che IE9 è la stessa cosa

  6. @ Diego:
    ho notato che explorer da la priorità, sul posizionamento degli oggetti, all’HTMl e non al css. prova a posizionare il div prima di chiudere il tag body finale e guarda se funziona come desideri.

  7. @ Lucsio:
    Ciao Lucsio…
    quello lo avevo già notato ma il fatto è che sembra non prendere proprio il fixed…
    se lo metto prima della chiusura del body lo mette in fondo invece che in alto ma comunque sia non resta fisso sul browser…bisogna necessariamente scendere per vedere il div…
    Non so veramente come venirne fuori…forse uccidendo lo staff di IE??? :D
    avete soluzioni?

  8. IE6 provate con questo codice:

    * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    }

  9. @ Piero:
    ho provato questo codice ma la barra resta ferma nel punto in cui si carica. i problemi li dà con IE8 e IE9 (IE6 non lo so… già è tanto dover provare il cross-browser con 8 e 9, figuriamoci col 6) :D

  10. Ma questa tecnica puo essere utilizzata anche per fissare un div lateralmente (a destra)? Ad esempi anche se abbiamo una pagina lunga e si scorre il contenuto questo box rimane sempre in primo piano, a destra ovviamente…è possibile?

  11. Ooooooh! e finalmente, ho girato ovunque, forum blog e presunti siti per webmasters ma la soluzione semplice ed efficace l’ho trovata qui, io dovevo semplicemente impostare una barra a fondo pagina stile Wibiya e con questo codice ci sono riuscito, funziona con Firefox 9, IE9 e Chrome.
    Non mi soffermo mai a dare un commento ma un grazie lo dovevo dopo tante ricerche.

  12. Se volessi utilizzarlo come link (ad esempio una freccia che punta in alto) con cui puoi tornare all’inizio della pagina? basterebbe togliere la parte in js del tutto inutile in questo caso giusto?

Commenti