Come aggiungere un banner centrato in alto nella pagina

Proseguendo sul lavoro di ottimizzazione e gestione delle testate dei blog come gia annunciato ieri, oggi pubblico questa miniguida per il posizionamento di un banner pubblicitario centrato, o comunque qualsiasi altra cosa ci passi per la mente, sopra la nostra cara testata, o intestazione, del blog (ma anche un normalissimo sito web).

Banner Centrato HaHa


Credo che la stragrande maggioranza di blog, soprattutto quelli con WordPress utilizzano posizionamenti di tipo relativo dei div quindi non dovremmo avere problemi di posizionamento di questo livello aggiuntivo in quanto non tratter posizionamenti con misure assolute (altrimenti poi rischieremo di compromettere la navigabilit del sito stesso tramite dispositivi mobili, e anche computer un po pi datati con risoluzioni minori).

Il codice da inserire subito dopo il tag di apertura <body> questo principalmente:
<div>qui mettete il vostro codice</div>
Cos facendo posizioneremo un div nella parte pi alta del nostro blog ma non del tutto completa questa soluzione perch avremo lo spiacevole inconveniente di vedere esteso l’intero contenitore (in effetti i div sono una sorta di contenitori) per tutta la larghezza della pagina o peggio ancora potrebbe acquisire le caratteristiche di qualche div esistente nel caso di fogli di stile con propriet dichiarate per tutti i div senza stile.

A questo punto verr molto utile quindi dichiarare un id per il nostro contenitore che verr associato nel nostro foglio di stile al “rispettivo contenitore di valori” (scusatemi per il tipo di linguaggio ma per rendere l’idea).
<div id="banner-head">qui mettete il vostro codice</div>
Quindi ora basta aggiungere al nostro foglio di stile (in fondo alla pagina forse pi facile) le seguenti propriet:
#banner-head {
text-align:center;
width:730px;
margin:auto;
background: #fff;
}

Vediamo brevemente le propriet utilizzate:

  • text-align:center; Allinea tutto ci che contenuto nel nostro contenitore in posizione centrata, volendo possiamo utilizzare anche left, right oppure justify per avere un contenuto giustificato ma questo servirebbe in caso di righe di testo;
  • width:730px; la dimensione del nostro contenitore, ho impostato a 730 perch ho inserito un banner di 728pixel in larghezza e dopo vari test con i vari browser ho notato che meglio sempre abbondare di qualche pixel in pi per poter visualizzare correttamente l’immagine all’interno del browser (naturalmente il problema si verifica quasi sempre su Internet Explorer);
  • margin:auto; la propriet pi significativa dello stile, serve a posizionare in maniera perfettamente centrata il nostro contenitore, volendo possibile agire anche ponendo i margini left e right a 50% ma avremo lo stesso risultato;
  • background: #fff; infine il colore di sfondo, volendo potreste anche omettere questo valore utilizzando il colore di sfondo(o l’immagine) di base del vostro stile, ma nel caso aveste esigenze specifiche o comunque volete differenziare questa zona dal resto dei contenuti vi consiglio di utilizzarlo scegliendo il colore che pi riterrete opportuno.

Inoltre nel caso di banner grafici avremo un ultimo problemino, soprattutto se questi sono contenuti in dei collegamenti ipertestuali. I banner avranno dei bordi che naturalmente vorremo eliminare. Questo il codice per la seconda parte del nostro stile:
#banner-head a, #banner-head a:hover, #banner-head a:visited, #banner-head a:active{
border:none;
color:#0063dc;
}

Non c’ molto da commentare, ho eliminato il bordo per tutti i collegamenti (a), sia quando posizioniamo il mouse sul link (hover), sia quando un link gi stato visitato (visited) sia per quando clicchiamo su un link (active). L’ultimo parametro utilizzato il colore (nel mio caso un azzurrino-blu) ottimo per link testuali, naturalmente a voi la scelta di ometterlo o meno e di utilizzare il colore che pi vi piace. Ciao

Tag: ,

15 Commenti a “Come aggiungere un banner centrato in alto nella pagina”

  1. Cristiano ha detto:

    Bravo, la guida ben fatta e dettagliata: veramente alla portata di tutti.
    Per rendere completamente cross-browser lo stile da applicare al DIV (visto che denunciavi problemi di posizionamento dell’immagine con Explorer), sufficiente modificare il codice del CSS in questo modo (in grassetto le modifiche):

    #banner-head {
    text-align:center;
    width:730px;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    }

    TraffykTraffyk
    Perfetto, grazie mille Cristiano per la preziosa precisazione ora FireFox e Ie sembrano avere lo stesso comportamento inoltre ho scoperto che alcuni banner hanno una dimensione di 730 pixel ed anche per questo motivo uscivano fuori bordo. Riguardo al linguaggio utilizzato credo avrai capito il motivo della scelta, in effetti sarebbe bastato ricopiare il codice senza buttar giu tutte queste righe πŸ™‚
  2. Sara ha detto:

    E bravo Raffaele, Cristiano mi ha sempre fatto una capa tanta su di te veramente… Grazie di avermi messo tra i delicious… A presto

    TraffykTraffyk
    Salve Sara un piacere per me πŸ™‚ Cristiano mi parla sempre di te nei commenti πŸ˜› ehehe
  3. Daniele S. ha detto:

    bella guida

    TraffykTraffyk
    Eheh della serie “html for dummies” πŸ˜€
  4. tiziana ha detto:

    Ma i banner pubblicitari nei blog non sono una palla ? Non vi danno fastidio ? Io non li reggo…. spero non si offenda nessuno ;O)

  5. Traffyk ha detto:

    Ciao Tiziana benvenuta πŸ™‚ Concordo con te riguardo i banner pubblicitari, sono fastidiosi per attualmente sono il primo mezzo utile per monetizzare un sito web, non tutti hanno piacere nel pubblicare un blog o un sito senza guadagnarci qualche soldino.. anche se ci si ripaga le spese minime almeno dal mio punto di vista una soddisfazione se poi con quei soldi posso permettermi una pizza e magari farmi qualche regalino non mica una cattiva cosa πŸ™‚

  6. tiziana ha detto:

    Sar perch io la pizza spero di pagarmela con i quadri che riesco a vendere tramite il mio… blog, appunto !
    Per cui niente pubblicit a pagamento, solo tutti i colori del mondo ! Buona giornata a tutti….

    TraffykTraffyk
    Vabb il tuo uno degli tanti metodi possibili per guadagnare in internet, c’ chi vende prodotti, chi vende spazi e banner, chi vende recensioni, chi vende servizi.. come vedi in questo blog le pubblicit sono poche, e stanno sparendo piano piano ma in altri blog che curo invece le tengo visti i target di utenza molto diversi e quindi la mi conviene tenerle πŸ™‚ CiauuuZZ!!
  7. CarloV ha detto:

    saluti da Napoli. Blog interessante aggiunto al mio google reader. passa a trovarmi su Deviant Art

  8. Traffyk ha detto:

    Ciao Carlo grazie per la visita, ti ricambio volentieri subito ed inoltre aggiungo il tuo link nell’apposita sezione πŸ™‚

  9. annarita ha detto:

    B, Raffaele, non tutti vendono spazi o altro in Internet. Io ne sono un esempio…..per comincio a farci su un pensierino dato che mi dicono in molti ( amici) che faccio male.

    Per la guida, ottima! Grazie.
    Grazie anche a Cristiano per le solite, utili precisazioni.

    Un saluto carissimo a Sara Taricani:)

    TraffykTraffyk
    Beh chi lavora a tempo pieno non ha bisogno di banner πŸ™‚ Devi pensare anche a questo πŸ˜› Comunque possono essere sempre motivo di arrotondamento del proprio stipendio πŸ˜›
  10. Giacomo ha detto:

    Guida semplice per veri dummies. Ma chi non stato un vero dummy? πŸ˜‰

Lascia un Commento