Discussion :

[munity]

bonjour le phorum

je développe un petit site pour le boulot assez basique mais j'ai quelques problèmes avec la présentation de deux affiches avec nos services
je bute sur la mise en page de celle ci
en effet je soutaiterai les mettre en cote à cote à peu prés centrées (ca j'ai réussi) par contre je voudrai ajouter un lien de téléchargement juste au dessus de chaque image
j'ai utiliisé figure et figcaption mais cela me décale mes deux images
voici mon code
HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<figure>
 
          <figcaption> <a href="images/Fiche ECRAN 1 SIGNAMEDIA.jpg"download="Ecran1">Télécharger la plaquette </a>
	  <figcaption><br/></figcaption>
	  <img src="images/Fiche ECRAN 1 SIGNAMEDIA.jpg" style="margin-left:220px;float:left;"  />
 
        <figcaption2> <a href="images/Fiche ECRAN 2 SIGNAMEDIA.jpg"download="Ecran2">Télécharger la plaquette</a>
        <figcaption2><br/></figcaption2>
	<img src="images/Fiche ECRAN 2 SIGNAMEDIA.jpg" style="margin-right:220px;float:right;" />
 
</figure>

CSS

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
figcaption {
    color: black;
    font: italic smaller sans-serif;
	padding: 10 10;
		margin:15
}
 figcaption2 {
    /**background-color: #eee;*/
    color: black;
    font: italic smaller sans-serif;
	padding: 10 10;
	margin:675
}
img
{width: 650;
height: 900;
}

Voici le code pour mon frame

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
.frame {
	width: 650;
	height:800;
	background: #eee;
	border: 3px solid red;
	margin: auto; 
	padding: 5px 5px;
}
 
.frame2 {
	width: 650;
	height: 800;
	background: #eee;
	border: 3px solid red;
	margin: auto; 
	padding: 5px 5px;
}

mais cela ne va pas comme je souhaiterai
y aurait il une âme charitable pour m'aiguiller ou m'indiquer ou je me trompe

merci d'avance

david

[Invité]

Bonjour,

• <figcaption2> ?? si tu inventes des balises...
• padding: 10 10; : si tu ne mets pas l'unité (px ? % ? ... ?), ça ne sera pas pris en compte

Il faudrait au minimum apprendre les BASES du HTML et du CSS !

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="images">
  <figure>
    <img src="images/Fiche ECRAN 1 SIGNAMEDIA.jpg" /><br />
    <figcaption><a href="images/Fiche ECRAN 1 SIGNAMEDIA.jpg"download="Ecran1">Télécharger la plaquette</a></figcaption>
  </figure>
 
  <figure>
    <img src="images/Fiche ECRAN 2 SIGNAMEDIA.jpg" /><br />
    <figcaption><a href="images/Fiche ECRAN 2 SIGNAMEDIA.jpg"download="Ecran2">Télécharger la plaquette</a></figcaption>
  </figure>
</div>

Code css :

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

1
2
3
4
5
6
7
.images {
	display:flex;
  justify-content:center;
}
 .images figure {
   text-align:center;
}

[munity]

Bonjour jreaux62
Merci pour ta reponse
Oui je suis en train d'apprendre les bases alors desole si je fais des erreurs
Pour ce qui des balises comme j'ai deux images je pensais qu'il fallait en avoir deux
Et dans mon esprit je pensais donc a deux variables distinctes a l'instar de VBA
je commence juste a apprehender ce nouveau language et la creation de site donc ne soit pas trop dur avec moi
Je suppose qu'il doit y avoir un tuto de demarrage sur le site je vais regarder

David