Discussion :

[jmde]

Bonjour,

Mon code html fait afficher deux photos côte à côte, avec le nom au dessus et au dessous la fonction et l'activité.

Comment faire pour que la fonction et l'activité soient affichées à droite de la photo et centrées horizontalement ?

Merci pour votre aide.

Salutations

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
<div id="organigramme">
        <ul class="deuxcadres">
          <li>   
            <h3>Claude</h3>
               <img src="Photos-Bureau/Pierre-150x113.png" alt="" width="150" height="113" />
               <div class="fonction Style1">SECRÉTAIRE GENERAL</div>
               <div class="activite Style1">TIR A L'ARC</div>
          </li>
 
          <li>
            <h3>Irene</h3>
               <img src="Photos-Bureau/Anne-150x113-1.png" alt="" width="150" height="115" />
               <div class="fonction">SECRÉTAIRE</div> 
               <div class="activite">FESTIVITES</div> 
          </li>
  </ul>
 </div>

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
h3 {
	margin-top:4%;
	color: #FF0;	/*color: #0000FF;*/	
    }
 
#organigramme {
	margin-top:10%;
   }
 
li {
	float:left;
	width:250px;
	height:175px;
	margin:10px 10px;
	list-style:none;
	text-align:center;
    }
ul.deuxcadres {
	clear:both;
              width:540px; /* 2 cadres + marges */
	margin:20px auto;
	margin-left:auto;
	margin-right:auto;
    }
.fonction, .activite {
	color:#3366CC;
	padding:2px;
	font-family: "Times New Roman", Times, serif;
	font-size: small;	
}

[psychadelic]

le plus simple est d'utiliser le positionnement relatif

https://developer.mozilla.org/fr/doc...positionnement

https://developer.mozilla.org/fr/docs/Web/CSS/position

sans négliger d'utiliser les balises sémantiques : figure, figcaption https://developer.mozilla.org/en-US/...Element/figure