Salve a tutti,
più passa il tempo e più mi convinco del fatto che i css siano tanto potenti e flessibili quanto rognosi...
Perché dico questo?
Beh, sarà una mia maledizione, ma una volta per un motivo, una volta per un altro, questo odiosissimo css non ne vuol sapere di funzionare come dovrebbe!
Dunque. Partiamo con il codice dell'intero foglio di stile, così potremo parlare in termini concreti...
html, body{
width: 100%;
height: 100%;
margin: 0;
text-align: center;
background-image: url(../img/background.jpg);
font-family: verdana;
}
#main{
margin: 0 auto;
width: 920px;
height: 100%;
background-image: url(../img/background-main.jpg);
}
ul#menu{
list-style-type: none;
text-align: center;
}
ul#menu li{
float: left;
display: inline;
width: auto;
margin: 0;
padding: 8em;
}
/* Tags HTML ridefiniti */
a:link, a:visited, a:hover{
font-size: 88.6%;
font-weight: bold;
color: #115100;
}
a:visited{
color: 014186;
}
h1, h2, h3, h4{
text-align: center;
}
p{
margin: 0 auto;
width: 85%;
font-size: 76.3%;
text-align: left;
}
/* Classi */
.invisible{
display: none;
}
.welcome{
font-size: 88.6%;
}
Il risultato che ottengo è visibile qui:
http://www.titengodocchio.it
Ora si parte con le due domandine! :-)
1. Il blocco "Perché questo sito" presente nella homepage che ho linkato sembra che stia "flottando" così come dovrebbero fare le voci del menu. Ovviamente io non voglio che ciò avvenga e, almeno in teoria, questa situazione non dovrebbe verificarsi! Però purtroppo ciò accade sia con IE che con FF...Chi mi aiuta a capirci qualcosa? Cosa ho sbagliato? E soprattutto, come posso sistemare la faccenda?
2. l'intestazione "menu principale" è associata alla classe "invisible". Di conseguenza ne deduco che non dovrebbe essere visibile a schermo, o sbaglio?
Evidentemente sbaglio, perché si vede benissimo! Ma allora come renderla definitivamente invisibile? (non posso rimuoverla del tutto per motivi legati all'accessibilità).
