Come aggiungere un banner centrato in alto nella pagina 14 Novembre, 2007
Categorie:guide, Wordpress.CommentiProseguendo 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).
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
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;
}
E bravo Raffaele, Cristiano mi ha sempre fatto una capa tanta su di te veramente… Grazie di avermi messo tra i delicious… A presto
bella guida
Ma i banner pubblicitari nei blog non sono una palla ? Non vi danno fastidio ? Io non li reggo…. spero non si offenda nessuno ;O)
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 
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….
saluti da Napoli. Blog interessante aggiunto al mio google reader. passa a trovarmi su Deviant Art
Ciao Carlo grazie per la visita, ti ricambio volentieri subito ed inoltre aggiungo il tuo link nell’apposita sezione
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:)
Guida semplice per veri dummies. Ma chi non stato un vero dummy?
Ciao Giacomo grazie. Dummy?? Perch non lo siamo un po tutti noi??
Vittime? Lo siamo tutti (cit. Il Corvo)
Era proprio quello che stavo cercando anche se nel mio blog i banner da posizionare in testata sono 2, ora provo….
TI basta mettere un <br /> per andare a capo prima del secondo banner, dovrebbe funzionare senza problemi. Anche un terzo banner e cos via
[...] (chiamato style sheet generalmente e presente in tutti i temi) e l’home page. Vi rimando a un ottimo post di Traffyk se volete sapere come fare.Mimetizzare tanto gli annunci di AdSense è antietico? Devo dire di sì, [...]