Triple captions sur image

Bonjour

Je me suis lancé un défi en créant 3 captions sur une image comme sur le site de l'équipe
le premier caption " sport" devra être situé en haut et à gauche de l'image
le deuxième caption "compétition" juste à droite du premier
et le 3ème caption "description" en mode transparent noir en bas sur toute la largeur de l'image

j'ai un problème au niveau du 2ème caption qui commence à 0 à gauche alors que je voulais le mettre juste après le 1er.

J'espère avoir été clair. Merci beaucoup de vos réponses. Bon week end

.laUne{
	position : relative;
	float : left;
}
.sport{
	background:#3498DB;
	position:absolute;
	color:#CCCCCC;
	padding : 2px;
}
.competition{
	background:#E67E22;
	position:absolute;
	color:#CCCCCC;
	padding : 2px;
}
.description{ 
    position:absolute;
    bottom:10px;
    left:0px;  
    width:100%;  
    background-color:black;  
    font-family: 'tahoma';  
    font-size:15px;  
    color:white;  
    opacity:0.6; /* transparency */  
    filter:alpha(opacity=60); /* IE transparency */  
} 
.p_description{
	padding : 5px;
}

<div class="laUne">
    <h3>Bonnes vacances</h3>
	<p class="laUne"><img src="images/une.jpg" ></p>
        <span class="competition">TOUR DE FRANCE</span>
        <span class="sport">FOOTBALL</span>
	<div class="description">
	      <p class="p_description">La saison sportive vient de se terminer ainsi que les assemblées générales. Il serait temps de laisser nos sportifs prendre le large. (s&#039;enfuir) ...</p>
	</div>
</div>

Bonjour

Quelqu'un a une solution?

merci beaucoup

Bonjour,

Si tu veux le positionner en fonction du 1er élément, il faut alors que le caption2 soit (dans ton code) l'enfant du caption1.

Une simple margin suffira alors à l'aéré

Bonjour

Je pense avoir trouvé la solution
mais n'hésitez pas à me faire des remarques
voici mon code

							
<div class="content">
        <p><img class="picture" src="http://placehold.it/770x300" ></p>
	<p class="cat1">football</p>
	<p class="cat2">championnat de france</p>
	<a href="#"><p class="caption_une">La saison sportive vient de se terminer ainsi que les assemblées générales. Il serait temps de laisser nos sportifs prendre le large. (s&#039;enfuir) ...</p></a>
</div>

.content {
    position : relative;
    margin:0 auto;
}
.picture {
/*    border-radius:0.5em;*/
/*    box-shadow: 0px 0px 0.5em #000000;*/
    width:100%;
}
.cat1 {
    position:absolute;
/*	border-radius:0.5em;*/
    padding:0.25em;
    top:0px;
	left:0; 
/*	right:0;*/
	text-transform:uppercase;
	color : #fff;
	font-weight :800;
	font-size:15px;  
    background-color : #000;
	opacity:0.7; /* transparency */  
	padding : 5px 12px 4px 15px;
}
.cat2 {
    position:absolute;
/*	border-radius:0.5em;*/
    padding:0.25em;
    top:0px;
	right:0; 
/*	right:0;*/
	text-transform:uppercase;
	color : #fff;
	font-weight :800;
	font-size:15px;  
    background-color : #1775df;
	opacity:0.7; /* transparency */  
	padding : 5px 12px 4px 15px;
}
.caption_une {
    position:absolute;
/*	border-radius:0.5em;*/
    padding:0.25em;
    bottom:-15px;
	left:0; 
	right:0;
    color:#fff;
	font-size:15px;  
    background-color : #000;
	opacity:0.7; /* transparency */  
	padding : 5px 12px 4px 15px;
}