Centrer des images des liens

**labarre2002** · 17/07/2022, 12h51

Bonjour

je débute en html je dois réaliser une page comportant un titre centré puis deux images avec des liens en dessous

voici mon code :

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
<!DOCTYPE html>
 
<html lang="fr">
<head>
 
<meta charset="utf-8">
<meta name="keywords" content="boutique">
<title>B.A.B.A</title>
 
<link rel="Stylesheet"  href="style.css">
</head>
 
 
<body>
 
 
<div class="main">
    <h1 class="title">Promotion de f&ecirc;tes de No&euml;l</h1>
 
 
 
     <div  class="pic">
 
 
          <img  src="images/nike.jpg" alt="Logo NIKE" width="300" height="300">
          <a href="http://www.nike.com">Cliquez-ici</a>
        </div>
 
 
        <div  pic="pic">
          <img src="images/under.png" alt="Logo UNDER ARMOUR" width="300" height="300">
          <a href="https://www.underarmour.fr/fr-fr/">Cliquez-ici</a>
        </div>
 
</div>
      <hr>
<footer>
<p>&copy;&nbsp;Pat66&nbsp;2022 </p>
 
</footer>
</body>
</html>

mon fichier CSS:

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
   body {
      font-size:80%;
      font-style:normal;
      font-family:verdana;
      background-color:#fd6c9e;
      color:#87ceeb;
	  padding:0%;
	  width:100%;
 
     }
 
.p {
    font-size:80%;
    font-style:italic;
 
    }
 
 
.title{
    color:white;
    text-align:center;
 
      }
 
 .main {
	 text-align:center;
 
	 margin-left:35%;
 
        }     
  .title{
 
	  text-align:center;
  }
 
.pic {
    width:30%;
    margin:1%;
 
     }       
   .pic a {
 
	   font-size:larger;
          }  
 
a:link {
 
    color:white;
 
       }
 
a:visited {
 
    color:green;
 
       }    
 
a:hover {
 
    text-decoration:underline;
 
       }           
 
footer{
    float:right;
    font-size:80%;
	padding-right:2%;
}

voici le résultat :

Nom : home.jpg
Affichages : 277
Taille : 79,6 Ko

Pourrais-je avoir des indications pour centrer mes images ainsi que les liens en dessous des images ?

Merci.

**NoSmoking** · 18/07/2022, 09h20

Bonjour,
déjà pour commencer

ne serait-ce pas plutôt

Code html :

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

<div  class="pic">

**labarre2002** · 18/07/2022, 20h39

Merci j ai pas remarque .

**labarre2002** · 30/07/2022, 15h49

Envoyé par labarre2002

Merci j ai pas remarque .

Bonjour

voici mon

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
<! DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"><meta name="keywords"  content="boutique">
<title>B.A.B.A</title>
<link  rel="stylesheet"  href="style.css">
</head>
<body>
 
<div class="main">
 
<h1 class="title">Promotion de F&ecirc;tes de No&euml;l</h1>
 
<div class="pic">
<img src="images/nike.jpg"  alt="Logo Nike" width="380"  height="380">
<a href="http://www.nike.com">Cliquez-ici</a>
</div>
 
 <div  class="pic">
<img  src="images/under.png"  alt="Logo Under armour"  width="380"  height="380">
<a href="http://www.underarmour.fr/f-fr">Cliquez-ici</a>
 
</div>
 
</div>
 
 
<hr>
<footer>
<div>
<p>&copy;&nbsp;Pat66&nbsp;2022</p>
 
</div>
 
</footer>

mon

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body {
	font-size:16px;
	font-family:verdana;
	font-style:normal;
	color:white;
	background-color:#fd6c9e;
	padding:0px;
	}
 
a:link{
 
	color:white;
}
 
a:visited{
 
	color:green;
}
 
a:hover{
 
	text-decoration:underline;
}
 
footer{
	font-size:13px;
	float:right;
	font-style:italic;
}
 
title{
	text-align:center;
	color:white;
	}
 
.main {
 
	text-align:center;
	}
 
img{
	width:250px;
	height:250px;
	}
 
.pic {
 
	text-align:center;
	display:inline-block;
}

pour ce résultat:

Nom : f.jpg
Affichages : 202
Taille : 79,2 Ko

Pourrais-je avoir des explications sur le fait que mes liens ne sont positionnes en dessous des images
et surtout que le lien l espace du footer est large ?

Merci .

Invité · 31/07/2022, 01h13

Bonjour,

mes liens ne sont positionnes en dessous des images

Les images sont considérées comme des éléments inline-block et la balise<a> est aussi de type inline.
Du coups elles ce comportent comme si c'était du texte et ce positionne l'une à la suite de l'autre. Une balise <br> entre ta balise <img> et <a> fera l'affaire pour que tes liens se positionnent en dessous des images.

et surtout que le lien l espace du footer est large ?

Peut-tu préciser?

**labarre2002** · 31/07/2022, 11h39

Bonjour

VBrice la balise <br> résous le problème pour la précision que tu demande regarde ma capture d écran précisément la ligne marque par la balise <hr> et le bas tu remarque que l écart es très grand

**NoSmoking** · 01/08/2022, 12h15

Si tu souhaites que ton <footer> soit au minimum en pas de page tu peux avoir recours à la propriété GRID sur l'élément parent, dans ton cas le <body>.

Structure HTML :

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
<body class="main-grid">
  <header>
    <h1>Gabarit simple avec <code>display:grid</code></h1>
  </header>
  <main>
    <article>
      <h2>Titre</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </article>
    <article>
      <h2>Titre</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </article>
  </main>
  <footer>
    <p>Le footer avec hauteur automatique.
  </footer>
</body>

et, par exemple, le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
.main-grid {
  display: grid;
  height: 100vh;
  max-width: 60em;
  margin: auto;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-gap: .25em;
}

**labarre2002** · 01/08/2022, 17h23

Merci NoSmoking

pour ton message le probleme est resolu

Centrer des images des liens

Centrer un élément en CSS

Discussions similaires

Partager

Partager