Pb mauvais affichage d'un bouton en localhost

Fermé
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010 - 23 avril 2010 à 13:07
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010 - 23 avril 2010 à 18:43
Bjr ,voila mon fichier html


<html>

<head>
<link rel="stylesheet" href="a.css" type="text/css" media="screen" />
</head>
<body>
<div class="bouton"><div>Bonjour tous le Monde ^_^</div></div>
</body>

</html>

Pour ce qu'est de la partie CSS ( bon fonctionnement car j'ai un bon affichage au niveau du navigateur )
Mais ce que je comprend pas quand j'utilise le WampServer ou EasyPhp par exemple c'est que j'ai une répétition du bouton sur toute la ligne !!!
PS : j'en connais un peu l'utilisation de ces derniers et j'ai déjà travaillé avec en utilisant le PHP donc si qlq a une idée d'où vient le pb ou peut me conseiller je serai reconnaissant ^_^
Merci d'avance et bonne journée ..





3 réponses

desperadosse Messages postés 199 Date d'inscription mardi 15 avril 2008 Statut Membre Dernière intervention 26 avril 2011 7
23 avril 2010 à 13:12
Ta essayer un no-repeat je suppose ?

j'aimerai voir ton CSS si cela ne te pose pas de problème.

merci d'avance
0
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010
23 avril 2010 à 13:27
bjr desperadosse merci pr ta reponse :)
Alors voila la partie CSS :
.bouton {
background: url('bouton gauche.png'); /* Bord gauche et contenu du bouton */
float: left; /* Afin que le DIV prenne la largeur de son contenu, et non la largeur de la page, pour des raisons didactiques */
margin: 7px; /* Espacer les boutons entre eux, rien à voir avec la technique des portes coulissantes */
}

.bouton div {
background: url('bouton droit.png') 100% 0 no-repeat; /* Bord droit du bouton, aligné à droite ! */
height: 30px; /* Hauteur des images bouton-gauche.png et bouton-droite.png */
line-height: 30px; /* Centrer le texte verticalement sur le bouton */
padding: 0 10px; /* S'assurer que le texte ne soit pas collé aux bordures du bouton */
color: white; /* Le bouton est bleu foncé, le texte doit être clair */
}

en fait j'ai pas utiliser no-repeat car j'y connait pas mais je fait mes recherche ;)

Bonne continuation .
0
desperadosse Messages postés 199 Date d'inscription mardi 15 avril 2008 Statut Membre Dernière intervention 26 avril 2011 7
23 avril 2010 à 13:32
Test un no-repeat sur le bouton gauche ?
0
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010
23 avril 2010 à 18:04
enfait j'ai essayé de changer comme suite mais j'ai tjr plusieurs affichages et cette fois deux boutons !!
voici le code changer :
background: url('bouton-gauche.png') no-repeat;;
0
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010
23 avril 2010 à 18:05
Si qlq a une sol il sera le bien venu
0
desperadosse Messages postés 199 Date d'inscription mardi 15 avril 2008 Statut Membre Dernière intervention 26 avril 2011 7
23 avril 2010 à 18:26
Est ce que tu as ta source HTML stp ?
Que je l'analyse.

Si je récapitule, tes boutons s'affichent correctement en ligne mais pas en local ?
0
azertyamin Messages postés 6 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 23 avril 2010
23 avril 2010 à 18:43
En fait la partie HTML est écrie en haut de page ici
Mais j'ai trouver un nouveau code qui marche mieux en local
Si vous voulez dire en ligne par une un teste de la page sans localhost ;) oui évidement sa marche en ligne et pas en local !!!
Donc le nouveau code qui marche est le suivant :

<html>
<head>
<link rel="stylesheet" href="bouton.css" type="text/css" media="screen" />

</head>

<body>
<span id="dmcbouton"><a href="#"><b>mot bouton</b></a></span>
</body>
</html>


et sa partie css est :


#dmcbouton{
background-image:url(bt_c_g.gif);
background-repeat:no-repeat;
}
#dmcbouton a{
padding-right:21px; /*largeur de l'image bt_c_g.gif*/
margin-left:21px; /*largeur de l'image bt_c_g.gif*/
background-image:url(bt_c_d.gif);
background-repeat:no-repeat;
background-position:100% 0;
text-decoration:none;
}
#dmcbouton a,#dmcbouton{
display:-moz-inline-box;
display:inline-block;
height:37px; /*hauteur de l'image*/
white-space:nowrap;
}
#dmcbouton a b{
vertical-align:top;
font-size:12px;
display:block;
cursor:pointer;
_display:inline-block;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
line-height:37px; /*hauteur de l'image*/
vertical-align:middle;
color:#fff;
}

------------------


J'aimerai comprendre pk cella marche et l'autre pas !!!!!

et merci encore une fois ^_^
0