menu con hover tranne il tasto della pag corrente

**marco19to** · 25-09-2012, 13:33

ciao a tutti sono marco qualcuno mi può aiutare?
ho un menu che con la funzione hover mette un margine inferiore al passaggio del mause. devo però far in modo che nella pag in cui sono il border-bottom non compaio neanche al passaggio del mouse. come posso fare?
ecco il codice e i css
grazie mille

<ul id="nav">[*]Home
<li class="trat">[*]Chi siamo
<li class="trat">[*]Servizi
<li class="trat">[*]Blog
<li class="trat">[*]Contatti[/list]

ul#nav{
height:30px;
padding-left:70px;}

ul#nav li{
float:left;
padding:0px;
font-size:15px;
margin-right:10px;
text-align:left;
font-weight:700;
height:27px;
padding-top:1px;
display:block;}

ul#nav li a{
text-align:left;
font-weight:700;
display:block;
padding-top:1px;}

ul#nav li a:link{
float:left;
padding:0px;
font-size:15px;
margin-right:10px;
text-align:left;
font-weight:700;
display:block;
height:27px;
padding-top:1px;}

ul#nav li a:visited{
float:left;
padding:0px;
font-size:15px;
margin-right:10px;
text-align:left;
font-weight:700;
display:block;
height:27px;
padding-top:1px;}

ul#nav li a:hover{
float:left;
font-size:15px;
margin-right:10px;
text-align:left;
font-weight:700;
border-bottom:solid 3px #c13735;
display:block;
height:27px;
padding-top:1px;}

ul#nav li a:active{
float:left;
padding-top:1px;
font-size:15px;
margin-right:10px;
text-align:left;
border-bottom:solid 3px #c13735;
height:27px;
color:#c13735;}
.active{border-bottom:none;color:#c13735;}

perchè non mi prende la non sottolineatura con questa classe e annulla l'hover?

**codencode** · 25-09-2012, 14:01

Modifica così:

codice:

.active{border-bottom:none !important;color:#c13735;}

**marco19to** · 25-09-2012, 14:33

grazie mille ora funziona bene ciao ciao

**marco19to** · 25-09-2012, 14:41

visto che è la seconda volta che mi risolvi un problema ti faccio un'altra domanda.
quel sito a cui sto lavorando mi da un problema che non avevo mai riscontrato e che non mi so spiegare. il file html lo salvo su una cartella di dropbox e altre due persone aprendo quel file html vedono il menu in modo diverso rispetto a me. io vedo il menu di home e contatti le due pag fatte perfettamente sovrapposto come è normale pensare che sia dal momento che il nome della classe è sempre la stessa e entrambe le pag hanno un div di 950 px centrato automaticamente con margin-left e right auto. il menu ha le seguenti proprietà:
.menulin{
background:#d3d4d6;
padding-bottom:27px;
padding-top:10px;
width:100%;}

e contiene al suo interno altre 3 classi affiancate con float left

il problema è che io vedo le icone e i tasti perfettamente sovrapposti quando passo da una pag all'altra mentre altre due persone aprendo il file della cartella di dropbox vedono le icone di 5/6 px spostate lateralmente. allora ho creato un ulteriore margine per una sola pag e io lo vedo sfalzato e loro no. com'è possibile una cosa del genere? da cosa dipende?
grazie mille dell'attenzione

**codencode** · 25-09-2012, 14:54

Detto così, senza poter vedere nulla, è difficile rispondere.
Quello che mi viene da pensare è che loro vedano le pagine con un browser diverso dal tuo.

**marco19to** · 25-09-2012, 15:24

no no io lo vedo sia con firefox chrome e ie nello stesso modo e loro anche solo con la sfasatura. ecco tutto il codice

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="it">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="corpohome">
<div class="corposito">

<div class="header">

<div class="menulin">
<a href="home.html"><div class="logo">
</div></a>
<div class="menu">
<div class="sep"></div>
<ul id="nav">[*]Home
<li class="trat">[*]Chi siamo
<li class="trat">[*]Servizi
<li class="trat">[*]Blog
<li class="trat">[*]Contatti[/list]
<div class="sep meno"></div>
</div>
<div class="social">
<div class="icon fac"></div>
<div class="icon twi"></div>
<div class="icon pin"></div>
<div class="icon lin"></div>
</div>
<div class="canc"></div>
</div>

[img]images/servizi.png[/img]
<map id="_mappa" name="mappa">
...
</map>
[img]images/sfumatura-bianca.png[/img]

<div class="separatore"></div>
<div class="canc"></div>
</div>
<div class="canc"></div>
<div class="sidebar">

...
</div>

<div class="blog">
...
</div>

<div class="canc"></div>

</div>
<div class="footer">
<div class="separatore"></div>

...</p>
</div>
</div>
</body>
</html>

body {font-family: 'quicksand', Times, serif;background:#ffffff;}
.corpohome{width:100%;height:100%;background:url(i mg/slice.jpg) repeat-x;}
h1 {font-size:18px;}
h2{font-size:17px;}
h3{font-size:14px;}
h4{font-size:13px;}
p{font-size:14px;}
a {color:#2b2b2b;}
a{text-decoration:none;}
a:hover {text-decoration:none;}
.corposito{width:950px;margin-left:auto;margin-right:auto;background:#ffffff;color:#3f3f3f;font-weight:550;}
.header{width:100%;height:546px;background:#d3d4d6 ;}
.menuround{margin-top:100px;width:950px;height:546px;}
.men{margin-top:66px;width:950px;height:474px;position:absolut e;z-index:0;}
#mappa{border:solid 1px;}
.trasp{margin-left:74px;width:802px;height:546px;z-index:1;margin-top:-13px;}
.separatore{width:887px;height:12px;background:url (img/righe-sotto-pallone.png) no-repeat;margin-left:auto;margin-right:auto;}
.blog{width:550px;float:left;padding:20px;margin-top:110px;margin-left:10px;}
.blog h2{font-weight:550;margin-top:10px;}
.box{margin-bottom:20px;}
.anteprima {width:90px;height:119px;border:solid 1px #dfdfdf;padding:3px;float:left;}
.textpart{width:402px;margin-left:20px;float:left;padding-top:3px;}
.textpart h2, .textpart a{color:#f54245;text-align:left;font-weight:400;}
.textpart p{text-align:justify;font-weight:400;}
.division{width:410px;}
.line{width:335px;height:3px;background:url(img/riga-blog.png) no-repeat;float:left;}
.leggi{width:58px;height:24px;background:url(img/leggi.png) no-repeat;float:left;margin-left:10px;margin-top:-10px;}
.footer{width:100%;padding-bottom:0px;margin-bottom:0px;background:#ffffff;border:solid 1px;}
.footer p{text-align:center;font:12px;margin-top:5px;color:#2d2d2d;border:solid 1px;}
.canc{clear:both;}
/*CSS MENU______________________________________________ ______________________________________*/
.menulin{background:#d3d4d6;padding-bottom:27px;padding-top:10px;width:100%;}
.logo{float:left;width:121px;height:60px;backgroun d:url(img/logo.png) no-repeat;margin-left:35px;}
.menu{float:left;margin-top:18px;height:47px;margin-left:25px;margin-right:25px;}
.sep{width:570px;height:8px;background:url(img/righe-menu.png) no-repeat;}
.meno{margin-top:-13px;}
ul#nav{height:30px;padding-left:70px;}
ul#nav li{float:left;padding:0px;font-size:15px;margin-right:10px;text-align:left;font-weight:700;height:27px;padding-top:1px;display:block;}
ul#nav li a{text-align:left;font-weight:700;display:block;padding-top:1px;}
ul#nav li a:link{float:left;padding:0px;font-size:15px;margin-right:10px;text-align:left;font-weight:700;display:block;height:27px;padding-top:1px;}
ul#nav li a:visited{float:left;padding:0px;font-size:15px;margin-right:10px;text-align:left;font-weight:700;display:block;height:27px;padding-top:1px;}
ul#nav li a:hover{float:left;font-size:15px;margin-right:10px;text-align:left;font-weight:700;border-bottom:solid 3px #c13735;display:block;height:27px;padding-top:1px;}
ul#nav li a:active{float:left;padding-top:1px;font-size:15px;margin-right:10px;text-align:left;border-bottom:solid 3px #c13735;height:27px;color:#c13735;}
.active{border-bottom:none !important;color:#c13735;}
.active:hover{}
.trat{width:9px;height:5px;background:url(img/trattino-menu.png) no-repeat;margin-top:12px;}
.social{float:left;height:40px;margin-top:23px;}
.icon{width:35px;height:35px;float:left;}
.icon:hover{margin-top:-5px;}
.fac{background:url(img/facebook.png) no-repeat;}
.twi{background:url(img/twitter.png) no-repeat;}
.pin{background:url(img/linkedin.png) no-repeat;}
.lin{background:url(img/pinterest.png) no-repeat;}
/*CSS SIDEBAR___________________________________________ ______________________________________*/
.sidebar{width:260px;float:left;padding:20px 20px 20px 40px;margin-top:110px;margin-left:20px;}
.sidebar h2{float:left;margin-bottom:10px;font-weight:550;margin-top:10px;margin-left:15px;}
.boxtwi, .boxfac{width:250px;border:solid 1px #d3d4d6;clear:left;}
.boxtwinterno, .boxfacinterno{border:solid 1px #ffffff;background:#d3d4d6;padding:10px;width:228p x;}
.boxfacinterno{}
.cont{margin-left:10px;width:180px;float:left;}
.boxtwinterno p{text-align:justify;width:180px;margin-bottom:0px;}
.boxtwinterno span{color:#ffffff;}
.iconbird{width:24px;height:26px;background:url(im g/twitter_blu.png) no-repeat;float:left;margin-bottom:10px;margin-left:10px;margin-top:10px;}
.icontweet{width:20px;height:20px;background:url(i mg/twitter_blu_piccolo.png) no-repeat;float:left;}
.septwi{width:216px;height:10px;background:url(img/linee-twitter.png)no-repeat;margin-left:5px;margin-top:10px;margin-bottom:10px;}
.iconpag{width:33px;height:33px;border:solid 1px;float:left;}
.boxfacinterno p{text-align:left;width:190px;margin-bottom:0px;float:left;border:solid 1px;color:#2b4b98;fotn-size:11px;}
.boxfacinterno span{font-weight:400;}
.like{width:52px;height:17px;border:solid 1px;float:left;}
.partner {width:230px;padding-left:16px;}
.partner p{margin-bottom:0px;font-size:15px;}
.partner a>p{text-decoration:underline;margin-bottom:-10px;}

se ti serve anche quello dell'altra pag fammelo sapere thanks

**codencode** · 25-09-2012, 15:33

Puoi allegare due screenshot, uno che mostri come lo vedi tu e uno che mostri come lo vedono loro?

Discussione: menu con hover tranne il tasto della pag corrente

Strumenti discussione

Ricerca discussione

Visualizza

menu con hover tranne il tasto della pag corrente

Permessi di invio