Visto che in tanti mi avete consigliato di evitare i Frames nella mio Homepge ho "studiato" e ho cercato di usare i css per avere l'effetto frames con barra laterale sinistra fissa.
Ora però ho alcuni problemi.
Prima di tutto nell'esempio che ho trovato io per fare questa cosa, come tag per emttere il foglio di stile all'interno della apgina mi hanno dato:
Codice HTML:
<style type="text/css" media="screen">@import url(stile.css );</style>
E mi chiedevo è meglio quello o il classico:
Codice HTML:
<link rel="stylesheet" type="text/css" href="style_pagine.css">
--------------------------------------------------
Poi ho un problema con i link della barra laterla. Io vorrei che li le scritte fossero arancioni e quando passo col mouse diventino verdi. Ma poi anche se sono link visitati restino ancora arancioni. Io ho messo le impostazioni ai link ma devo aver fatto qualche casotto.
Vi lascio il codice del css, mi ci date un occhiata e mi dite anche se è secondo voi corretto nella sintassi? Il W3C, barra di scorrimento laterare a parte lo convalida, ma non sono sicura di quel che ho programmato.
Il codice del css:
Codice HTML:
body {
margin: 0;
padding: 0 0 0 135px;
color: #FF6600;
background: #FFFFCC;
background-image: url(immagine-sfondo.gif);
font-family: Garamond;
font-weight: bold;
SCROLLBAR-FACE-COLOR: #FF6600;
SCROLLBAR-ARROW-COLOR: #FFFFCC;
}
#menu{
overflow: auto;
height: 100%;
width: 15%;
position: absolute;
top: 0;
left: 12px;
padding: 15 0 0 0px;
color: #FF6600;
background: #FFFFCC;
background-image: url(immagine-sfondo.gif);
font-family: Garamond;
font-size: 16px;
font-weight: bold;
SCROLLBAR-FACE-COLOR: #FF6600;
SCROLLBAR-ARROW-COLOR: #FFFFCC;
}
#menu a:link, a:active, a:visited {
color: #FF6600;
text-decoration: none;
font-weight: bold;
}
#menu a:hover {
color: #FF6600;
text-decoration: underline;
font-style: normal;
}
#content {
padding: 0 1px 2px;
font-size: 18px;
top: 0;
}
#content a:link, a:active, a:visited {
color: green;
text-decoration: none;
font-weight: bold;
}
#content a:hover {
color: green;
text-decoration: underline;
font-style: normal;
}
#content h2 {
color: #B500B5;
font-size: 34px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 0px;
}
#content h3 {
color: #B500B5;
font-size: 24px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
#content h4 {
color: #B500B5;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
#content .scrittine {
color: #B500B5;
font-size: 18px;
font-style: normal;
font-weight: bold;
}
#content div.hr {
display: block;
background-image: url(barretta.gif);
height: 0px;
background-repeat: no-repeat;
background-position: center center;
margin: auto auto;
}
#content .table {
color: #FF6600;
font-size: 18px;
width: 800px;
font-weight: bolder;
} /* tabella testo */
#content .tablehome {
color: #FF6600;
font-size: 16px;
width: 700px;
font-weight: bolder;
} /* tabella testo */
#content .tablediritti {
color: #B500B5;
font-size: 13px;
font-weight: bolder;
} /* tabella testo */
#content .table.glitter, table.glitter td {
border: 2px dotted #FF6600;
font-size: 12px;
}/* tabelle */
#content .tablesmile {
border: 2px dotted #FF6600;
color: black;
font-family: Verdana;
font-size: 12px;
padding: 5px 5px 5px 5px;
border-collapse: collapse;
} /* tabelle classiche con bordino */
p{
margin:0;
padding:5px;
}
@media screen
{
body>div#menu
{
position: fixed;
}
}
| | |
| CSS | Fogli di Stile | | |
| | |
| | |
| Link | Collegamento Ipertestuale | | |
| | |
| | |
| Tag | tag sono le marcature del linguaggio che permettono la formattazione della pagina | | |
| | |
| | |
| URL | (Uniform Resource Locator) è un indirizzo di una risorsa in Internet | | |
| | |
| | |
| W3C | World Wide Web Consortium | | |
| | |