Propriété css a#active avec un include non fonctionnelle?

Question

Evil9

26 Oct 2007 à 10:33

Bonjour,
je cherche à marquer ma navigation par la propriété a#active en css et en fait mon code fonctionne très bien en html, mais dès que je met mon menu dans un include, la propriété ne fonctionne plus.
Y a-il une chose que j'ai oublié ou mal codée?

Merci de votre aide car là, je sèche !

ul#navlist li a.idea{
	display: block;
	height: 25px;
	width: 200px;
	padding: 5px 0 0 10px;
	text-decoration: none;
	background: transparent url(../images/menu/bg_menu.gif) no-repeat;
}


ul#navlist li a:hover.idea {
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
}
ul#navlist li a#active.idea{
	font-weight: bold;
	font-style: italic;
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
 
}

6l20

26 Oct 2007 à 11:34

Bonjour Evil9

Peut-être qu'avec ":" cela pourrait mieux fonctionner ?


ul#navlist li a[#red]:[/#]active.idea{
font-weight: bold;
font-style: italic;	
background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
}

Modifié par 6l20 (26 Oct 2007 - 11:35)

Evil9

26 Oct 2007 à 11:49

non, non... ça ne fonctionne pas.

En fait j'aimerai que l'onglet reste "marqué" pendant la navigation sur la page.
ca fonctionnait en html mais avec mon iclude plus rien !

Necromantik

26 Oct 2007 à 11:54

Bonjour,

pour cela il faut en changer la classe (via php ou autre) et définir un style pour cette dernière.

La pseudo classe "active" n'est utilisée qu'entre le moment ou on clique sur le lien et celui ou la page suivante est chargée (s'il marchait en html c'est probablement car tu avais un lien factice donc pas de page suivante).

6l20

26 Oct 2007 à 12:06

Peux-tu mettre le code de ta page ou mieux un lien vers ta page ?

Evil9

26 Oct 2007 à 14:36

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sanstitres</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="../css/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('div.demo-show:eq(0)> div').hide();
  $('div.demo-show:eq(0)> h2').click(function() {
	$(this).next().slideToggle('slow');
  });
});
</script>
<link rel="shortcut icon" href="../images/favicon.ico">
</head>
<body>
<div id="container">

<div id="header">
  <div id="options">
    <div id="options_lang"> <a href="/fr/index.php">FR</a> I <a href="../../nl/index.html">NL</a> </div>
    <div id="options_content"> <a href="">Contact</a> I <a href="/legal.html"> Legal </a> </div>

  </div>
  <div id="logo"> <a href="/fr/index.php"></a> </div>
  <div id="nav">
    <ul id='navlist'>
      <li><a class="idea" href="/fr/ideas.php">Free my idea</a></li>
      <li><a class="concept" href="/fr/concept.php">Perform my concept</a></li>
      <li><a class="privilege" href="/fr/privilege.php">My privilege room</a></li>

    </ul>
  </div>
</div>
<div id="title">
  <div id="title_content"> <img src="../images/titles/creativeIdeas.gif" width="550" height="55"> </div>
</div>
<div id="shadow"></div>
<div id="center">
<div id="left">
  <p class="chapeau"> blabla </p>
  <div id="newsBox">
    <ul>
      <li>blabla</li>
    </ul>
  </div>
  <div id="newsBox">
    <ul>
      <li>blabla</li>
    </ul>
  </div>
  <div id="newsBox">
    <ul>
      <li>blabla</li>

    </ul>
  </div>
</div>
<div id="right">

  <div id="rightBox">
    <div id="rightBoxBas" class="demo-show">
      <h1>Cas pratiques</h1>
      <h2 style="cursor:pointer"> Novembre 2007</h2>

      <div>
        <ul>
          <li>blabla</li>
          <li>blabla</li>
          <li>blabla</li>

        </ul>
      </div>
      <h2 style="cursor:pointer"> D&eacute;cembre 2007</h2>
      <div>
        <ul>
          <li><a href=""><span class="white">I</span> <span class="date_menu">A para&icirc;tre</span></a></li>

        </ul>
      </div>
      <h2 style="cursor:pointer"> Janvier 2008</h2>
      <div>
        <ul>
          <li><a href=""><span class="white">I</span> <span class="date_menu">A para&icirc;tre</span></a></li>

        </ul>
      </div>
      <h2 style="cursor:pointer"> F&eacute;vrier 2008</h2>
      <div>
        <ul>
          <li><a href=""><span class="white">I</span> <span class="date_menu">A para&icirc;tre</span></a></li>

        </ul>
      </div>
    </div>
   </div>
       <hr/> 
    <div id="rightBox">
      <div id="rightBoxBas">
        <h1>rechercher</h1>
        <div class="recherche">

          <form name="form" id="form">
            <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
              <option>Par cat&eacute;gorie</option>
              <option>Point of sale</option>
              <option>Packaging</option>
              <option>Retail</option>

            </select>
          </form>
          <hr/>
          <form name="form" id="form">
            <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
              <option>Par date de cr&eacute;ation</option>
              <option>2007</option>

              <option>2006</option>
              <option>2005</option>
            </select>
          </form>
        </div>
      </div>
    </div>
  </div>

  
  
</div>
</div>
</body>
</html>

le lien n'est pas encore online donc voici le code html.

voici la css :

/*
----------------------------------------------------------
	Global resets
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {

	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/*
----------------------------------------------------------
	Misc
----------------------------------------------------------*/

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #efebe0 url(../images/backgrounds/bg.gif) top repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #000;
}	

ol, ul {
	list-style: none;
}

hr {
	margin: 5px 0 5px 0;
	border: 0;
	background: none;
}

a {
	color: #000;
	text-decoration: underline;
}

a:hover {
	color: #b42475;
	text-decoration: none;
}
a:active {
	color: #ff0000;
	text-decoration: none;
}

h1 {
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.07em;
	color: #ff0000;
	padding: 10px 0 15px 0;
}

h2 {
	font-size: 18px;
	font-weight: bold;
	color: #000;
	padding: 10px 0 0 0;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	color: #4b3939;
	padding: 0 0 10px 0;
}


/*
----------------------------------------------------------
	Divs & Cibling Attributes
----------------------------------------------------------*/

#container{
	position: relative;
	width: 924px;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	background: transparent url(../images/backgrounds/bg_white.gif) top repeat-y;
}	
	
	
#header{
	position: relative;
	width: 924px;
	height: 145px;
	background: transparent url(../images/backgrounds/header.gif) top no-repeat;
}
	
	
#options {
	position: relative;
	width: 100%;
	font-size: 10px;
	color: #FFF;
	background: transparent;	
}
#options a {
	color: #FFF;
	text-decoration: none;
	font-size: 9px;
	font-weight: bold;
}
#options a:hover {
	color: #000;
	text-decoration: none;
}
#options_content {
	margin: 0;
	padding: 8px  0 0 0;
	text-align: right;
}
#options_lang {
	float: right;
	width: 55px;
	height: 15px;
	margin: 0;
	padding: 8px 12px 0 12px;
	background: transparent url(../images/backgrounds/lang.gif) top no-repeat;
	text-align: center;
	color: #000;
}
#options_lang a{
	color: #4b3939;
	font-weight: bold;
	font-size: 9px;
	text-decoration: none;
}
#options_lang a:hover{
	color: #ff0000;
}
	
	
#logo{
	position: relative;
	top: 30px;
	left: 10px;
	background: transparent;
}
#logo a{
	display: block;
	width: 311px;
	height: 48px;
	background: transparent url(../images/backgrounds/logo.png) top no-repeat;

}
	
	
#nav{
	position: relative;
	width: 924px;
	height: 15px;
	top: 54px;
	background: transparent;
}
#nav a{
	color: #FFF;
	font-size: 12px;
	text-decoration: none;
	text-transform: uppercase;
}
#nav a:hover{
	color: #FFF;
}
	

	
#title{
	position: relative;
	width: 924px;
	height: 59px;
	background: transparent url(../images/backgrounds/bg_title.gif) top repeat-y;
}
#title p{
	padding: 15px 0 0 0;
}
#title_content{
	margin: 0 25px 0 25px;
}
	
	
#shadow{
	width: 924px;
	height: 17px;
	background: transparent url(../images/backgrounds/shadow.gif) center no-repeat;
}
	
	
#photo{
	position: relative;
	width: 924px;
	height: 316px;
	background: transparent url(../images/backgrounds/VitMaVie.jpg) center no-repeat;
}
	
	
#philo{
	position: absolute;
	width: 380px;
	height: 205px;
	margin: 60px 0 0 520px;
	padding: 0 0 0 0;
	background: white;
}
#philo p{
	font-size: 13px;
	padding: 10px;
}
	
	
#center{
	position: absolute;
	width: 924px;
	background: transparent url(../images/backgrounds/bg_white.gif) top repeat-y;
	padding-bottom: 25px;
}	
	
	
#left{
	float: left;
	margin: 0 0 0 25px;
	padding: 0 0 0 0;
	width: 550px;
}
#left ul{
	padding: 10px 0 10px 13px;
	font-size: 13px;
	line-height: 16px;
}
#left li{
	list-style: circle;
}
	
	
#right {
	float: right;
	voice-family:inherit;
	margin: 0;
	width: 300px;
	padding: 10px 25px 15px 0;
	background: transparent;
}
	
	
#printBox {
	float: right;
	clear: left;
	height: 15px;
	margin:  17px 0 0 0;
	padding: 3px 20px 0 0;
	background: transparent url(../images/puces/print.gif) right top no-repeat;
}
#pdfBox {
	float: right;
	height: 15px;
	margin: 17px 15px 0 0;
	padding: 3px 20px 0 0;
	background: transparent url(../images/puces/pdf.gif) right top no-repeat;
}
#printBox a, #pdfBox a {
	font-size: 9px;
	color: #000;
	text-decoration: none;
}
#printBox a:hover, #pdfBox a:hover {
	font-size: 9px;
	color: #ff0000;
	text-decoration: underline;
}


#formulaire {
	width: 895px;
	clear: both;
	margin: 0 auto;
	text-align: left;
}
	

	
/*
----------------------------------------------------------
	MENU
----------------------------------------------------------*/

ul#navlist {
	height: 24px;
	margin: 0 0 0 24px;
	padding: 0;
	list-style-type: none;
	background: transparent;
}
ul#navlist li {
	display: block;
	height: 24px;
	float: left;
	text-align : left;
	margin: 0;
	list-style:none;
}

/*----*/

ul#navlist li a.idea{
	display: block;
	height: 24px;
	width: 211px;
	padding: 7px 0 0 10px;
	text-decoration: none;
	background: transparent url(../images/menu/bg_menu.gif) no-repeat;
}


ul#navlist li a:hover.idea {
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
}
ul#navlist li a:active.idea{
	font-weight: bold;
	font-style: italic;
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
 
}



/*----*/

ul#navlist li a.concept {
	display: block;
	height: 37px;
	width: 433px;
	padding: 7px 0 0 10px;
	text-decoration: none;
	background: transparent url(../images/menu/bg_menu2.gif) no-repeat;
}
ul#navlist li a:hover.concept {
	background: transparent url(../images/menu/bg_menu2Hover.gif) no-repeat;
}

ul#navlist li a:active.concept{
	font-weight: bold;
	font-style: italic;
	background: transparent url(../images/menu/bg_menu2Hover.gif) no-repeat;
 
}



/*----*/

ul#navlist li a.privilege {
	display: block;
	height: 24px;
	width: 211px;
	padding: 7px 0 0 10px;
	text-decoration: none;
	background: transparent url(../images/menu/bg_menu.gif) no-repeat;
}
ul#navlist li a:hover.privilege {
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
}
ul#navlist li a:active.privilege{
	font-weight: bold;
	font-style: italic;
	background: transparent url(../images/menu/bg_menuHover.gif) no-repeat;
 
}


	
	
/*
----------------------------------------------------------
	RightNAV
----------------------------------------------------------*/

#rightBox {
	width: 300px;
	margin: 0;
	padding: 5px 0 0 0;
	background: transparent url(../images/backgrounds/rightBoxTop.gif) top center no-repeat;
}
#rightBoxBas {
	margin: 0;
	padding: 0 0 10px 0;
    background: #efebe0 url(../images/backgrounds/rightBoxBottom.gif) bottom center no-repeat;
}
#right h1 {
	margin: 0 10px 0 10px;
	padding: 15px 0 3px 0;
	text-align: right;
	font-family: Rockwell, Courier, Courier New, serif;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: bold;
	color: #4b3939;
	border-bottom: 1px solid #ccd2d2;
}
#right h2 {
	margin: 5px 10px 0 10px;
	padding: 3px 18px 3px 0;
	color: #FFF;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-weight: normal;
	font-size: 12px;
	text-align: right;
	background: #4b3939 url(../images/puces/puce.gif) right center no-repeat;
}
#right ul{
	margin: 5px 10px 5px 10px;
}
#right li {
	border-bottom: #ccc 1px dotted;
	background: transparent;
	text-align: right;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
}
#right li a{
	text-decoration: none;
	color: #000;
	display: block;
	padding: 5px 0 5px 15px;
}
#right li a:hover{
	background: #e5e1d6;
}


/*
----------------------------------------------------------
	3 Boxes Homepage
----------------------------------------------------------*/

#box1{
	float: left;
	width: 211px;
	height: 125px;
	margin: 0 10px 0 25px;
	padding: 15px 0 0 0;
	background: transparent url(../images/backgrounds/box1.gif) center bottom no-repeat;
}
#box2{
	float: left;
	width: 433px;
	height: 125px;
	margin: 0 10px 0 0;
	padding: 15px 0 0 0;
	background: transparent url(../images/backgrounds/box2.gif) center bottom no-repeat;
}
#box3{
	float: left;
	width: 211px;
	height: 125px;
	margin: 0;
	padding: 15px 0 0 0;
	background: transparent url(../images/backgrounds/box3.gif) center bottom no-repeat;
}
#box1 p, #box2 p, #box3 p {
	padding: 10px;
}
#box1 a, #box2 a, #box3 a {
	font-size: 11px;
	font-weight: bold;
	color: #000;
	text-decoration: underline;
}
#box1 a:hover, #box2 a:hover, #box3 a:hover {
	color: #FFF;
	text-decoration: none;
}
#box1 h1, #box2 h1, #box3 h1 {
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	padding: 10px 10px 0 10px;
}
.moreBox{
	position: absolute;
	display: block;
	width: 100px;
	height: 20px;
	margin: 95px 5px 0 5px;
}



/*
----------------------------------------------------------
	NEWS BOX
----------------------------------------------------------*/

#newsBox ul {
    padding: 0px;
    margin: 12px 0;
    width: 550px;
}
#newsBox li {
    padding: 0;
    margin: 0;
    display: block;
    width: 550px;
    position: relative;
    float: left;
}
#newsBox li a {
    font-family: arial, Helvetica, Verdana, sans-serif;
    line-height: 1.5;
    color: #000;
    font-size: 12px;
    text-decoration: none;
    display: block;
    width: 550px;
    padding: 12px 5px 14px 5px;
	border-bottom: 1px solid #d4dde2;
    float: left;
}
#newsBox ul li a:hover {
  	background: #efebe0;
    border-bottom: 1px solid #BBB69F;
}
#newsBox ul li a strong {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ff0000;
    line-height: 1;
    padding: 0;
    margin: 0 0 7px 45px;
    display: block;
}
#newsBox ul li a:hover strong {
	color: #4b3939;
}
#newsBox ul li a .message {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    margin: 0 0 0 45px;
    padding: 0;
    line-height: 1.5;
    display: block;
}
#newsBox ul li a .more {
    background: transparent url(../images/puces/plus.gif) left bottom no-repeat;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    line-height: 1;
    font-size: 11px;
	color: #4b3939;
    font-weight: normal;
    display: block;
    margin: 10px 0 0 45px;
    padding: 0 0 0 13px;
    clear: left;
    text-decoration: none;
    height: 12px;
}
#newsBox ul li a:hover .more {
	color: #000;
    text-decoration: none;
    height: 12px;
}
#newsBox ul li .date {
    background: transparent url("../images/puces/bg_calendar.gif") 0 50% no-repeat !important;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 1;
    display: block;
    height: 36px;
    width: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
}
#newsBox ul li .date .month {
    font: bold 9px Tahoma,Arial,Verdana,Helvetica,sans-serif;
    text-transform: uppercase;
    text-align: center;
    display: block;
    color: #fff;
    padding: 2px 0 0 0;
}
#newsBox ul li .date .day {
    font: bold 12px Tahoma,Arial,Verdana,Helvetica,sans-serif;
    text-align: center;
    display: block;
    color: #ff0000;
    padding: 5px 0 0 0;
    margin: 0;
}



/*
----------------------------------------------------------
	Formulaire
----------------------------------------------------------*/

fieldset {
	margin-bottom: 1em;
	border: 0;
	width: auto;
	margin: 5px;
	background: none;
}
fieldset p {
	padding: 0 0 10px 5px !important;
	padding: 0 0 5px 5px;
	clear: both;

}
legend {
	margin: 0 0 10px 0;
	padding: 5px;
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #4b3939;
	background: none;
}
label.text {
	display: block;
	float: left;
	width: 200px;
	text-align: left; 
	margin: 0 10px 0 0;
	padding: 4px;
	border-bottom: 1px dashed #efebe0;
}
.radioCheck {
	margin: 0 10px 0 5px;

		
}
input.text,
textarea {
	width: 300px;
	background-color: #FFF;
	margin-right: 5px;	

}
.envoy {
	margin: 10px 0;
	text-align: left;
}
.envoy label {
	border: 0;	
}
hr {
	visibility: hidden;
	clear: both;
}
span.note {
	font-size: 10px;
}
span.warning {
	font-weight: bold;
	font-size: 12px;
	color: #ff0000;
}



/*
----------------------------------------------------------
	Classes
----------------------------------------------------------*/

.recherche{
	position: relative;
	text-align: right;
	padding: 15px 10px 0 10px;
}
.rockwell {
	font-family: Rockwell, Courier, Courier New, serif;
	color: #000;
	font-size: 25px;
}
.date_menu {
	font-family: Rockwell, Courier, Courier New, serif;
	color: #ff0000;
	font-size: 12px;
}
.red {
	color: #ff0000;
}
.white {
	color: #FFF;
	font-weight: bold;
}
.demo-show {
}
.chapeau {
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	color: #4b3939;
	padding: 10px 0 10px 0;
}
.intro {
	font-family: Rockwell, Courier, Courier New, serif;
	color: #000;
	font-size: 15px;
}
.body {
	text-align: justify;
	font-size: 13px;
	font-weight: normal;
	line-height: 16px;
	color: #000;
	padding: 5px 0 10px 0;
}
.image {
	padding: 5px 0 5px 0;
	text-align: center;
}
.boxes {
	text-align: left;
	font-weight: bold;
	font-size: 13px;
	line-height: 15px;
}
.borderUp{
	border-top: #ccc 1px solid;
	display: block;
	padding-top: 10px;
}
.adress{
	padding: 0 0 0 0;
}
.strong{
	font-weight: bold;
}


.link a{
	font-size: 14px;
	color: #4b3939;
	text-decoration: underline;
}
.link a:hover{
	color: #ff0000;
	text-decoration: none;
}

désolé pour la tartine. Smiley sweatdrop

Modifié par Evil9 (26 Oct 2007 - 14:38)

Evil9

26 Oct 2007 à 14:49

ne serai-ce pas du à un problème de liens avec php ?
(le truc des différences entre liens absolus en html et php)

Necromantik

26 Oct 2007 à 15:05

Bonjour,

Non, comme je l'ai dis plus haut c'est simplement dû à la définition de la pseudo-classe :active.

Quand tu clique sur le lien, il devient actif, il prend le style de la pseudo-classe :active. Ensuite la page suivante se charge, le lien n'est alors plus actif.
Tu fais ici une utilisation éronée de la propriété, le css ne peux pas deviner quelle est la page en cours. Il te faut définir une classe special pour le lien "actif", par exemple:

<li><a class="idea active" href="/fr/ideas.php">Free my idea</a></li>

Tu dis qu'ils marchaient en html, c'est uniquement car tes liens étaient, je suppose, vides (href=""). De fait quand on clique dessus rien ne se passe, aucune page n'étant chargée le lien reste "actif" ad eternam.

En résumé :active s'applique à un lien qui est en cours de chargement et pas au dernier lien cliqué sur la page précédente ou quelque chose dans ce goût.

Evil9

26 Oct 2007 à 15:12

ok.
j'avais pourtant suivi le tutoriel de raphael expliquant tout ça...

je testerai.
merci en tout cas.

pfiou c'est vendredi, j'ai du mal à penser Smiley biggol

Evil9

26 Oct 2007 à 15:17

aaha je viens de piger !
c'est là que je suis piégé en fait.

comme tout mon header (contenant mon menu) est mis dans include je suis bien Bai** car je ne peux pas appliquer d'autres classe (ici en loccurence .ideaActive)
vu que le menu est le m^me pour chaque page.

Donc cette solution en css ne conviens pas. enfin je crois.
Y a t-il qqchose que j'aurais oublié ou un moyen de contourner ça?
Si non je crois qu'il existe des trucs en javascript pour ça?

Necromantik

26 Oct 2007 à 15:25

Tu peux définir une variable php dans le fichier parent et l'utiliser dans le fichier enfant.

Exemple:

[b]fichier page3.php[/b]
<?php
$page = 3;
//... d'autre truc html, etc
include('menu.php');
?>

[b]fichier menu.php[/b]
    <ul id='navlist'>
      <li><a class="idea<?php if($page == 1) echo 'Active'; ?>" href="/fr/ideas.php">Free my idea</a></li>
      <li><a class="concept<?php if($page == 2) echo 'Active'; ?>" href="/fr/concept.php">Perform my concept</a></li>
      <li><a class="privilege<?php if($page == 3) echo 'Active'; ?>" href="/fr/privilege.php">My privilege room</a></li>
    </ul>

Modifié par Necromantik (26 Oct 2007 - 15:27)

Evil9

26 Oct 2007 à 16:48

voilà, j'ai essayé, mais ça ne marche pas.
la méthode javascript je dois encore la creuser,
mais suivant ta méthode, quand je clique sur le lien, ma page retourne sur rien.
(page vide).
Un soucis au niveau du php a mon avis.
(je debute encore !)
en gros,

quand j'insère mon code html entre mon code php permettant de "taguer" ma page
ma balise ne se "ferme" pas correctement et je pige pas pourquoi...
(dreamweaver ne m'affiche pas la coloration syntaxique me disant que ma balise php ici donc ?> est bien fermée.)
du coup ça donne un resultat page blanche.

Necromantik

26 Oct 2007 à 19:59

Et à quoi ressemble une page type ainsi que le menu inclus actuellement ?

Sujet clos

Questions générales et questions de débutants

Propriété css a#active avec un include non fonctionnelle?