Michela12
Nuovo Utente
- Messaggi
- 3
- Reazioni
- 0
- Punteggio
- 20
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à! :thanks:
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à! :thanks:
