Partage

Taille texte et <a>

Sujet résolu

5 juillet 2018 à 14:50:55

Yo, j'ai un petit problème au niveau de mon css je n'arrive pas à modifier la taille du texte dans un <a> sans modifier la taille du bouton avec.

CSS

a
{
	display: block;
	list-style-type: none;
	color: gray;
	text-decoration: none;
	font-size: 15px;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	border-radius: 10px;
}
li
{
	list-style-type: none;
	text-align: center;
}
h2
{
	text-align: center;
	color: gray;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	font-size: 40px;

}
#bouton1
{
	display: inline-block;
	background-color: gray;
	color: white;
	font-size: 27px;


}
h4
{
	text-align: center;
	color: gray;
	font-size: 30px;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}
p
{
	text-align: center;
	color: gray;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	margin-top: 70px;
}
div
{
	display: inline-block;
	background-color: gray;
	color: white;
	font-size: 15px;
	background-size: 27px;
	border-radius: 10px;
}

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Le Gamecenter</title>
	<link rel="stylesheet" type="text/css" href="Site.css">
</head>
<body>
	<ul class="navigation">
		<li>
			<center><a href="google.fr">Home</a></center>
		</li>
	</ul>
	<h2>
		Bienvenue !
	</h2>
	<hr color="gray">
	<h4>
		Le Gamecenter
	</h4>
	<p>
		Sur ce site vous trouverez les jeux que j'ai crée,ainsi que certaine de mes vidéos.
	</p>
		<p>
			<center><a href="#site"><div>Je veux voir ça !</div></a></center>
		</p>
	<hr color="gray">
</body>
</html>

Voilà

-
Edité par Elowarp 5 juillet 2018 à 15:08:50

Frogweb

5 juillet 2018 à 14:56:51

Salut,

n'utilise pas <center>. Jamais.

Pour ton problème, c'est normal qu'en agrandissant le texte ça agrandisse ton <a>.
Tu peux peut-être t'en sortir avec un line-height et un height inférieur au line-height. A tester.

PS : il te manque un <h1> avant le <h2> et un <h3> avant le <h4> pour que ton code html soit valide.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Elowarp

5 juillet 2018 à 15:16:37

Si je n'utilise pas <center> mon fond ne veut pas se centrer et pour line-height j'ai pas compris.

Frogweb

5 juillet 2018 à 15:31:30

Peu importe le problème tu ne dois pas utiliser <center>.
Cette balise est dépréciée et obsolète depuis html4, donc depuis 1999...
Le jour, pas si lointain, où les navigateurs décideront de ne plus se soucier de ces vieilles balises il n'y aura plus rien de centré sur ton site (et quelques centaines de milliers d'autres...).

Explique ton problème de fond.

Pour ton problème de bouton, où est-il dans le code html ? je vois bien de la CSS pour #bouton1 mais rien dans le html.

PS : pourquoi tu mets des div dans des <a> ?

-
Edité par Frogweb 5 juillet 2018 à 15:33:50

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Elowarp

5 juillet 2018 à 15:45:15

Mon bouton est ici :

<a href="#site"><div>Je veux voir ça !</div></a>

et j'ai mis des div pour essayer de modifier le texte

Frogweb

5 juillet 2018 à 15:49:33

agentcraftien a écrit:

Mon bouton est ici :
<a href="#site"><div>Je veux voir ça !</div></a>
et j'ai mis des div pour essayer de modifier le

D'accord. Mais ça ne marche pas mieux...
Que veux tu exactement ? Tu souhaites agrandir le texte de ton <a> mais tu ne veux pas que ça modifie le <a>.
C'est à dire ? sa hauteur, sa largeur ? Que le texte ne soit pas collé ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Elowarp

5 juillet 2018 à 16:39:12

Je ne veux pas que les bords de mon<a> soit collé avec le texte,j'aimerai reduire la taille du texte mais pas la taille du <a>

Frogweb

5 juillet 2018 à 16:55:40

Mets un padding.

Et enlève la div.

<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display: inline-block;
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

ChristopherVega

5 juillet 2018 à 18:42:42

Bonjour,

Je ne sais pas du tout comment je suis arriver la mais j'ai vu quelque chose qui m’intéressait , FrogWeb tu as dit ne jamais utiliser "center" mais tu utilise quoi si tu veux centrer ton text dans ce cas? merci d'avance

TryAndShare

6 juillet 2018 à 4:31:12

@ChristopherVega, tu utilises du CSS :

/* Pour les elements inline */
text-align: center;

/* Pour les elements block */
margin: 0 auto;

Le HTML ne sert pas à sytiliser une page.

@agentcraftien, tu devais d'ailleurs aussi supprimer tes <hr color="gray"> et utiliser des border en CSS.

-
Edité par TryAndShare 6 juillet 2018 à 4:33:28

echo AlexandreB

6 juillet 2018 à 12:27:27

faut lire la doc un peu : https://developer.mozilla.org/fr/docs/Web/HTML/Element/center

JuliennePouchard

6 juillet 2018 à 18:55:20

Frogweb a écrit:

Mets un padding.

Et enlève la div.

<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display: inline-block;
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}

Bonjour Frogweb,

votre solution est très bonne, il ne faut pas mettez la balise <div> à l'intérieur <a>

Voici une autre solution, qu'en pensez-vous?

<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display:block;
    margin-left:auto; 
    margin-right:auto
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}

Comment Regarder Amazon Prime sur Android

Frogweb

9 juillet 2018 à 12:10:11

JuliennePouchard a écrit:

Frogweb a écrit:

Mets un padding.

Et enlève la div.

<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display: inline-block;
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}

Bonjour Frogweb,

votre solution est très bonne, il ne faut pas mettez la balise <div> à l'intérieur <a>

Voici une autre solution, qu'en pensez-vous?

<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display:block;
    margin-left:auto; 
    margin-right:auto
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}

C'est une solution mais le problème, puisque le <a> est en display:block, c'est qu'il va prendre toute la largeur disponible. C'est à dire toute la largeur de la page.
Rien d’embêtant au demeurant sauf si on lui mets une couleur de background. Dans ce cas il faudra lui donner un width pour qu'il reste en bouton visuellement.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

quenti77

9 juillet 2018 à 12:18:49

ChristopherVega a écrit:

Bonjour,

Je ne sais pas du tout comment je suis arriver la mais j'ai vu quelque chose qui m’intéressait , FrogWeb tu as dit ne jamais utiliser "center" mais tu utilise quoi si tu veux centrer ton text dans ce cas? merci d'avance

Comment on peut se poser cette question en 2018.

My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL

Frogweb

9 juillet 2018 à 12:21:52

quenti77 a écrit:

ChristopherVega a écrit:

Bonjour,

Je ne sais pas du tout comment je suis arriver la mais j'ai vu quelque chose qui m’intéressait , FrogWeb tu as dit ne jamais utiliser "center" mais tu utilise quoi si tu veux centrer ton text dans ce cas? merci d'avance

Comment on peut se poser cette question en 2018.

Quand on débute...

Si tu cherche "centrer en html" sur 5 résultats tu vas en avoir 2 avec la mauvaise façon.
ET il n'y pas si longtemps, ce sont celle-ci qui remontaient en premier...

-
Edité par Frogweb 9 juillet 2018 à 12:28:19

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

JuliennePouchard

11 juillet 2018 à 22:28:59

Frogweb a écrit:

JuliennePouchard a écrit:
Frogweb a écrit:
Mets un padding.

Et enlève la div.
<a href="#site" class="mon-a">Je veux voir ça !</a>
.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display: inline-block;
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}
Bonjour Frogweb,
votre solution est très bonne, il ne faut pas mettez la balise <div> à l'intérieur <a>

Voici une autre solution, qu'en pensez-vous?
<a href="#site" class="mon-a">Je veux voir ça !</a>

.mon-a
{
    text-decoration: none;
    font-size: 15px;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    border-radius: 10px;
    display:block;
    margin-left:auto; 
    margin-right:auto
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding:10px;
}
C'est une solution mais le problème, puisque le <a> est en display:block, c'est qu'il va prendre toute la largeur disponible. C'est à dire toute la largeur de la page.
Rien d’embêtant au demeurant sauf si on lui mets une couleur de background. Dans ce cas il faudra lui donner un width pour qu'il reste en bouton visuellement.

Bonjour Frogweb

Merci pour l'explication, c'est très clair pour moi maintenant

Comment Regarder Amazon Prime sur Android

Elowarp

16 juillet 2018 à 23:50:02

Merci à tous pour vos réponses, je vais voir si je peux résoudre mon problème demain où après demain

Elowarp

18 juillet 2018 à 18:41:09

ça ne résout pas mon problème

RedTenZ

18 juillet 2018 à 18:47:10

Tu as bien rajouter une classe a ton a et un padding ?

On a pas du bien comprendre ton problème car on arrive bien a changer la taille du bouton avec le code qu'est-ce que tu souhaites au juste ?

-
Edité par RedTenZ 18 juillet 2018 à 18:51:14

Elowarp

18 juillet 2018 à 19:00:20

J'ai bien rajouter le padding et tous le tralala, mais je n'arrive toujours pas à modifier la taille du texte sans modifier celle du bouton.

RedTenZ

18 juillet 2018 à 22:03:38

Bah si tu augmentes le texte tu réduis le padding si tu réduis le texte tu augmentes le padding et c'est tout

Elowarp

19 juillet 2018 à 14:11:28

Nan Je veux modifier la taille du texte sans que ça touche à la forme et à la taille du bouton

Frogweb

19 juillet 2018 à 14:20:28

agentcraftien a écrit:

Nan Je veux modifier la taille du texte sans que ça touche à la forme et à la taille du bouton

Justement, ce que t'indique agentcraftien va faire en sorte de ne pas modifier le bouton.
Après tu peux aussi fixer ton bouton avec width et height mais tu risque d'avoir un débordement du texte.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Elowarp

19 juillet 2018 à 20:02:41

Ok c'est bon merci

Taille texte et <a>

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Taille texte et <a>

Taille texte et <a>

Supprimer

Modérer

Signaler le message aux modérateurs