Sujet Précédent Sujet Suivant

Probleme CSS

Fermé
bowbow13 - 12 juin 2007 à 11:23
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 15 juin 2007 à 09:55
Bonjour
j ai un petit probleme en css, je ne trouve pas une commande: 
code html

        <dt onmouseover="javascript:montre('smenu1');"><a href="test.php?page=description">SOCIÉTÉ</a>
        </dt>
        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="test.php?page=description">Description</a></li>
            <li><a href="test.php?page=ressources">Ressources</a></li>
            <li><a href="test.php?page=metiers">Métiers</a></li>
          </ul>
        </dd>


code css

#menu li a:hover, #menu dt a:hover
{
      background: #eee;
}

DOnc ce code me permet une subrillance lorsque l on passe sur les icones, cependant je souhaiterais que lorsqu on clicque sur par exemple description, ressources, métiers; le bouton societe change de couleur.
J ai essayé A:visited mais ca ne correspond pas vu qu on ne clique pas dessus.
Y aurait t il une méthode pour faire ce que je veux?? Dois je transformer mon css en feuille de style php?? Dans tous les cas est ce possible de le faire et si oui comment?

merci d avance de vos réponses
A voir également:

25 réponses

  • 1
  • 2
Réponse 1 / 25
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 juin 2007 à 13:23
pour ce qui est du css.php

Si je devais donner mon avis, je serais plutôt contre l'adoption de constantes, variables, etc. au sein de la spécification CSS.

Autant garder les CSS simples et dépourvues de "logique" comme c'est le cas, et utiliser une solution vraiment puissante et mature telle que PHP si c'est vraiment nécessaire. S'ils vennaient ajouter ce type de fonctionnalités dans la spécification CSS, ce ne sera jamais assez complet pour rivaliser avec un vrai langage de script, tout en apportant son lot de prises de têtes.

À mon sens, on n'a pas besoin de complexifier les spécifications CSS, pour des fontionnalités qui ne seraient qu'une redite de ce qui est déjà possible !!

RAD
2
Réponse 2 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
13 juin 2007 à 12:44
donc le méthode semble être la bonne…
mais j'ai aussi écrit :
"pour la solution, en php tu vas [faire] en sorte que le <dt> [...] ait une classe[...]"

suis pas réveillé, j'te dis ! j'ai encore oublié un mot et pourtant je me relis !
-;o)

dans ta page tu aura quelque chose du genre : 
<dt<?php if ($page='lapage'){echo(' class="select"');}?>><a href="#">lapage<a></dt>

si la page est celle qui est affichée en ce moment alors tu ajoutes 'class="selected"'.
c'est ça qui fait l'interactivité, css ne fait que de la présentation.
1
Réponse 3 / 25
bowbow13
12 juin 2007 à 11:57
et il descend et il descend et sans réponse :'( lol
0
Réponse 4 / 25
bowbow13
12 juin 2007 à 12:26
snifff on veut pas m aider :'( ou peut pas faire?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 25
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 juin 2007 à 12:31
SALUT 

Dois je transformer mon css en feuille de style php??
loooooooooool non le css reste du css et a la meme fonction sur une page html ou php :))

RAD
0
Réponse 6 / 25
bowbow13
12 juin 2007 à 12:57
je sais mais l avantage du css en php c que ca peut devenir dinamic et etre utile mais bon tu connais pas toi la solution a mon probleme?
0
Réponse 7 / 25
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 juin 2007 à 13:13
essaye un 
a:active
?? mais je n est pas le temps d essayer maintenant !!
0
Réponse 8 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
12 juin 2007 à 13:36
salut,

+1 pour Rad

en css la pseudo-classe ':active' qui est appliquée entre le moment où l'utilisateur presse le bouton de la souris et le relâche. (dixit la spec)

les quatre états du lien en css :
a:Link
a:Visited
a:Hover
a:Active

à coder dans cet ordre, pour t'en rappeler "LoVe HAte".

un exemple
0
Réponse 9 / 25
bowbow13
12 juin 2007 à 14:29
C'est ce que je pensais aussi avec le a:Active ou le a:focus mais ca ne marche pas.... je me demande si ca vient pas du navigateur.... Donc voila c'est pour ca que je venais voir ici si c'était la bonne solution.
Appriori oui mais pkoi ca marche pas ?? ca c'est une question lol
voici le code en entier 
CODE HTML/PHP

<? $page=""; ?>
<html>
  <head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) 
{
 var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) 
 {
  if (document.getElementById('smenu'+i)) 
  {
    document.getElementById('smenu'+i).style.display='none';
  }
 }
 if (d) {d.style.display='block';}
}
//-->
</script>
  </head>
<link rel="stylesheet" type="text/css" href="styleMenu.css">
  <body>
  <div id="enTete">
  <img src=".\img\SOMEI1.png" width="300px" height="200px" />
  </div>
    <div id="menu">
      <dl>
        <dt onmouseover="javascript:montre();"><a id="lienTitre" href="test.php?page=accueil">ACCUEIL</a>
        </dt>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu1');"><a href="test.php?page=description">SOCIÉTÉ</a>
        </dt>
        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="test.php?page=description">Description</a></li>
            <li><a href="test.php?page=ressources">Ressources</a></li>
            <li><a href="test.php?page=metiers">Métiers</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu2');"><a href="test.php?page=solutionSdis">SDIS</a>
        </dt>
        <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="test.php?page=solutionSdis">Solution</a></li>
            <li><a href="test.php?page=referenceSdis">Références</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu3');"> Menu 3
        </dt>
        <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="test.php?page=page1">Sous-Menu 3.1</a></li>
            <li><a href="#">Sous-Menu 3.2</a></li>
            <li><a href="#">Sous-Menu 3.3</a></li>
            <li><a href="#">Sous-Menu 3.4</a></li>
            <li><a href="#">Sous-Menu 3.5</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu4');"> Menu 4
        </dt>
        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="#">Sous-Menu 4.1</a></li>
            <li><a href="#">Sous-Menu 4.2</a></li>
            <li><a href="#">Sous-Menu 4.3</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu5');"> test
        </dt>
        <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="#">Sous-Menu 1.1</a></li>
            <li><a href="#">Sous-Menu 1.2</a></li>
            <li><a href="#">Sous-Menu 1.3</a></li>
            <li><a href="#">Sous-Menu 1.4</a></li>
            <li><a href="#">Sous-Menu 1.5</a></li>
            <li><a href="#">Sous-Menu 1.6</a></li>
          </ul>
        </dd>
      </dl>
      </div> 
      <div id="photo">
      <?php
  /*affichage des photos correspondant au menu choisi*/
	if(isset($_GET['page']))
        {
		if($_GET['page']=='accueil')
                {
			echo("<img src=\".\img\photo\FORMATION.jpg\" width=\"100%\" height=\"91px\" />");
		}
		if($_GET['page']=='description' || $_GET['page']=='ressources' || $_GET['page']=='metiers')
                {
			echo("<img src=\".\img\photo\gouttes_eau.jpg\" width=\"100%\" height=\"91px\" />");
		}
		if($_GET['page']=='solutionSdis' || $_GET['page']=='referenceSdis')
                {
			echo("<img src=\".\img\photo\pompier.jpg\" width=\"100%\" height=\"91px\" />");
		}
        }
        else
        {
           echo("<img src=\".\img\photo\FORMATION.jpg\" width=\"100%\" height=\"91px\" />");
        }
		?>
    </div>
    <div id="gauche">
    <div id="sousMenu">
    <?
    /*affichage du menu gauche*/
	if(isset($_GET['page']))
        {
	switch ($_GET['page'])
        {
			case 'description' :
			echo("<table width=\"100%\" boder=\"1\">
			<tr><th align=\"center\" class=\"titreMenu\">SOCIETE</th></tr>
			<tr><td class=\"valide\"><a href=\"test.php?page=description\">Description</a></td></tr>
                        <tr><td class=\"normal\"><a href=\"test.php?page=ressources\">Ressources</a></td></tr>
                        <tr><td class=\"normal\"><a href=\"test.php?page=metiers\">Metier</a></td></tr>
			</table>");
				break;
			case 'ressources' :
			echo("<table width=\"100%\" boder=\"1\">
			<tr><th align=\"center\" class=\"titreMenu\">SOCIETE</th></tr>
			<tr><td class=\"normal\"><a href=\"test.php?page=description\">Description</a></td></tr>
                        <tr><td class=\"valide\"><a href=\"test.php?page=ressources\">Ressources</a></td></tr>
                        <tr><td class=\"normal\"><a href=\"test.php?page=metiers\">Metier</a></td></tr>
			</table>");
                        break;
			case 'metiers' :
			echo("<table width=\"100%\" boder=\"1\">
			<tr><th align=\"center\" class=\"titreMenu\">SOCIETE</th></tr>
			<tr><td class=\"normal\"><a href=\"test.php?page=description\">Description</td></tr>
                        <tr><td class=\"normal\"><a href=\"test.php?page=ressources\">Ressources</td></tr>
                        <tr><td class=\"valide\"><a href=\"test.php?page=metiers\">Metier</td></tr>
			</table>");
                        break;
			case 4 :
				break;
			case 5 :
				break;
			case 6 :
				break;
			default :
		}
	}


		?>
	</div>
        <div id="menuSuite">
        </div>
    </div>
    <div id="principale">
<?php
/*affichage de la page dans la div*/
	if(isset($_GET['page']))
        {
	switch ($_GET['page']){
			case 'description' :
				$page='desc.php';
				break;
			case 'ressources' :
				$page='ressource.php';
				break;
			case 'metiers' :
				$page='metier.php';
				break;
			case 'solutionSdis' :
				$page='sdis.php';
				break;
			case 'referenceSdis' :
				$page='sdisExpl.php';
				break;
			case 6 :
				$page='page6';
				break;
			default :
				$page='accueil.php';
		}
	}
	else
        {
		$page='accueil.php';
	}
	include("$page");

?>
</div>
    </a>
    </div>
  </body>
</html>

CODE CSS
body
{
      margin: 0;
      padding: 0;
      background: white;
      font: 80% verdana, arial, sans-serif;
}
#enTete
{
 margin-top:-50px;
 margin-left:-60px;
}
dl, dt, dd, ul, li
{
      height: 2em;
      margin: 0;
      padding: 0;
      list-style-type: none;
}
#menu 
{
      height:100%;
      position: absolute;
      top: 75px;
      left: 0;
      z-index:100;
      width: 100%;
}
#menu dl
{
      height: 15em;
      float: left;
      width: 13.05em;
}
#menu dt
{
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      text-transform: capitalize;
      font-weight: bold;
      background: #07b8ff;
      border: 1px solid gray;
}
#menu dd 
{
      border: 1px solid gray;
}
#menu li
{
      text-align: center;
      background: #ccc;
}
#menu dt a
{
 color:white;
}
#menu li a
{
      color: #000;
      text-decoration: none;
      display: block;
      height: 100%;
      border: 0 none;
}
#menu li a:hover
{
      background: #eee;
}
#menu dt a:active
{
 background: black;
}
a
{      
      text-decoration: none;
      color: black;
      color: #222;
}
#principale
{
  position : absolute;
  margin-top:38px;
  margin-left:13.05em;
  height:100%;
  width: 846px;
  background-color:green;

}
#gauche
{
 margin-top:38px;
 position:absolute;
 background-color:yellow;
 height:100%;
 width:13.05em;
}
#photo
{
  position:absolute;
  margin-top: -53px;
  height:85px;
  width:100%;
  background-color:red;
}
.valide
{
 background-color:#0773cf;
}
.normal
{
 background-color:#07b8ff;
}
.titreMenu
{
 font-weight: bold;
}


Et le truc c'est que lorsque l on valide la une sous partie (ex: description, ressource et metier) ca me change la couleur du bouton SOCIETE.

Et meme avec le active que j ai testé a mainte reprise et de différente manier eje n y arrive pas
sniffff
0
Réponse 10 / 25
bowbow13
12 juin 2007 à 14:30
ne faite pas gaffe au couleur des divs, c'est pour m indiquer l emplacement les tailles etc etc c'est vraiment ce changement au niv bouton que je comprend pas
0
Réponse 11 / 25
bowbow13
13 juin 2007 à 08:57
toujours pas de réponse... je suis vraiment en perdition totale la. help me
0
Réponse 12 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
13 juin 2007 à 10:10
salut,

pas en perdition totale.
tu as juste mis le lien vers ta css en dehors du <head>.
il faut inverser ces deux lignes : 
</head>
<link rel="stylesheet" type="text/css" href="styleMenu.css">
0
Réponse 13 / 25
bowbow13
13 juin 2007 à 10:18
Non ca vient pas de la 
<link rel="stylesheet" type="text/css" href="styleMenu.css">
</head>


#menu dt a:active
{
 background: black;
}


Ca ne marche pas toujours pas c'est a devenir fou.... et franchement la je commence a pas vraiment pas saisir pourquoi ca ne veut pas fonctionner en css.
0
Réponse 14 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
13 juin 2007 à 10:26
ça vient en premier de là. une feuille qui n'est pas liée ne sert strictement à rien.
pour le code, <a> est une balise en ligne, il faut lui appliquer : 
#menu dt a
{
color:white;
display:block;
}
0
Réponse 15 / 25
bowbow13
13 juin 2007 à 10:32
Lol ca venait en partie de la mais j ai essayé focus, active et le truc c'est que ca fait pas ce que je veux :
la avec les couleurs indiqué j aimerais que lorsque l on a cliqué sur société ou ces sous partie le bouton société donc dt change de couleur et reste avec la couleur changé tant qu on visite une partie de société.
Et le active me change la couleur que lorsque j ai le click appuyer dessus
0
Réponse 16 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
13 juin 2007 à 10:55
pour ça faut rédiger plus précisément ta question :
" je souhaiterais que lorsqu on clicque sur par exemple description, ressources, métiers; le bouton societe change de couleur. "
il y a quand même une sacrée différence entre cliquer et visiter.

tu peux aussi lire les réponses qu'on te donne.
"en css la pseudo-classe ':active' qui est appliquée entre le moment où l'utilisateur presse le bouton de la souris et le relâche."
à fortiori ça ne décrit pas du tout ton problème.

pour la solution, en php tu vas en sorte que le <dt> (soit dit en passant, cette balise ne sert absolument pas à ça) ait une classe (par exemple la classe "select").
en html : 
<dt class="select>blabla</dt>

et en css : 
dt.select{
background-color:red;
}
0
Réponse 17 / 25
bowbow13
13 juin 2007 à 11:24
tant pis marche toujours pas.... Je vais essayer de trouver une solution dans un autre langage
merci quand meme et dsl pour le dérangement
0
Réponse 18 / 25
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
13 juin 2007 à 11:36
mais que diable un peu d'abnégation !!!

déjà que je suis mal réveillé si en plus tu n'y mats pas du tien !
-;o)

ça ne fonctionne pas parce que j'ai oublié de cibler le <a> dans la règle mais il faut essayer !
regarde là, ça fonctionne ! 
dt.select a{
background-color:black;
}
0
Réponse 19 / 25
bowbow13
13 juin 2007 à 11:57
désolé mais la je ne saisie plus rien
j ai ouvert ta page nickel ca marche, je regarde le source, je vois ce que tu veux dire et je fais un c/c.
Je vérifie mon css, et apr précaution je prend ton code css et je fias un c/c dans le mien
......
mais pourquoi ca ne marche pas chez moi??????????????????????????????????????????????????

Je vais devenir fou pour une connerie pareille c'est pas possible
0
Réponse 20 / 25
bowbow13
13 juin 2007 à 12:04
lollll
mdrrrr
ah si ca fonctionne mais ca reste tjrs noir lol.
Je crois que je v me faire en php ou en javascript
désolé que meme
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses