Problème d'affichage : html+css

Bonjour

je débute en html je dois réaliser une page comportant un titre centre

puis deux images avec des liens en dessous

voici mon code :

<!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

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;
	 width:47%;
	 margin-left:35%;
	 }     
  
  
  .title{
	  
	  text-align:center;
  }
    
.pic {
    width:25%;
    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%;
}

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

Merci.

Merci Almtesh

j aimerai bien des explications detaillee sur la facon de mettre en forme du code j ai du mal

En se basant sur du HTML 5, car ton doctype ne précise pas quel version de HTML tu utilises.
Pour ton sujet, la mise centrée d’un titre n’a pas besoin d’un


Un simple paragraphe suffit:

<p style="text-align:center">Ce texte est placé au centre.</p>

Pour mettre deux images au même niveau tu as différentes solutions dont:

  • Le tableau d’une seule ligne avec deux colonnes
  • Deux divavec positionnement
  • La disposition en colonne

Les tableau sont à éviter en fait, mieux vaut utiliser les div.
Pour cela il faut utiliser les CSS de positionnement: Inline, relatifs, absolus, adhérent etc…

Il faut garder en mémoire le fait que les contextes sont inclusifs d’un bloc à un sous-bloc.
Il est aussi possible d’utiliser une disposition par colonne.
Pour trouver tout un tas de notion bien décrites avec des exemples:

Bonjour

Essaye avec ce qui suit :

<!DOCTYPE html>
<html dir="ltr" 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 des fêtes de Noël</h1>
        <div class="pic">
            <img src="images/nike.jpg" alt="Logo NIKE" width="300" height="300">
            <br>
            <a href="http://www.nike.com">Cliquez-ici</a>
        </div>
        <div class="pic">
            <img src="images/under.png" alt="Logo UNDER ARMOUR" width="300" height="300">
            <br>
            <a href="https://www.underarmour.fr/fr-fr/">Cliquez-ici</a>
        </div>
    </div>
    <hr>
    <footer>
        <p>© Pat66 2022</p>
    </footer>
</body>
</html>
body {
    font-size: 80%;
    font-style: normal;
    font-family: verdana;
    background-color: #fd6c9e;
    color: #87ceeb;
}
     
footer {
    float: right;
    font-size: 80%;
    padding-right: 2%;
}

.pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}       

.title {
    color: white;
}

.main {
    text-align: center;
}     

.p {
    font-style: italic;
}

.a {
    font-size: larger;
}  

a:link {
    color: white;
}

a:visited {
    color: green;
}    

a:hover {
    color: yellow;
}           

Voir aussi :

Permet de déclarer du html5, pas besoin de préciser la version.

Pour les images tu peux utiliser « figure » et « figcaption » pour la légende.

Pour tes images le display est en inline, réduis ta margin-left ou tu mets margin:0 auto;

C’est class=« pic », pas pic=« pic », nom d’un pic-pirate :stuck_out_tongue:

1 J'aime

Mets plutôt des em ou des rem

Ça se fait plus ça

Tu y est presque, mais il n’y a pas de positionnement des div les uns par rapports aux autres.

Pourtant :

Je rappelle que :

J’ai dit que les images sont de display inline par défaut, mais si elles sont encapsulées dans des div qui elles sont de type block par défaut, normal qu’elles s’affichent en-dessous les unes des autres.
Remplacer « display:block; » dans le .pic par « display:inline-block; »

En même temps je fais tout de tête depuis mon tel là, j’ai fait aucun test, et le code je l’ai parcouru assez rapidement ^^

Je zieuterai ce soir sur pc, avec des tests et tout et tout :stuck_out_tongue_winking_eye:

1 J'aime

Merci a tous

Chose promise, chose dûe! Voici ce que tu cherches clé en main. Comme j’ai précisé, pour les fontes il vaut mieux utiliser les unités « em » ou « rem » (non c’est pas le groupe de musique :stuck_out_tongue: ). Pour rappel, 1em = la largeur par défaut d’un caractère dans ton navigateur. Comme tu voulais 80%, cela correspond à 80/100=0.8em, que j’ai corrigé plusieurs fois mais que normalement tu ne pourrais mettre qu’une seule fois dans le css de ton body, puisque tu mets la même taille partout. Je t’ai aussi indenté correctement ton code html et css. Je t’ai mis en commentaire 2 propriétés css car elles ne servent à rien pour le centrage (sauf à le pourrir :wink:), ça se fait « tout seul » avec les valeurs par défaut (du moins sous chromium 103 chez moi).

Fini le bla-bla, envoie le pâté! :grinning_face_with_smiling_eyes:

L’archive tout cuit mais une fois téléchargée tu dois retirer le « .log » à la fin pour avoir l’archive, je l’ai rajouté pour pouvoir uploader ici, sinon on a un message d’erreur:
Pat66.zip.log (12,6 Ko)

Le html:

<!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">
                        <figure>
                              <img  src="images/nike.jpg" alt="Logo NIKE" width="300" height="300">
                        </figure>
                        <figcaption>
                              <a href="http://www.nike.com">Cliquez-ici</a>
                        </figcaption>
                  </div>
                  <div class="pic">
                        <figure>
                              <img src="images/under.png" alt="Logo UNDER ARMOUR" width="300" height="300">
                        </figure>
                        <figcaption>
                              <a href="https://www.underarmour.fr/fr-fr/">Cliquez-ici</a>
                        </figcaption>
                  </div>
            </div>
            <hr>
            <footer>
                  <p>&copy;&nbsp;Pat66&nbsp;2022 </p>
            </footer>
      </body>
</html>

Le css:

body{
    font-size:0.8em;
    font-style:normal;
    font-family:verdana;
    background-color:#fd6c9e;
    color:#87ceeb;
	padding:0%;
	width:100%;
}

p{
    font-size:0.8em;
    font-style:italic;
}

h1{
    color:white;
    text-align:center;
}

.main{
    text-align:center;
	/*width:47%;*/
	/*margin-left:35%;*/
}

.pic{
    display:inline-block;
    width:25%;
    margin:1%;
}

.pic figcaption a{
    font-size:larger;
}
     
a:link{
    color:white;
}

a:visited{
    color:green;
}

a:hover{
    text-decoration:underline;
}

footer{
    float:right;
    font-size:0.8em;
	padding-right:2%;
}

Pour Pat66, il faudrait que tu attaques les Flexbox et le Grid si tu veux faire du positionnement précis.
car avec du float tu risque de bien vite galérer pour le responsive

Bonjour

@pat66

Si tu déclares dans l’en-tête du document html que ton document va utiliser l’encodage utf-8
il n’est pas nécessaire d’utiliser dans ces pages web des entités html => utilise directement les caractères (accentués et autres) qui te sont déjà accessibles depuis ton système Linux qui devrait sans doute utiliser l’encodage utf-8

Voir le retour de la ligne de commande suivante :

locale

Pour entrer un caractère espace insécable (NO-BREAK SPACE) depuis un système Linux,
tu peux utiliser la méthode d’entrée d’un caractère par son point de code unicode qui, pour le caractère espace insécable est noté : U+00A0

Mais si je te donne l’exemple en utilisant un caractère espace insécable, tu ne verras rien apparaître à l’écran, alors, comme le principe est le même, je vais t’expliquer comment entrer le caractère UTF8 ¾ dont le point de code unicode est noté : U+00BE

Utilise le raccourci clavier Ctrl+Maj+u et tu verras s’afficher un caractère u (U minuscule souligné) qui t’invite alors à entrer la valeur du point de code unicode du caractère que tu veux voir s’afficher.
Donc, à ce moment là, il ne te reste plus qu’à entrer 00BE pour voir apparaître le caractère ¾
ou bien 00A0 pour qu’un caractère espace insécable soit affiché,
ou bien 00A9 pour qu’un caractère copyright (©) soit affiché.

Note :
Dans ces exemples, il n’est pas nécessaire d’entrer les deux chiffres zéro qui précèdent la valeur hexa-décimale, et on peut entrer les lettres de la valeur hexa-décimale en lettres minuscules au lieu de majuscules.


@DarkGagan
la balise <figcaption> doit être située à l’intérieur d’une balise <figure>


@Pat66 et @DarkGagan

Testez le contenu de vos pages web en utilisant le lien suivant : The W3C Markup Validation Service
Testez le contenu de vos feuilles css en utilisant le lien suivant : The W3C CSS Validation Service

1 J'aime

Merci MicP pour cette croustillante reponse

Bonsoir

J ai revu mon code a present
je demande une revue de code
voici mon resultat

f

mon css

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;

}

ht

Pourrais-je avoir des explications sur le fait que les liens ne sont pas en dessous des images
et pourquoi l espace du footer est plus grand ?

NB:je suis un bougre de debutant :smirk:

Il n’y a pas de repositionnement des lien par rapport à l’image (pas de saut de ligne type <br> ou de repositionnement relatif ou absolu dans ton CSS sur la balise <a />

Par ce que ton footer n’est pas redimensionné donc par defaut il occupe le reste de la page.

Pour gagner du temps, je te recommande les tutoriels suivant :

Tutoriel HTML

Tutoriel CSS

et comme dans toute traduction, il arrive qu’il y ait des erreurs,
si tu te débrouilles un peu en anglais ou même simplement en globish
tu préféreras les mêmes pages web dans leur version originale :

HTML Tutorial

CSS Tutorial

Ne saute pas les étapes, car tout dépends de ce que tu auras appris précédemment,
et dans le HTML comme dans le CSS tu verras que c’est très important si on veut pouvoir comprendre et arriver à faire quelque chose qui fonctionne correctement.

Salut

Pat66

De ce que je comprend que tu veuilles faire c’est des cartes.
Il y a vraiment un moyen tres simple de faire cela
j’aurais un code html simple ici

<div class="cards_container">
   <div class="card_item">
      <img> .......
      <a></a> ou balise <p></p> <q></q> tout dépend de ce que tu veux faire lien ou texte liste etc...
   </div>
</div>

en CSS pour le positionnement

.cards_container{
   width: 100vw ou 100%;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
  /*Les propriétés que tu souhaite niveau style*/
}
.card_item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Regarde et expérimente un peu pour voir comment ça se comporte.

1er) J’attire également ton attention, sur la mauvaise pratique que de faire de l’inline style.
C’est à dire mettre du style directement dans ton html.
Pour le simple fait que dans ton code html, ci–dessus, par exemple, ton image sera fixe ! très mauvais pour le responsive (inexploitable sur mobile).
De plus ça te créera des soucis dans tes spécificités CSS car le style in-line à un point plus fort que les classes id etc… dans la cascade.

2e) Je ne vois aucune utilité à ton lien cliquez-ici , cela pourrait être fait simplement en entourant ton img du <a></a> qui ferait de ton image un lien, après en css au moment du :hover tu pourrais faire un tas de chose qui indiquerait que fais ton lien.