Ecco il CSS
codice:
body {
font-family: Arial, Verdana, sans-serif;
font-size: 76%;
color: #1A2894;
background-color: #BAFFFE;
margin-top: 35px;
margin-right: 35px;
margin-bottom: 35px;
margin-left: 35px;
padding-left: 15em;
}
#sfondo {
background: #FFFFFF url(sfondo.jpeg) repeat fixed;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
h3 {
font-size: 175%;
}
a {
color: #1A2894;
text-decoration: none;
}
div.emph p {
font-size: 145%;
font-weight: bold;
color: #1A2894;
}
div.quoting p {
margin: 30px;
font-style: italic;
}
div#box1 {
background: #FEFFB1 /*#E0FFFD*/;
padding: 10px;
}
/*è necessario muovere l'elenco alla sinistra e muovere il resto del testo un pò a destra, per fargli spazio. Le proprietà CSS che useremo sono 'padding-left' in body (per muovere il testo del 'body') e 'position', 'left' e 'top' in navbar (per muovere il menu).*/
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 10em; /*sposta in basso*/
left: 3em; /*muove verso destra*/
width: 10em;
}
/*allunga il menu*/
/* 'position: absolute' dice che l'elemento 'ul' viene posizionato indipendentemente da ogni testo che viene prima o dopo di esso nel documento e 'left' e 'top' indicano qual'è la posizione. In questo caso, 2em dall'alto e 1em dal lato sinistro della finestra.
'2em' significa 2 volte la dimensione del font usato. Per esempio, se il menu viene mostrato con un font di 12 punti, '2em' è uguale a 24 punti. 'em' rappresenta un'unità molto utile nei CSS, poiché si può adattare automaticamente al font che utilizza il lettore. La maggior parte dei browser ha un menu per aumentare o diminuire la dimensione del font: si può provare, e vedere che il menu aumenta in dimensione come aumenta il font, cosa che non accade, invece, se si fosse usato una dimensione in pixel.
Il menu di navigazione sembra ancora un elenco, invece di un menu. Aggiungiamo allora un pò di stile. Toglieremo il pallino di elenco e sposteremo gli elementi a sinistra, là dove era il pallino. Daremo anche ad ogni elemento il suo sfondo bianco ed un rettangolo nero. (Perché? Nessun motivo particolare, solo perché possiamo.)
Non abbiamo ancora definito come dovrebbero essere i colori dei link, così aggiungiamoli: blu per i link che l'utente non ha ancora visitato e viola per i link già visitati:
Per tradizione, i browser mostrano i link con il sottolineato e con colori. In genere, i colori sono simili a quelli specificati qui nell'esempio: blu per i link a pagine che non sono state ancora visitate (o visitate molto tempo prima), viola per i link a pagine che sono state già visitate.
Nell'HTML, i link vengono creati con gli elementi <a>, così per specificare il colore, è necessario aggiungere una regola di stile per “a”. Per differenziare i link visitati da quelli non visitati, i CSS forniscono due “pseudo-classi” (:link e :visited). Queste sono chiamate “pseudo-classi” per distinguerle dalla classi attributi, presente direttamente in HTML, per esempio la class="navbar" nel nostro esempio. */
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #1A2894;
}
ul.navbar a {
text-decoration: none;
}
a:link {
font-weight: bold;
color: #1A2894;
}
a:visited {
font-weight: bold;
color: #1A2894;
}
img#ridimensiona {
width: 80%;
}
img {
display:block;
margin:0 auto; /* puoi cambiare il primo valore */
padding:50px 0px 50px 0px;
}
.nopadding img {
padding: 0;
}
M.
Permessi di invio
Rispondi quotando