[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]
Sei qui: Home > Articoli > Banner per Opera con i CSS
Creare un banner con i CSS è una valida alternativa all'uso di immagini. La nostra prima preoccupazione sarà quella di scegliere una marcatura che permetta la fruizione del banner anche con i CSS disabilitati. Volendo creare un banner per il browser Opera sulla falsariga di quelli presenti per altri browser, la marcatura potrebbe essere:
<p id="banner"> <span id="go">»</span> <a href="http://www.opera.com/" id="opera">Opera</a> </p>
Usando un elemento di blocco ci assicuriamo che il link al sito del browser venga sempre visualizzato su una nuova riga con i CSS disabilitati. L'entità '»' ha in questo caso un puro valore presentazionale, e può essere sostituita da un'immagine. Essa comunque non ha alcun impatto sulla fruizione del banner. Il relativo CSS potrebbe quindi essere il seguente:
p#banner {
width: 9em;
font-size: 80%;
height: 1.5em;
background: #fff;
color: #000;
margin: 0;
padding: 0;
border: 1px solid #000;
}
span#go {
float: left;
width: 4em;
margin: 0;
height: 1.5em;
line-height: 1.5em;
text-align: center;
font-weight: bold;
}
a#opera:link,
a#opera:visited,
a#opera:hover {
float: right;
margin: 0;
height: 1.5em;
line-height: 1.5em;
width: 5em;
background: #a00000;
color: #fff;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
Internet Explorer 5 Windows ha bisogno del seguente codice per visualizzare correttamente il banner senza estenderlo in altezza al passaggio del mouse:
<!--[if lt IE 7]>
<style type="text/css">
a#opera:link,
a#opera:visited,
a#opera:hover {
width /**/: 4.8em
}
</style>
<![endif]-->
Qui potete vedere il risultato finale. Se disabilitiamo i CSS noteremo come il banner resti perfettamente fruibile.