Problème d'affichage d'image bouton

Millan · 14 Mai 2012

Bonjour à tous,

Je suis entrain de faire mon site moi même, et j'ai voulu faire en sorte que quand on est sur une page, le bouton de cette page reste actif et aussi pour que quand on passe sa sourit sur les bouton il "change d'apparance" (actif/inactif).
Je travail en php et css, et mon site doit être au norme W3C
Donc on m'a aidé à faire ça, mais j'ai quelque bug:
-Sur chrome:
Je vois l'image et tout fonctionne mais j'ai un cadre blanc autour de l'image.

Vous devez être connecté pour voir les images.

-Sur Firefox:
Je vois l'image mais j'ai plus le cadre par contre je vois la description d'image devant:

Vous devez être connecté pour voir les images.

Fichier CSS (J'ai mis seulement le code pour 1 bouton, si vous avez besoin plus n’hésite pas)

CSS:

/*Bouton Accueil*/ 
/*image normal*/ 
.Bouton-Accueil1_1{ 
background : url(../image/Bouton/Bouton-Accueil1_1.png) no-repeat; 
width:105px; 
height:32px; 

} 
/*image hover*/ 
.Bouton-Accueil1{ 
background : url(../image/Bouton/Bouton-Accueil1.png) no-repeat; 
width:105px; 
height:32px; 
} 
.Bouton-Accueil1:hover{ 
background : url(../image/Bouton/Bouton-Accueil1_1.png) no-repeat; 

}

Fichier PHP Header:

PHP:

<div id="menu"> 
  <ul> 
   <li> 
    <a href="index.php" title="Actualités de l'entreprise"> 
    <?php  
    //On est sur la page index.php l'image sera button1-1.gif 
    if($_SERVER['REQUEST_URI']=="/index.php"){  
    $image = "Bouton-Accueil1_1";  
    }  
    //On est autre part, l'image sera button1.gif 
    else{  
    $image = "Bouton-Accueil1";  
    }  
    //la class Bouton-Accueil1 fait basculer l'état de l'image 
    //Si on est sur la page index.php l'image button1-1.gif reste Bouton-Accueil1_1 
    //Si on est autre part, l'image bascule d'un état à l'autre 
    echo '<img class="'.$image.'" alt="image bouton accueil" />'; 
    ?> 
    </a> 
   </li>

Donc dans mes multi tentative pour résoudre ce problème, j'ai essayer de mettre directement le lien de l'image dans mon header, et la firfox n'affiche même plus l'image, je n'ai plus que la description. Pourtant il l'a trouve parce que quand je vais "voir code source" et que je clic sur l'image je la voir apparaitre...
Le code modifié:

PHP:

<div id="menu">
				<a href="index.php" title="Actualités de l'entreprise">
				<?php 
				//On est sur la page index.php l'image sera button1-1.png
				if($_SERVER['REQUEST_URI']=="/index.php"){ 
				$image = "Bouton-Accueil1_1"; 
				$images = "http://sad-corporetion.netii.net/image/Bouton/Bouton-Accueil1.png";
				} 
				//On est autre part, l'image sera button1.gif
				else{ 
				$image = "Bouton-Accueil1"; 
				$images = "http://sad-corporetion.netii.net/image/Bouton/Bouton-Accueil1.png";
				} 
				//la class Bouton-Accueil1 fait basculer l'état de l'image
				//Si on est sur la page index.php l'image button1-1.gif reste Bouton-Accueil1_1
				//Si on est autre part, l'image bascule d'un état à l'autre
				echo '<img href="'.$images.'" class="'.$image.'" alt="image bouton accueil" />';
				?>
				</a>

Pour ceux à qui sa aiderai de voir le site :

Vous devez être connecté pour voir les liens.

Guest · 14 Mai 2012

Rajoute ces lignes à la fin de ton fichier main.css :

a, a:visited, a:active, a:link {
text-decoration: none;
border:none;
outline:none;
}
a:hover {
text-decoration: none;
border:none;
outline:none;
}

Guest · 15 Mai 2012

Salut

Millan :

Par defaut, les images ont une bordure. Définis la propriété Border de ces dernières dans le css:

CSS:

img {
 border-style: none;
}

Millan :

Oui, c'est parce que ton image est vide, elle n'affiche rien.
Ce que tu fais toi, c'est définir le background de la balise <img>, mais tu ne lui donne pas de contenu. Dans ce cas, si l'image n'a pas de contenu (pas exemple un fichier non trouvé), il est normal d'afficher la valeur de alt.
Il est donc normal que seul une partie de l'image ne soit visible. Puisque elle est en fond, la balise (img dans notre cas) ne vas pas s'adapter à sa taille, mais à son contenu (alt). C'est pk ton image n'est visible que dans le cadre du contenu.
Ceci est le fonctionnement correct que j'aurais attendu, contrairement a ce qu'affiche Chrome.
Ce qui peut surprendre, c'est que FF n'affiche pas le cadre. Mais probablement celui ci n'affiche le cadre que si il y a un contenu (une image, autre que alt)

Donc, pour arranger ça, je te suggère:

Le fond du bouton, tu le met bien en fond. Mais plus besoins de <img>, tu peux très bien le mettre en fond du <li>
Tu définis la taille de tes boutons en dur, dans le css, pour qu'ils restent tjr à la taille de leur fond quel que soit leur contenu
En contenu dans <li>, tu peux y mettre un lien contenant que du texte, sans nouvelle image à créer. Sauf si tu veux du texte spécial (police pas standarde), quoi qu'il y aie d'autre moyens pour ça (hors sujet).

CSS:

li.BoutonMenu{ 
background : url(../image/Bouton/BoutonMenu.png) no-repeat; 
width:105px; 
height:32px; 
} 
li.BoutonMenu:hover{ 
background : url(../image/Bouton/BoutonMenu_Hover.png) no-repeat; 
}
li.BoutonMenu_Selected{ 
background : url(../image/Bouton/BoutonMenu_Selected.png) no-repeat; 
width:105px; 
height:32px; 
}

PHP:

<div id="menu"> 
  <ul> 
    // On défini les valeurs statiques des boutons
    $Boutons = [
      ["Accueil", "Actualités de l'entreprise", "index.php"]
      ["foo", "blablabla", "foo.php"]
      ["bar", "patati", "bar.php"]
    ]
    $path = $_SERVER['REQUEST_URI']
    
    // Parcourir les boutons
    foreach($Boutons as $Bouton) {
      // <li class="xx">
      if ($path == "/".$Bouton[2]){ 
        echo "<li class='li.BoutonMenu_Selected'>" }
      else { 
        echo "<li class='li.BoutonMenu'>" }
      // <a href="xx" title="yy">zz</a>
      echo "<a href='".$Bouton[2]."' title='".$Bouton[1]."'>".$Bouton[0]."</a>"
      echo "</li>"
    }
  </ul>
</div>

Attention, pas testé, et ça fait un moment que j'ai plus fais de php.
Et fauda jouer sur qq règles css en plus

a+

zeb · 15 Mai 2012

Salut,

Et pourquoi pas sur l'ancre, directement ?

CSS:

a.bouton { width:105px; height:32px; display:inline-block; background:url(BoutonMenu.png) no-repeat; }
a.bouton:hover { background-image:url(BoutonMenu_Hover.png); }
a.bouton.selected { background-image:url(BoutonMenu_Selected.png); }

PHP:

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

turlupin en ptard · 15 Mai 2012

Juste pour rigoler un peu...

Vous devez être connecté pour voir les liens.

et c'est juste l'exemple le plus comique.

M'enfin... :sarcastic:

Millan · 15 Mai 2012

Salut à tous et merci pour votre aide, j'aimerais savoir si toute ce que vous me donné est au norme W3C ? Parce que je suis obligé de le faire au norme w3c (dailleur si vous constatez une faute, merci de me préveni)

Salut

Millan :

Par defaut, les images ont une bordure. Définis la propriété Border de ces dernières dans le css:

CSS:

img {
 border-style: none;
}

J'ai testé et je vois aucun changement...

Salut

Millan :

Oui, c'est parce que ton image est vide, elle n'affiche rien.
Ce que tu fais toi, c'est définir le background de la balise <img>, mais tu ne lui donne pas de contenu. Dans ce cas, si l'image n'a pas de contenu (pas exemple un fichier non trouvé), il est normal d'afficher la valeur de alt.
Il est donc normal que seul une partie de l'image ne soit visible. Puisque elle est en fond, la balise (img dans notre cas) ne vas pas s'adapter à sa taille, mais à son contenu (alt). C'est pk ton image n'est visible que dans le cadre du contenu.
Ceci est le fonctionnement correct que j'aurais attendu, contrairement a ce qu'affiche Chrome.
Ce qui peut surprendre, c'est que FF n'affiche pas le cadre. Mais probablement celui ci n'affiche le cadre que si il y a un contenu (une image, autre que alt)

Donc, pour arranger ça, je te suggère:

Le fond du bouton, tu le met bien en fond. Mais plus besoins de <img>, tu peux très bien le mettre en fond du <li>
Tu définis la taille de tes boutons en dur, dans le css, pour qu'ils restent tjr à la taille de leur fond quel que soit leur contenu
En contenu dans <li>, tu peux y mettre un lien contenant que du texte, sans nouvelle image à créer. Sauf si tu veux du texte spécial (police pas standarde), quoi qu'il y aie d'autre moyens pour ça (hors sujet).

CSS:

li.BoutonMenu{ 
background : url(../image/Bouton/BoutonMenu.png) no-repeat; 
width:105px; 
height:32px; 
} 
li.BoutonMenu:hover{ 
background : url(../image/Bouton/BoutonMenu_Hover.png) no-repeat; 
}
li.BoutonMenu_Selected{ 
background : url(../image/Bouton/BoutonMenu_Selected.png) no-repeat; 
width:105px; 
height:32px; 
}

PHP:

<div id="menu"> 
  <ul> 
    // On défini les valeurs statiques des boutons
    $Boutons = [
      ["Accueil", "Actualités de l'entreprise", "index.php"]
      ["foo", "blablabla", "foo.php"]
      ["bar", "patati", "bar.php"]
    ]
    $path = $_SERVER['REQUEST_URI']
    
    // Parcourir les boutons
    foreach($Boutons as $Bouton) {
      // <li class="xx">
      if ($path == "/".$Bouton[2]){ 
        echo "<li class='li.BoutonMenu_Selected'>" }
      else { 
        echo "<li class='li.BoutonMenu'>" }
      // <a href="xx" title="yy">zz</a>
      echo "<a href='".$Bouton[2]."' title='".$Bouton[1]."'>".$Bouton[0]."</a>"
      echo "</li>"
    }
  </ul>
</div>

Attention, pas testé, et ça fait un moment que j'ai plus fais de php.
Et fauda jouer sur qq règles css en plus

a+

ça j'ai pas encore essayer parce que sa m'érite un peu plus de temps et aujourd'hui j'ai pas le temps, mais je voulais d'abord m'assuré que c'était bien au norme.

zeb :

Salut,

Et pourquoi pas sur l'ancre, directement ?

CSS:

a.bouton { width:105px; height:32px; display:inline-block; background:url(BoutonMenu.png) no-repeat; }
a.bouton:hover { background-image:url(BoutonMenu_Hover.png); }
a.bouton.selected { background-image:url(BoutonMenu_Selected.png); }

PHP:

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

J'ai pas encore test parce que je voulais une confirmation de ta par:

Je doit mettre ça

PHP:

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

à la place de

PHP:

 				<a href="index.php" title="Actualités de l'entreprise">
				<?php 
				//On est sur la page index.php l'image sera button1-1.png
				if($_SERVER['REQUEST_URI']=="/index.php"){ 
				$image = "Bouton-Accueil1_1"; 
				} 
				//On est autre part, l'image sera button1.gif
				else{ 
				$image = "Bouton-Accueil1";
				} 
				//la class Bouton-Accueil1 fait basculer l'état de l'image
				//Si on est sur la page index.php l'image button1-1.gif reste Bouton-Accueil1_1
				//Si on est autre part, l'image bascule d'un état à l'autre
				echo '<img href="'.$image.'" class="'.$image.'" alt="image bouton accueil" />';
				?>
				</a>

?

Guest · 15 Mai 2012

Oui bien sûr, c'est au norme, a moins qu'il y aie des fautes de syntaxe.. mais dans tous les cas, il n'y aurais que des changement minime. Va sur le site du w3c pour tester tes page, ils ont un outil qui certifie le code aux normes.

J'ai testé et je vois aucun changement...

Heu.. ça m'étonne.. j'te ferai un code fonctionnel a l'occase

J'ai pas encore test parce que je voulais une confirmation de ta par:
Je doit mettre ça
...
à la place de
...

Non, il t'explique juste que tu n'as pas besoins d'utiliser de liste.
A la place de
<div>
<ul>
<li>
<a>1</a>
</li>
<li>
<a>2</a>
</li>
<li>
<a>3</a>
</li>
</ul>
</div>
tu peux faire
<div>
<a>1</a>
<a>2</a>
<a>3</a>
</div>

Tu appliquera donc le fond du bouton à l'ancre (<a>), sans utiliser du <ul><li>

zeb · 16 Mai 2012

jayme88@guest, respecte le règlement. Utilise la balise

Code:

[:zeb:4]

zeb · 16 Mai 2012

jayme88@guest, respecte le règlement. Utilise la balise

Code:

[:zeb:4]

zeb · 16 Mai 2012

Eh Millan, tu m'as l'air d'être un maniaque du code bien écrit.

Vous devez être connecté pour voir les images.

Bon. J'ai le même travers. Mais je me soigne. Je teste toujours mon code sur plusieurs navigateurs. Et sur Firefox en particulier, j'ai ajouté un module complémentaire :

Vous devez être connecté pour voir les liens.

de Marc Gueury.

Ainsi, je peux vérifier avec un simple [Ctrl-U], la validité de mon code.
Je t'invite à en faire autant.

Millan · 16 Mai 2012

ok merci, pour les bordure je comprend pas trop pourquoi sa fonctionne pas...

zeb :

Merci, j'ai déjà fais. Et c'est vrais que c'est pas mal du tout ce module

Guest · 16 Mai 2012

zeb :

jayme88@guest, respecte le règlement. Utilise la balise

Code:

[:zeb:4]
jayme88@guest, respecte le règlement. Utilise la balise [code][:zeb:4]
jayme88@guest, respecte le règlement. Utilise la balise [code][:zeb:4]
[/quotemsg]
C'est bon, j'ai compris :D Et oui, dsl, j'ai pas fais attention, ça ne se reproduira plus ;)

Guest · 16 Mai 2012

Millan,
Voici un code fonctionel:

Code:

<!DOCTYPE html>

<?php
    // Définition des boutons / pages
    $pages = Array(
        "accueil" => Array("Accueil", "Actualités de l'entreprise"),
        "foo" => Array("foo", "blablabla"),
        "bar" => Array("bar", "patati")
    );

    // Tester la page demandé, afficher l'accueil si la page est inconnue
    $page = "";
    if (isset($_GET["page"])) $page = $_GET["page"];
    if (!isset($pages[$page])) $page = "accueil";

?>


<html>
    <head>
	<title><?php echo $pages[$page][0] ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">

            a.buton {
                display: inline-block;
                background-image: url("http://www.baybul.com/clipart/buton/buton-3.png");
                width: 406px; height: 218px;
                font-size: 30px;
                text-align: center;
                padding-top: 188px
            }
            a.buton:hover {
                background-image: url("http://www.baybul.com/clipart/buton/buton-2.png")
            }
            a.buton.selected {
                background-image: url("http://www.baybul.com/clipart/buton/buton-5.png")
            }

        </style>
    </head>
    <body>
        <div>
            <?php
            foreach($pages as $key => $value) {
                $class = 'class = "buton';
                if ($page == $key) $class .= ' selected'; $class .= '"';
                echo '<a '.$class.' href="?page='.$key.'" title="'.$value[1].'">'.$value[0].'</a>';
            }
            ?>
        </div>
    </body>
</html>

Pour ce qui est du cadre de l'image, c'est pas ce que je pensais... et je sais pas ce qui cloche sur chrome... je vais encore y réfléchir

a+

zeb · 21 Mai 2012

@jayme88 : Oki

La triple publication est une erreur. Pas un matraquage.
Tu peux changer ton premier post.
Tu peux aussi préciser le langage :

Code:

 pour faire plus joli ;)

Millan · 27 Mai 2012

Re bonjour, j'ai juste encore une question à propos du site, dans mon fichier css, j'ai 2 id Menu dont une avec *, et je peu pas fusionné car quand je le fais sa fais bugé mon site... Est ce quelqu'un à une idée de la fonctione de * ?

#menu {
background: #434343;
border-radius: 10px 10px 3px 3px;
text-align: center;

}
#menu * {
display: inline;
text-align: center;

}

zeb · 29 Mai 2012

balise

Code:

[:zeb:4]

Guest · 11 Juin 2012

zeb :

balise

Code:

[:zeb:4][/quotemsg]
:lol:

Dsl pour le retard (je suis jayme, j'arrive pas à m'inscrire sais po pk)

#menu * se rapporte à tout ce qui est contenu dans la balise identifié par "menu", pas à la balise elle-même.

Problème d'affichage d'image bouton

Millan

Guest

Guest

zeb

turlupin en ptard

Millan

Guest

zeb

zeb

zeb

Millan

Guest

Guest

zeb

Millan

zeb

Guest