Centrer un texte dans un bouton en css
zephir94
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
zephir94 Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
zephir94 Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
j'ai un problème pour centrer du texte au sein d'un bouton rond crée en css,
voici mon code css suivi de la partie html.
Pour l'instant > ou < sont placés à droite vers le bas dans le bouton, vous remerciant par avance
j'ai un problème pour centrer du texte au sein d'un bouton rond crée en css,
voici mon code css suivi de la partie html.
<style type="text/css">
a:link
{
text-decoration:none;
border: none
outline-style:none;
}
a:hover
{
color:black;
border: none;
cursor: pointer;
outline-style:none;
}
.submit {
width:35px;
height:35px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #ffffff;
color: #ffffff;
}
.submit:hover
{
width:35px;
height:35px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #FFFFFF;
color: #FF8000;
}
</style>
<div align="center"><table align="center" border=0>
<tr>
<td width="60"><div style="text-align:left;"><input type="submit" id="left-but" class="submit" value="<"/></div></td>
<td width="60"><div style="text-align:right;"><input type="submit" id="right-but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>
</style>
Pour l'instant > ou < sont placés à droite vers le bas dans le bouton, vous remerciant par avance
A voir également:
- Centrer un bouton css
- Diagnostic bouton photo - Accueil - Outils
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
- Bouton reinitialisation pc - Guide
- Comment débloquer un bouton enfoncé - Forum Samsung
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
21 réponses
salut, j'ai une question....tu as fait un copier coller là ?
je vois :
<style type="text/css">
a:link
{ .....etc etc
....
puis
but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>
</style>
en fait ton html est dans la css.
je dis ca car je l'ai mis en forme et chez moi ils sont au centre.
Tu utilise une façon de coder qui est obsolete. les table , les align center....
je vois :
<style type="text/css">
a:link
{ .....etc etc
....
puis
but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>
</style>
en fait ton html est dans la css.
je dis ca car je l'ai mis en forme et chez moi ils sont au centre.
Tu utilise une façon de coder qui est obsolete. les table , les align center....
Bonjour j'ai copié uniquement la partie css et html des boutons de ma page et effectivement j'ai oublié de copier
</style>à la fin de mon css ce qui n'est pas le cas sur ma page ! ( le reste me semblant pas intéresser le problème ) , sur Ie effectivement c'est centré mais pas sur Google chrome, safari et Firefox d'où ma question merci de t'intéresser à mon problème
la copie d'écran est faite depuis chromium, la version libre de chrome
celle ci depuis iceweasel la version superlibre de firefox chez Linux
chez moi j'ai pas de souci une fois que j'ai remis en ordre ton code. En fait je disais cela car dans le bout de code que tu as donné (merci de pas avoir tout mis ) ton html est dans les balises <style></style>
je voulais juste savoir si c'était une erreur de copier coller ou si c'est vraiment ton code
voici ton code une fois modifier :
sa dit quoi chez toi ?
celle ci depuis iceweasel la version superlibre de firefox chez Linux
chez moi j'ai pas de souci une fois que j'ai remis en ordre ton code. En fait je disais cela car dans le bout de code que tu as donné (merci de pas avoir tout mis ) ton html est dans les balises <style></style>
je voulais juste savoir si c'était une erreur de copier coller ou si c'est vraiment ton code
voici ton code une fois modifier :
<style type="text/css">
a:link {
text-decoration: none;
border: none outline-style :none;
}
a:hover {
color: black;
border: none;
cursor: pointer;
outline-style: none;
}
.submit {
width: 35px;
height: 35px;
background: #000000;
font: bold 25px monotype corsiva;
outline-style: none;
border-radius: 50%;
border: 2px solid #ffffff;
color: #ffffff;
}
.submit:hover {
width: 35px;
height: 35px;
background: #000000;
font: bold 25px monotype corsiva;
outline-style: none;
border-radius: 50%;
border: 2px solid #FFFFFF;
color: #FF8000;
}
</style>
</head>
<body>
<div align="center">
<table align="center" border=0>
<tr>
<td width="60">
<div style="text-align:left;">
<input type="submit" id="left-but" class="submit" value="<"/>
</div></td>
<td width="60">
<div style="text-align:right;">
<input type="submit" id="right-but" class="submit" value=">" />
</div></td>
</tr>
</table>
</body>
sa dit quoi chez toi ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Et bien merci pour ta réponse mais ça n'a pas changé grand chose je n'arrive pas à mettre un screen !
non mais je te crois. Si tu veux mettre des screens tu peux les hébergé ici :
https://imageshack.com/
je vais te modifier cela...laisse moi 5 minutes
https://imageshack.com/
je vais te modifier cela...laisse moi 5 minutes
pour un effet plus sympa j'ai crée un bouton plus grand au départ mais quand tu le sélectionne il s'inversent au niveau taille, je ne suis pas un grand pro en progmais ayant ( il y a longtemps passé une licence de math je m'adapte ! )
tu es saône dans le 25 ?
j'ai reagrder ton code....
<input type="submit2"... /> sa existe pas
met submit tout court
j'ai reagrder ton code....
<input type="submit2"... /> sa existe pas
met submit tout court
Euh non je fait un site pour mon frère qui est installé là bas et qui à comme passion la photo, c'est normal que tu ne vois pas le submit2 car j'ai fait des boutons qui changent d'état, voici le css complet
et la partie d'affichage html
voilà je suis un petit cachotier !!!
<style type="text/css">
body {
background: #000000;
color: #000000;
}
#corps {
text-align: center;
width: 720px;
height:560px;
background: #000000;
margin-left: auto;
margin-right: auto;
with: 720px;
vertical-align: middle;
}
p
{
text-align: center;
line-height:30px;
}
a img
{
border: none;
}
a:link
{
text-decoration:none;
border: none
outline-style:none;
}
a:hover
{
color:black;
border: none;
cursor: pointer;
outline-style:none;
}
.submit2 {
width:50px;
height:50px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #ffffff;
color: #ffffff;
}
.submit2:hover
{
width:35px;
height:35px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #FFFFFF;
color: #FF8000;
}
.submit {
width:35px;
height:35px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #ffffff;
color: #ffffff;
}
.submit:hover
{
width:50px;
height:50px;
background:#000000;
font:bold 25px monotype corsiva;
outline-style:none;
border-radius:50%;
border: 2px solid #FFFFFF;
color: #FF8000;
}
</style>
et la partie d'affichage html
<div align="center"><table align="center" border=0>
<tr>
<td width="60" height="60"><div style="text-align:center;"><input type="submit2" id="left-but" class="submit" value="<"/></div></td>
<td width="60" height="60"><div style="text-align:center;"><input type="submit" id="right-but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>width="275" height="150">
voilà je suis un petit cachotier !!!
salut, j'ai regarder ton code source
tu peux pas mettre un input type="submit2" c'est impossible..
j'ai modifier cela en input type="submit" et c'est aligner, plus de souci
je suis de besançon...a 10 bornes
tu peux pas mettre un input type="submit2" c'est impossible..
j'ai modifier cela en input type="submit" et c'est aligner, plus de souci
je suis de besançon...a 10 bornes
<div align="center"><table align="center" border=0>
<tr>
<td width="60" height="60"><div style="text-align:center;"><input type="submit2" id="left-but" class="submit" value="<"/></div></td>
<td width="60" height="60"><div style="text-align:center;"><input type="submit" id="right-but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>width="275" height="150">
<tr>
<td width="60" height="60"><div style="text-align:center;"><input type="submit2" id="left-but" class="submit" value="<"/></div></td>
<td width="60" height="60"><div style="text-align:center;"><input type="submit" id="right-but" class="submit" value=">" /></div></td>
</tr>
</table>
<p id="title-text"></p>
<p id="alt-text"></p> </div>width="275" height="150">
C'est beaucoup mieux ( sur IE ) mais visuellement il ne me semble pas au milieu du cercle, il me semble centré au niveau du point de la flèche surtout quand il se switch en taille 35px: qu'en penses tu ?
voici mon url
http://fils-de-saone.fr/index.php
Je m'absente 2h environ car je suis de garde ( sp ), je te remercie infiniment de ton aide ;-)
voici mon url
http://fils-de-saone.fr/index.php
Je m'absente 2h environ car je suis de garde ( sp ), je te remercie infiniment de ton aide ;-)
salut, je vois rien d'anormal si ce n'est que tes deux ronds n'on pas la meme taille. Cela peut être une base pour continuer. En effet, je dois partir...rendez vous !
je reviens je pense vers 14h00...je suis souvent sur ce forum...
je reviens je pense vers 14h00...je suis souvent sur ce forum...
Pour la taille des ronds c'est normal car je veux indiquer le sens de rotation en changeant la grosseur du rond ;-) à toute à l'heure et merci du temps que tu m'accordes
C'est peut être mes yeux ?!!!
www.fils-de-saone.fr par contre je viens de regarder avec mon iphone et les boutons sont comment dire, euh ? il est différent le css de safari pour iphone et iPad !!!!
Merci pour ta patience
www.fils-de-saone.fr par contre je viens de regarder avec mon iphone et les boutons sont comment dire, euh ? il est différent le css de safari pour iphone et iPad !!!!
Merci pour ta patience
Me revoilou,
Les problèmes de compatibilités d'humeur entre les différents navigateurs sont usant !
il n'y a plus que sous Google chrome que c'est un poils décalé sur le plus petit bouton voici le screen
http://fils-de-saone.fr/a/sousgoogle.jpg
et voici un screen depuis mon iPhone ou ipad c'est pareil
http://fils-de-saone.fr/a/image.png
Mais si c'est pas l'un c'est l'autre lol sur le livre d'or j'ai fait un cadre avec un legend pour encadrer mon captcha sous tous les navigateurs j'ai des bords ronds et sous Ie carré !
http://fils-de-saone.fr/a/borderie.jpg
à devenir fou !
Les problèmes de compatibilités d'humeur entre les différents navigateurs sont usant !
il n'y a plus que sous Google chrome que c'est un poils décalé sur le plus petit bouton voici le screen
http://fils-de-saone.fr/a/sousgoogle.jpg
et voici un screen depuis mon iPhone ou ipad c'est pareil
http://fils-de-saone.fr/a/image.png
Mais si c'est pas l'un c'est l'autre lol sur le livre d'or j'ai fait un cadre avec un legend pour encadrer mon captcha sous tous les navigateurs j'ai des bords ronds et sous Ie carré !
http://fils-de-saone.fr/a/borderie.jpg
à devenir fou !