Mettre en forme mes balises <A>

**bonjourajax** · 27/05/2018, 00h45

Bonsoir,

double probleme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<style>
a {
color : black;
text-align:center
}
 
</style>
<body>
   <a href="#">bonjour</a>

1) Mon a est détecté a 5 centimetres sur le coté avant que l'on passe la souris dessus
2) sur mobile (samsung internet) un fond se met en arriere plan quand je laisse mon doigt appuyé

Comment corriger ça

Invité · 27/05/2018, 13h00

Pas avec le simple code que tu donnes.

La vérité est ailleurs...

**bonjourajax** · 27/05/2018, 17h47

Le code complet (juste remplacé les phrases originelles)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html>
<head>
 
	<style>
 
                p {
                        padding-top:10%;
                }
 
                a {
                        padding-bottom: 20px;
                        display:block;
                        /* faut remettre la color sinon elle redevient bleue */
                        color:black;            
                }
 
                a:link {
                        text-decoration: none;
                }
 
                a:hover {
                        color : red;
                }
 
                div {
                        font-family: "numeroUn";
                        color:black;
                        text-align:center;
                        font-size:60px;
                }
                
        </style>
</head>
<body>
	<div>
	<p>Une phrase de quelques mots</p>	
	<a href="#">3 mots</a>
	<a href="#">Et encore d'autres</a>
	</div>
</body>
</html>

J'ai aucune feuille de style chargée

Invité · 27/05/2018, 19h07

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 a {
...
                        display:block;

**bonjourajax** · 27/05/2018, 19h14

D'acc, si c'est ca le probleme comment je peut faire pour que mes <a> s'affiche en colonne
(alternative j'avais pensé a mettre 3 <p> et mettre du js dessus mais je prefererais ne pas utiliser js au cas ou l'utilisateur ne l' pas activé)

Invité · 27/05/2018, 20h29

Apprendre le CSS ?

"En colonne"... c'est-à-dire ?

Si tu n'es pas plus précis dans la question, la réponse ne le sera pas non plus.

**bonjourajax** · 27/05/2018, 22h25

comme ca : (en lignes et au milieu de l'écran ), et si possible aligné sur la 1ere lettre de chaque :p

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
                       Premier lien
                       Deuxieme lien
                       Troisieme lien

Pareil que si c'était des <li style="display:block"> sauf que ce sont des <a>
Et que lorsque l'on passe la souris à côté de <a> cela ne déclence pas le a:hover
(et en meme temps que cela ne fasse pas un fond bleu en arriere plan sur mobile)

(Je vais tenter de les mettre aligné sur la premeire ligne je vous renvoie le prochain code dans un instant)
edit :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
 
                p {
                        padding-top:10%;
                }
 
                a {
                        padding-bottom: 20px;
                        display:block;
                        /* faut remettre la color sinon elle redevient bleue */
                        color:black;            
                }
 
                a:link {
                        text-decoration: none;
                }
 
                a:hover {
                        color : red;
                }
 
                #d {
                        color:black;
                        text-align:center;
                        font-size:60px;
                }
                #e {
                      text-align : left;
		      position:relative;
		      margin-left:50%;
                }
 
        </style>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
	<div id="d">
	    <p>Une phrase de quelques mots</p>
        <div id="e">	
	   <a href="#">3 mots</a>
	   <a href="#">Et encore d'autres</a>
        </div>
	</div>
</body>
</html>

Je ne suis pas étonné que ca ne marche toujours pas

Invité · 28/05/2018, 17h12

1- De façon très simple avec un <br /> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="e">
  <a href="#">3 mots</a>
  <br />
  <a href="#">Et encore d'autres</a>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#e { text-align:center; }

2- De façon très classique avec une liste :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<nav id="e">
  <ul>
    <li><a href="#">3 mots</a></li>
    <li><a href="#">Et encore d'autres</a></li>
  </ul>
</nav>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#e li { list-style:none; text-align:center; }

3- "...et si possible aligné sur la 1ere lettre de chaque..."

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#e { text-align:center; }
#e ul { display:inline-block; margin:0 auto; }
#e li { list-style:none; text-align:left; }

"What else ?"

**bonjourajax** · 28/05/2018, 19h02

Merci j'essaye ça tout de suite
edit : impeccable ! je crois que je posterais plus souvent dans le forum css

Mettre en forme mes balises <A>

CSS

Discussions similaires

Partager

Partager