n° 219
Novembre 2017
Ottobre 21, 2017, 12:35:33 *
Benvenuto! Accedi o registrati.
Hai dimenticato l'e-mail di attivazione?

Accesso con nome utente, password e durata della sessione
Notizia:
 
   Indice   Linux Windows Techassistance Gameassistance videogame hardware Aiuto Ricerca Agenda Downloads Accedi Registrati  


* Messaggi recenti
Messaggi recenti
Pagine: [1]   Vai gi¨
  Stampa  
Autore Discussione: Men¨ a tendina  (Letto 1056 volte)
0 utenti e 1 Utente non registrato stanno visualizzando questa discussione.
Michela12
Newbie
*

Karma: +0/-0
Scollegato Scollegato

Messaggi: 3


Mostra profilo E-mail
« inserita:: Luglio 04, 2017, 12:23:44 »

Ciao a tutti, sono nuova nel forum. Sono diplomata in informatica e vorrei iniziare a lavorare su questo ambito, per questo sto realizzando il mio primo sito con un server Apache. Ovviamente sto incontrando abbastanza problemi e ora ne ho uno che non riesco a risolvere.
In questo sito, nella barra di navigazione ho alcune voci, tra cui una denominata AttivitÓ. Al passaggio del mouse (quindi :hover) su quest'ultima, si dovrebbe aprire un men¨ a tendina con altre 4 voci che sto provando a realizzare con il CSS, ma non mi funziona bene. Il codice della pagina Ŕ questo:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo|Fira+Sans">
<html lang="it">
<header>
<div>
<div style="float:left; margin-left:40px;">
<img src="images/logo-azienda.jpg" alt="Logo azienda" width="190px" height="190px">
</div>
<div style="float:right; margin-right:50px;">
<img src="images/biglietto-visita.jpg" alt="Biglietto da visita azienda" width="400px" height="190px">
</div>
</div>
</header>
<link rel="stylesheet" href="css/style.css" type="text/css">
<div>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="mezzi-attrezzature.php">Mezzi e attrezzature</a></li>
<li><a id="tendina">AttivitÓ</a>
<ul style="display:block;">
<li><a href="formazione.php">Formazione</a></li>
</ul>
</li>
<li><a href="news.php">News</a></li>
<li><a href="contatti.php">Contatti</a></li>
</ul>
</nav>
</div>
</head>
<body>
<h1>Sito in via di costruzione</h1>
</body>
</html>


Mentre il codice CSS Ŕ il seguente:

/*Barra di navigazione*/
nav{height:50px;width:100%;background:#00317d;font-size:100%;text-align:center;}
nav ul{width:100%;height:50px;margin:0;border:0;padding:0;font-size:100%;}
nav li{display:inline-block;float:left;width:20%;height:50px;}
nav li a{color:#FFFFFF;line-height:50px;text-decoration:none;font-family:'Arimo',sans-serif;font-size:20px;}
nav ul li a:hover{color:#00317d;background:#efd423;display:block;width:100%;} /* #00317d blu #efd423 giallo*/

/*Men¨ a tendina*/
#nav #tendina{color:#00317d;cursor:pointer;}
#nav{list-style:none outside none;}
#nav li{font-family:'Arimo', sans-serif;text-align:center;line-height:50px;width:100%;}
#nav li a{text-decoration:none;color:white;font-size:20px;font-weight:300;}
#nav ul{list-style:none outside none;}

/*Header*/
header{width:100%;position:relative;height:200px;}

/*Classi*/
div.logo{border-left:20px;}
p.subtitle{font-family:'Fira+Sans',sans-serif;font-size:20px;color:#00317d;}



In poche parole, la scritta Formazione che dovrebbe comparire sotto compare, ma la vedo male, sia perchŔ non viene fuori al passaggio del mouse sopra AttivitÓ, sia perchŔ non ha la stessa lunghezza del blocco AttivitÓ.
Ho notato che se su <li> di Formazione ci aggiungo style="width:100%;" il blocco Formazione assume ovviamente la stessa lunghezza di AttivitÓ. Il che mi fa pensare che la regola #nav li non viene applicata, visto che il width l'ho messo anche lý. Qualcuno pu˛ aiutarmi?
Mi auguro di essermi spiegata bene. Sono alle prime armi con i siti, questo Ŕ il primo che faccio e mi sto documentando su internet per le cose che non so e che a scuola non mi hanno imparato. I fogli di stile in CSS li ho studiati su guide e manuali che ho trovato su Google, quindi Ŕ probabile che l'errore sia lý visto che li conosco veramente poco. Grazie mille a chi mi aiuterÓ!  Che?!?
Registrato
michele.p
Administrator
Full Member
*****

Karma: +8/-2
Scollegato Scollegato

Messaggi: 567


Mostra profilo
« Risposta #1 inserita:: Luglio 04, 2017, 11:41:00 »

La migliore sorgente di informazioni in questi casi Ŕ il W3C. Dai un'occhiata all'uso base di hover per arrivare fino ai men¨ a discesa.  Sorriso

https://www.w3schools.com/cssref/sel_hover.asp

Cliccando sui pulsanti Try it yourself verrÓ aperto l'editor e "lanciato" il foglio di stile per vederne l'effetto.
Registrato
Michela12
Newbie
*

Karma: +0/-0
Scollegato Scollegato

Messaggi: 3


Mostra profilo E-mail
« Risposta #2 inserita:: Luglio 05, 2017, 08:07:59 »

Grazie, ci guardo e poi provo a risolvere!  Ghigno
Registrato
Pagine: [1]   Vai su
  Stampa  
 
Vai a:  

Copyright © 2017 Edizioni Master SpA. p.iva : 02105820787

Tutti i diritti di proprietà letteraria e artistica riservati. - Privacy



powered by Simple Machines