Menù CSS da file in cartella esterna

Veronica_

Nuovo Utente
29 Apr 2018
9
0
1
21
Buonasera,
Sto cercando di creare un menù con quattro semplici link.
Il problema è che siccome il file css deve essere per forza esterno al file HTML (comandi dettati dal professore) non riesco a farli comunicare e il risultato è una lista di link in HTML semplici.
Questo che segue è il codice HTML:
HTML:
<html>
    <head>
        <title>
            Volontariato
        </title>
    </head>
<body style="background-color: black;">
            <div id="footer" style="background-color: white; height: 700px;">
                <div id="Menu">
                    <ul>
                        <li class="voceMenu"><a href="ServizioCivile.html">Servizio Civile</a></li>
                        <li class="voceMenu"><a href="dischi.html">BLS-D</a> </li>
                        <li class="voceMenu"><a href="libri.html">bla bla</a> </li>
                        <li class="voceMenu"><a href="film.html">bla bla</a> </li>
                    </ul>
                </div>
            </div>
            
    </body>



</html>
e questo è il file CSS esterno:
Codice:
.voceMenu {
    list-style-type:none;
    background-color:white;
    border:2px solid black;
    border-radius:20px;
    width:75%;
    padding:3px;
    text-align:center;
}
.voceMenu:hover {
    background-color:#ddd; font-size:100%;
    animation: animazione 1s;
}

@keyframes animazione {
    0% {    background-color:white; }
    100% {    background-color:#ddd; font-size:130%;}
}

.testata {
    background-color:#000099;
    height:20%;
    line-height:100px;
    text-align:center;
}
.centrale {
    background-color:#000099;
    height:70%;

}
.contenuto {
    vertical-align:top;
        background-color:#00FF00;

    height:100%;
    width:70%;

    display:inline-block;
}
.menu {
    vertical-align:top;
    background-color:#CCFF00;
    height:100%;
    width:30%;

    display:inline-block;
}
.fondoPagina {
    background-color:#FF0000;
    height:10%;
    line-height:50px;
    text-align:center;
}
.bottone {
    background-color:red;
    border-radius:5px;
    border:2.5px solid black;
    padding:2px;
}

Potete darmi una mano a capire l'errore e risolverlo? Grazie mille :D
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.388
338
83
nella root principale metti un file con nome style.css dentro al file metti tutto il tuo codice css sempre nella root principale metti la tua pagina html dove tra i tag <head>...</head> metti questo codice
HTML:
<link href="style.css" rel="stylesheet" type="text/css">
Ricorda che il colore di sfondo del body è meglio metterlo nel css non in linea nel tag body e il DTD è meglio sia html5
 

Veronica_

Nuovo Utente
29 Apr 2018
9
0
1
21
Grazie mille, adesso funziona. Una curiosità: per il javascript, sostituendo "style.css" con "style.js" e il "type", è la stessa sintassi?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.388
338
83
Codice:
<script src="style.js" type="text/javascript"></script>
 
Discussioni simili
Autore Titolo Forum Risposte Data
blacksbugs Cambiare sfondo alle voci dei menù [CSS] HTML e CSS 3
W [CSS] Menù dropdown aggiungere un SUB-Menu HTML e CSS 0
L problema con menù css HTML e CSS 1
cervelliamo realizzato menù a tendina con css, internet explorer non lo legge bene HTML e CSS 15
T Menù e CSS HTML e CSS 2
L Menù ad espansione con js css HTML e CSS 0
F menù select dinamico da db in php PHP 3
L Menù con switch case C/C++ 1
J Richiama descrizione da menù PHP 11
Z Menù di navigazione responsivo HTML e CSS 0
R Barra del menù principale decentrata Joomla 4
M Stringa con spazi nel menù a tendina PHP 4
A Menù a tendina collegato a database PHP 13
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
C [PHP] Form inserimento più menù a discesa PHP 9
W [Javascript] [HTML] menù responsive fisso Javascript 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
F [HTML] Responsive menù Content Management System (CMS) 0
A [PHP] menù con links esterni PHP 6
D Come inserire opzioni menù prelevandole dal database con PHP ? PHP 12
F [HTML] li menù width HTML e CSS 3
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
F Problema hover voce di menù Javascript 2
F Nascondere menù onclick sottovoce jQuery 0
F Active menù HTML e CSS 2
A menù a tendina aiuto PHP 1
M Menù a tendina editabile HTML e CSS 0
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
F Link menù attivo categoria PHP 2
MarcoGrazia Breadcrumbs, menù a briciole di pane Snippet PHP 2
I nav menù HTML e CSS 13
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
C Menù scomparso WordPress 2
V Posizionare Iframe e menù a discesa HTML e CSS 1
F z-index menù HTML e CSS 4
Tommi Script per menù Javascript 16
Licantropo esportare tags e menù Joomla 0
F Menù a tendina Joomla 4
L [PHP] 3 menù Select OPTION consecutivi PHP 1
Carlito's Menù jQuery 1
E Menù da modificare HTML e CSS 2
H Menù a discesa contenente dati db, la scelta dal menù deve essere inviata in un altro db. PHP 1
andreaco Problema menù a scomparsa laterale HTML e CSS 10
L Inserisco 2 menù e vedo sempre il primo PHP 0
E Problemi con menù a cascata HTML e CSS 0

Discussioni simili