Code css Menu mise en évidence

Version imprimable

Bonjour,

Voila mon code CSS :

Code:

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:

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 !!

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

Modifie cette ligne là :

Code:

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

par :

Code:

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

Sachant que dans tes liens, cette ligne :

Code:

<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:

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

pour ls autres.
18/09/2007, 08h57
Katachana

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

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:

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:

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éclarer service à l'é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)....

20/09/2007, 18h00
onirisme

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...
21/09/2007, 10h03
Katachana

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é ;)

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

Code HTML :

Code:

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:

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?

21/09/2007, 11h18
Katachana

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

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")

A tester sous ie :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<html>
  <head>
    <title>Réalisation d un menu à onglets</title>
    <meta content="">
    	<link href="style.css" rel="stylesheet" type="text/css">
 
  </head>
<body id="accueil"><!--Identifiant de la page (unique)-->
    <div id="nav"><!--Contener du menu-->
 
  <ul><!--li id Identifiant unique précédé de nav-->
    <li id="nav-accueil"><a href="index.html">Accueil</a></li>
    <li id="nav-lien1"><a href="lien1.html">lien 1</a></li>
    <li id="nav-lien2"><a href="lien2.html">lien 2</a></li>
    <li id="nav-lien3"><a href="lien3.html">lien 3</a></li>
    <li id="nav-lien4"><a href="lien4.html">lien 4</a></li>
 
  </ul>
</div>
    <h2>Page d'accueil</h2>
 
</body>
</html>

CSS :

Code:

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
 
#nav {
float:left;
width:100%;
background:#000000;
line-height:normal;
}
#nav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#nav li {
float:left;
padding:0 0 0 2px;
border-bottom:1px solid #765;
}
#nav a {
  text-align : center ;
float:left;
display:block;
width:70px;
text-decoration:none;
font-weight:bold;
color:#000000;
background-color : blue ;
}
/*Ici gestion des id */
#accueil #nav-accueil,
#lien1 #nav-lien1,
#lien2 #nav-lien2,
#lien3 #nav-lien3,
#lien4 #nav-lien4 {
  background-color:#CC3300;
  border-width:0;
  }
/*idem avec liens*/      
#accueil #nav-accueil a,
#lien1 #nav-lien1 a,
#lien2 #nav-lien2 a,
#lien3 #nav-lien3 a,
#lien4 #nav-lien4 a{
background-color :#CC3300 ;
color:#FFFFFF;
}

Comme d'habitue, le lien ->OngletsDyn
Bon faut mettre en forme...
Ca marche?

21/09/2007, 12h18
djoyeux

Dis nous ce à quoi tu as accès ça sera plus simple pour t'aider.

@++
21/09/2007, 13h51
Katachana

Juste HTML/CSS et éventuellement du javascript
21/09/2007, 13h58
onirisme

Il passe celui là sous ie?
Onglets

Il te convient ou pas ?
21/09/2007, 14h02
djoyeux

Le lien marche pô chez moi...
21/09/2007, 14h07
onirisme

J'suis trop pas fort avec les liens...:bravo:
OngletDyn