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).
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
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ì, [...]