Code css Menu mise en évidence

**Katachana** · 17/09/2007, 17h44

Bonjour,

Voila mon code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*----- Menu 11----- */
 
#menu11 {
width: 100%;
margin: 0px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
 
}
 
#menu11 ul {
list-style: none;
margin: 0;
padding: 0;
}
 
#menu11 li a {
height: 24px;
text-decoration: none;
}
 
 
#menu11 li a:link, #menu11 li a:visited {
color: #000000;
display: block;
background: url(../Images/boutons/menuclick.gif) 0% 0%;
padding: 8px 0 0 10px;
 
}
 
#menu11 li a:hover, #menu11 li a:active {
color: #005FB8;
display: block;
background: url(../Images/boutons/menuclick.gif) 0% -100%;
padding: 8px 0 0 10px;
}

Je n'arrive pas a trouver comment je peux laisser un onglet d'un couleur différente (#005FB8) lorsque je suis sur la page qui lui correpond . Pour l'instant un rafraichissement fait disparaitre l'onglet selectionné.

Code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="menu11" class="liensMenuGauche">
		<ul>
			<li><a href="#" title="Lien 1"></a></li>
			<li><a href="#" title="Lien 1" class="active"></a></li>
			<li><a href="#" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1"></a></li>
			<li><a href="#1" title="Lien 1">I</a></li>
		</ul>
		</div>

Merci d'avance !!

**Bisûnûrs** · 17/09/2007, 17h59

Modifie cette ligne là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menu11 li a:hover, #menu11 li a:active

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menu11 li a:hover, #menu11 li a:active, .active

Sachant que dans tes liens, cette ligne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="#" title="Lien 1" class="active"></a></li>

sera la ligne pour la page dans laquelle tu te trouves et celle-là :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="#" title="Lien 1"></a></li>

pour ls autres.

**Katachana** · 18/09/2007, 08h57

Merci beaucoup de répondre a mes questions basique !!!!

**Katachana** · 20/09/2007, 17h32

Je me permet de réouvrir le sujet parce que je n'ai pas complètement résolu mon problème.

En effet, en suivant t'as méthode ca ne marche pas dans mon cas. La seule solution possible est la suivante: <a class="active"> sans aucune autre propriété ??????????

Ca ne viendrait pas par hasard de quelque chose que j'aurais définis précédemment?

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
div#menu11 ul li a.courant {
	color: #005FB8;
	display: block;
	background: url(../Images/boutons/menuclick.gif) 0% -100%;
	padding: 8px 0 0 10px;
}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="menu11" class="liensMenuGauche">
		<ul>
<li><a class="courant" href="Declarer_services.html" title="Déclarer service"
			 >D&eacute;clarer service à l'&eacute;tranger</a></li>
		</ul>
		</div>

Précision: sous firefox ca marche , mais je dois réaliser mon appli pour IE6 et ca ne marche pour IE6 (pour IE7 c'est bon)....

**onirisme** · 20/09/2007, 18h00

Regarde sur ce lien Onglets Dynamiques

LES TROIS PREMIERS ONGLETS les autres sont pas actifs...

Est ce que ça marche sous IE (Pas Windows, Pas IE)

Tiens au fait y at'il un moyen de tester le comportement de IE sans IE ? Un site ou quelque chose...

**Katachana** · 21/09/2007, 10h03

Merci de ton aide , mais le p'tit souci c'est que je n'ai pas accès au CSS de la page

En plus j'aimerais que l'onglet soit encore actif après avoir été sélectionné

**onirisme** · 21/09/2007, 10h36

En fait de css c'est une gestion des onglets via php et css

Code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<html>
  <head>
    <title>Menu Dynamique php et css</title>
 
    	<link href="style.css" rel="stylesheet" type="text/css">
 
  </head>
<body>
    <?php
    //Ici la fonction pour nommer la page
    $pageName = "accueil";
    ?>
 
    <div id="contener"><!--Le contener Global-->
        <div id="header">
            <div id="onglets">
                <ul id="mainNav">
 
                    <li><?php
                    if ($pageName == 'accueil') {
                        echo '<span class="active">Accueil</span>'; }
                    else {
                        echo '<a href="index.php">Accueil</a>'; } ?>
                    </li>
 
                    <li><?php if ($pageName == 'page2.php') {
                        echo '<span class="active">page2</span>'; }
                        else {
                            echo '<a href="page2.php">Page2</a>'; } ?>
                    </li>
 
                    <li><?php if ($pageName == 'page3.php') {
                        echo '<span class="active">page3</span>'; }
                        else {
                            echo '<a href="page3.php">Page3</a>'; } ?>
                    </li>
 
                    <li><?php if ($pageName == 'page4') {
                        echo '<span class="active">page4</span>'; }
                        else {
                            echo '<a href="page4.php">Page4</a>'; } ?>
                    </li>
 
                    <li><?php if ($pageName == 'page5') {
                        echo '<span class="active">page5</span>'; }
                        else {
                            echo '<a href="page5.php">Page5</a>'; } ?>
                    </li>
                </ul>
            </div>   
        </div>
 
    </div>
    <h2>Page d'accueil</h2>
 
</body>
</html>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
/***Les différents div***/
#contener {
	width : 996px ;
	min-height : 550px ;
	margin : auto ;
	background-color : #FFFFFF ;
	}
 
#header {
	height : 35px;
	background-color : #000000 ;
	padding-top :35px ;
}
 
#onglets{
	background-color :#000000;
	float : right ;
 
}
#onglets li{
	list-style : none ;
}
#onglets a{
	display : block ;
	float :left ;
	margin-right : 1px ;
	margin-top : 0px ;
	width : 115px ;
	height : 35px ;
	background-color : #0032FF ;
	text-align : center ;
	vertical-align : middle ;
	color : #FFFFFF ;
}
 
.active{
	display : block ;
	float :left ;
	margin-right : 1px ;
	margin-top : 0px ;
	width : 115px ;
	height : 35px ;
	text-align : center ;
	vertical-align : middle ;
	color : #000000 ;
 
	background-color : #CC3300 ;
}

Qu'entends tu par encore actif?
Du genre link:visited?

**Katachana** · 21/09/2007, 11h18

En fait je n'ai pas la possibilité d'utiliser le php

Par actif , j'en tend que le bouton malgré sont changement de couleur pointe toujours vers un lien (la premiere page de "contact" par exemple si l'on click sur le bouton contact et qu'il y ait plusieurs page pour "contact")

Code css Menu mise en évidence

CSS

Vue hybride

Discussions similaires

Partager

Partager