Onglet actif défaillant [Résolu]

[ade-9774]

Bonjour à ceux qui répondront. Alors, mon probleme s'effectue quand je veux faire en sorte que mon onglet actif est la ligne du bas blanche ou n'importe qu'elle couleur... enfin qu'elle disparraisse quoi. Malheureusement aucun des codes ne marche Aidez moi svp
Merci

Code :

1
2
3
4
5
6
7
.onglet-actif {position:relative ;
                   top:1px ;
                   background: #fff; 
                   border-bottom: #FFF;}
 
.onglet-actif {...
                   border-bottom: none;}

[Atomya Rise]

Le problème ici, c'est que tu définis deux fois la même class, donc, cela ne peux fonctionner...

Pour définir quelque chose en actif, c'est exactement le même système que l'hover, cela permets de changer l'état de "l'objet" selon l'action (qui dans le hover est un passage souris (onmouseover)) :

Code css :

1
2
a { color: #000; }
a:hover { color: #fff; }

donc, pour l'active c'est pareil, lors du clic on demande un changement d'état :

Code css :

1
2
3
4
5
6
.onglet-actif {position:relative ;
                   top:1px ;
                   background: #fff; 
                   border-bottom: #FFF;}
 
.onglet-actif:active { border-bottom: none;}

[Candygirl]

Hello,

@Atomya Rise

Je crois que l'OP parle de l'onglet de la page active et non de l'état actif. De plus, s'il y a deux fois la même classe, c'est parce qu'il présente deux codes différents qu'il/elle a testé sans succès pour arriver à son résultat.

@ade-9774

Il faut que tu poste l'intégralité du code de tes onglets (HTML et CSS), ainsi que ce qui suit directement si tu veux qu'on puisse t'aider efficacement.

[ade-9774]

Bon apparemment rien ne marche mais je vais vous passez les codes coumme même

CSS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul#tabnav {font: bold 14px comic sans MS, verdana, arial, sans-serif;
          list-style-type: none;
          margin: -15px;}
ul#tabnav li{float: Left;
            height: 24px;
            background-color: blue sky;
            margin: 10px -25px 2px;
			margin-right: 25px;
            border: 1px solid #0000FF;}
#tabnav a {float: left;
          display: block;
          color: black;
          text-decoration: none;
          padding: 3px;}	
#tabnav a:hover {background: #fff;
                width: 95px;}
#tabnav li {width: 100px;}
.onglet-actif {position:relative ;
                   top:1px ;
                   background: 25px #fff;}

HTML :

Code :

1
2
3
4
5
6
7
8
<div id="bandeau">  <ul id="tabnav">
		                            <li class="onglet-actif"><a href="C:\wamp\www\Test\Lifenet - Accueil.php">Accueil</a></li>
					    <li><a href="C:\wamp\www\Test\Lifenet - Actualitees">Actualitées</a></li>
                                            <li><a href="C:\wamp\www\Test\Lifenet - Profil.php">Profil</a></li>
                                            <li><a href="C:\wamp\www\Test\Lifenet - Amis.php">Amis</a></li>
                                            <li><a href="C:\wamp\www\Test\Lifenet - Msn.php">Msn</a></li>
			                </ul>
        </div>

Merciii a ce qui réponderont avec succes

[ornitho13]

Salut,

pour rajouter une couleur de bordure sur la partie basse, voici ce qu'il faut utiliser comme propriété :

Code css :

1
2
 
border-bottom-color:#fff;

si tu veux utiliser le border-bottom, il faut lui attribuer un style et une épaisseur de bordure :

Code css :

1
2
 
border-bottom:1px solid #fff;

[ade-9774]

Rien...
je l'avais déjà essayé !! Mais je ne trouve pas.

[tigunn]

Salut

Je ferais comme cela:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
ul#tabnav li{float: Left;
            height: 24px;
            background-color: blue sky;
            margin: 10px -25px 2px;
			margin-right: 25px;
            }
...
#tabnav li {width: 100px;
			border: 1px solid #0000FF;}
#tabnav li.onglet-actif {position:relative ;
                   top:1px ;
                   background: 25px #fff;
                   border-bottom-style: none;}

Ce code fonctionne sous FF 4.0.1 .
Bonne continuation.
Et pour la prochaine fois: Bonjour a tous et merci à tous .
Si le pb est résolu, merci de le signaler "Résolu".

[ade-9774]

Merçi a TOUT ceux qui ont répondu ^^
et particulièrement a tigunn !!! Le code marche, probleme RESOLU