[Résolu][Amateur] superposition d'images

Bonjour,
Je travaille toujours sur mon site de contenu sur l'huile d'olive.
Dans ce cadre, je souhaite recréer la page suivante en html et CSS:
http://huiledoliveextra.com/index_archivos/autresvarietesolives.htm

Comment superposer les petits drapeaux sur les photos d'arbre?
Comment faire que ces petits drapeaux apparaissent tous en bas à droite des photos sans pour autant les positionner tous un à un en absolu avec des coordonnées right: top: différentes pour chaque drapeau?

Voici où je suis arrivé, mais je bloque:
http://lepaysdusoleil.com/varietes.php
1) je n'arrive pas à centrer le bolc contenant les photos
2) je n'arrive pas à centrer les descriptions
3) je n'arrive pas à superposer les drapeaux

Je suis amateur et j'ai besoin d'un coup de main d'un pro...!
Merci d'avance


mon code html:

<div class="encart">						
<br/>
<p class="sousflottantecentre">
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicual.jpg" alt="picual" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrust"/><br/><strong class="sousflottante">Picual</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrehojiblanca.jpg" alt="hojiblanca" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrust"/><br/><strong class="sousflottante">Hojiblanca</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrearbequina.jpg" alt="soins" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrust"/><br/><strong class="sousflottante">Arbequina</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicudo.jpg" alt="soins" /></a><br/><strong>Picudo</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrecornicabra.jpg" alt="soins" /></a><br/><strong>Cornicabra</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbreempeltre.jpg" alt="soins" /></a><br/><strong>Empeltre</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrefrontoio.jpg" alt="soins" /></a><br/><strong>Frontoio</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrekoroneiki.jpg" alt="soins" /></a><br/><strong>Koroneiki</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrecailletier.jpg" alt="soins" /></a><br/><strong>Cailletier</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicholine.jpg" alt="soins" /></a><br/><strong>Picholine</strong></hgroup>
</p>
<br/>
<p class="sousflottante">
autre texte
</p>
</div>

CSS:

.icoincrust{ position: absolute; border:none; margin: 0 none;z-index:10;}	
.flottante{	float: left; border: none;margin-top: 10px;margin-right: 10px;	}
.sousflottante{	clear: both;margin: 0 auto;}
.encart	{z-index: 4;display: block;position:relative;width:820px;margin: 0 auto;padding:10px;
border: 4px solid #647762;text-align:justify;	text-justify:newspaper;	color:black;font-family:"Trebuchet MS", Arial, Verdana;font-style:normal; font-weight:normal;background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.7);}

Bonjour,

À lire absolument : Guide de survie du positionnement CSS (et liens associés) !
Basiquement, positionnes explicitement le plus proche parent de l’icône (hgroup pourquoi pas, même si je conteste fortement l'utilisation que tu en fais...), puis positionnes comme bon te semble le picto (positionnement absolu + utilisation des propriétés top, right, left, bottom).

Bon dimanche.

#1 Pour centrer tout ton bloc de <hgroup> englobe-les dans une div avec une class "center" par exemple. En css :

.center {width :700px; margin:auto;} /* pour que le margin auto fonctionne ton bloc doit avoir une largeur définie*/

#2 Pour centrer tes descriptions ajoute la propriété "text-align : center;" sur les parents. Exemple CSS :

 hgroup {text-align:center;}

#3 pour que ton positionnement "absolute" de tes drapeaux fonctionne, le parent doit être en "relative"

.hgroup{position:relative;}

Ensuite il te reste juste à ajuster tes ".icoincrust" avec right et top.

merci 6l20

STP, indique moi quelle est l'utilisation appropriée des hgroup et par quoi je dois les remplacer? une autre div?

6I20

merci pour le lien
je le connaissais, très instructif, je le recommande aussi
mais, je pense que le seul moyen de bien maîtriser les positionnements c'est la pratique
car c'est difficile de traiter dans un tuto tous les cas possibles

LauGau, merci

J'ai essayé de suivre tes reco, mais je dois avoir un conflit quelque part:
* Je n'arrive pas à superposer les drapeaux (5px à partir de la droite et 5px à partir du bas de chaque photo)
* Je n'arrive pas à centrer le bloc de photo sous "blocphoto"


HTML:

<div class="encart">						
<br/>
<p class="blocphoto">
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicual.jpg" alt="picual" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrustdroite"/><br/><strong>Picual</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrehojiblanca.jpg" alt="hojiblanca" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrustdroite"/><br/><strong>Hojiblanca</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrearbequina.jpg" alt="soins" /></a><img src="images/spain.png" alt="drapeau espagne" class="icoincrustdroite"/><br/><strongArbequina</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicudo.jpg" alt="soins" /></a><br/><strong>Picudo</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrecornicabra.jpg" alt="soins" /></a><br/><strong>Cornicabra</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbreempeltre.jpg" alt="soins" /></a><br/><strong>Empeltre</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrefrontoio.jpg" alt="soins" /></a><br/><strong>Frontoio</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrekoroneiki.jpg" alt="soins" /></a><br/><strong>Koroneiki</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrecailletier.jpg" alt="soins" /></a><br/><strong>Cailletier</strong></hgroup>
<hgroup class="flottante"><a href="diete.php/" ><img src="images/arbrepicholine.jpg" alt="soins" /></a><br/><strong>Picholine</strong></hgroup>
</p>
<br/>
<p class="sousflottante">
autre texte
</p>
</div>

CSS:

.blocphoto{	width: 800px; margin: auto; }
.flottante { position:relative; float: left;	border: none;	margin-top: 10px;	margin-right: 10px;	text-align:center;}
.icoincrustdroite{ position: absolute; border:none; z-index:10; bottom:5px; right:5px;}	

.encart	{z-index: 4;display: block; position:relative; width:820px; margin: 0 auto; padding:10px;
border: 4px solid #647762; text-align:justify;	text-justify:newspaper;	color:black; font-family:"Trebuchet MS", Arial, Verdana;font-style:normal; 
font-weight:normal; background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.7);}

Je crois avoir trouvé:
* pour la superposition: à partir du bas il faut que je rajoute les 20px du texte
* pour le centrage, il faut que je rajoute clear:both; dans "blocphoto"
Modifié par JPOl (27 Oct 2014 - 09:19)