Pb mauvais affichage d'un bouton en localhost
azertyamin
Messages postés
9
Statut
Membre
-
azertyamin Messages postés 9 Statut Membre -
azertyamin Messages postés 9 Statut Membre -
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 ..
<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 ..
A voir également:
- Pb mauvais affichage d'un bouton en localhost
- Affichage double ecran - Guide
- Diagnostic bouton photo - Accueil - Outils
- Localhost:8080 ✓ - Forum Java
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
- Symbole arrêt marche - Forum Word
3 réponses
Ta essayer un no-repeat je suppose ?
j'aimerai voir ton CSS si cela ne te pose pas de problème.
merci d'avance
j'aimerai voir ton CSS si cela ne te pose pas de problème.
merci d'avance
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 ?
Que je l'analyse.
Si je récapitule, tes boutons s'affichent correctement en ligne mais pas en local ?
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 ^_^
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 ^_^
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 .
voici le code changer :
background: url('bouton-gauche.png') no-repeat;;