Sujet Précédent Sujet Suivant

Centrer un texte dans un bouton en css

Fermé
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 - Modifié par zephir94 le 1/03/2014 à 09:38
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 - 1 mars 2014 à 19:21
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. 

 <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

21 réponses

  • 1
  • 2
Réponse 1 / 21
Utilisateur anonyme
1 mars 2014 à 09:14
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....
0
Réponse 2 / 21
Utilisateur anonyme
1 mars 2014 à 09:16



voila les boutons comme je les ai
0
Réponse 3 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 1/03/2014 à 09:40
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
0
Réponse 4 / 21
Utilisateur anonyme
1 mars 2014 à 09:43
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 : 

<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 ?
0

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

Posez votre question
Réponse 5 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 1/03/2014 à 09:54
Et bien merci pour ta réponse mais ça n'a pas changé grand chose je n'arrive pas à mettre un screen !
0
Réponse 6 / 21
Utilisateur anonyme
1 mars 2014 à 09:55
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
0
Réponse 7 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
1 mars 2014 à 10:01
voila ce que j'obtiens

http://fils-de-saone.fr/visuel.jpg
0
Réponse 8 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
1 mars 2014 à 10:10
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 ! )
0
Réponse 9 / 21
Utilisateur anonyme
1 mars 2014 à 10:10
tu es saône dans le 25 ?

j'ai reagrder ton code....

<input type="submit2"... /> sa existe pas

met submit tout court
0
Réponse 10 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 1/03/2014 à 10:18
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 

<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 !!!
0
Réponse 11 / 21
Utilisateur anonyme
1 mars 2014 à 10:18
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
0
Utilisateur anonyme
1 mars 2014 à 10:19
<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">
0
Réponse 12 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
1 mars 2014 à 10:22
Mon frère est à 30 bornes de Vesoul à port sur Soane,
je test et je te dis merci à toi
0
Réponse 13 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 1/03/2014 à 10:33
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 ;-)
0
Réponse 14 / 21
Utilisateur anonyme
1 mars 2014 à 10:33
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...
0
Réponse 15 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
1 mars 2014 à 10:36
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
0
Réponse 16 / 21
Utilisateur anonyme
1 mars 2014 à 16:06
salut, peux tu me faire une capture car chez moi trouve cela normal
0
Réponse 17 / 21
Zephir94
1 mars 2014 à 16:40
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
0
Réponse 18 / 21
Utilisateur anonyme
1 mars 2014 à 16:42
salut, il sont comment ? c'est juste les boutons ?
0
Réponse 19 / 21
Zephir94
1 mars 2014 à 16:44
Te fait un screen d'ici deux heures merci
0
Utilisateur anonyme
1 mars 2014 à 16:45
ok sa marche
0
Réponse 20 / 21
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
1 mars 2014 à 17:58
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 !
0

Discussions similaires

Quel est la touche shift sur le clavier
paoade -
PRIPRI -

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

14 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses
Bouton enfoncé
Elena.marques -
Elena.marques -

2 réponses
symbole arrêt marche
strumpfi -
Raymond PENTIER -

2 réponses