Bonjour à toutes et à tous!

Voilà j'essaye de faire mon cv en HTML5/CSS3 mais ca fait plusieurs jours que je bloque. Je précise que je suis débutant.

J'aimerais mettre plusieurs images avec leurs textes respectives sur la même ligne. J'ai chercher et essayé tout ce que j'ai trouvé sur les forums et le web(float evidement qui ne marche pas, display: inline-block, display: inline-flex et encore bien d'autre). je ne comprend pas pourquoi ça ne marche pas il y a t il quelqu'un qui pourrait m'aider svp?

<article>
    <div id="passion">
        <h2>Centre d'intérêts</h2>
        <ul><div id="liste4">
            <img src="images/gaming.jpg" alt=""><li>Jeux Vidéo</li>
            <img src="images/informatique.jpg" alt=""><li>Informatique</li>
            <img src="images/cuisine1.jpg" alt=""><li>Cuisine</li>
            <img src="images/music.jpg" alt=""><li>Musique</li>
</article>

 CSS 

#passion
{
	position: relative;
	font-size: 100%;
	display: block;
	align-items: baseline;
	margin-left: -80px;
	
}

#passion img 
{
	display: inline-block;
	clip-path: ellipse(50% 50%);
	width: 80px;
	height: 75px;
	float: left;
}

Bonjour ce que moi je t'aurai propose c'est de regouper les images et leur texte dans une div du genre

<div>

img

texte 

<div/>

<div>

img

texte 

<div/>

... 

et ensuite de les mettre dans un conteneur general que tu pourras mettre sous forme de grid ou meme avec flexbox. 

Parce que rien que dans le html tu ne crees pas de boite tu les enchaine directement 

Merci pour ta réponse, j'ai fait ce que tu m'as conseiller mais le float ne marche toujours pas sur l'image et meme avec le conteneur je n'arrive pas à les placés sur la meme ligne. Voila mon nouveau code:

HTML

<article>
    <div id="conteneur">
        <h2>Centre d'intérêts</h2>
        <ul><div id="liste4">
                <div id="passion1"><img src="images/gaming.jpg" alt=""><li>Jeux Vidéo</li></div>
                <div id="passion2"><img src="images/informatique.jpg" alt=""><li>Informatique</li></div>
                <div id="passion3"><img src="images/cuisine1.jpg" alt=""><li>Cuisine</li></div>
                <div id="passion4"><img src="images/music.jpg" alt=""><li>Musique</li></div>
            </div>
        </ul>
    </div>
</article>

CSS

#conteneur
{
	positioon: relative;
	font-size: 100%;
	display: inline-flex;
	flex: 4;
	align-content: flex-center;
	margin-left: -80px;
	width: 100%;
	
}

#passion1 img 
{
	float: left;
	clip-path: ellipse(50% 50%);
	width: 80px;
	height: 75px;
	
}

#passion2 img 
{
	float: left;
	clip-path: ellipse(50% 50%);
	width: 80px;
	height: 75px;
}

#passion3 img 
{
	float: left;
	clip-path: ellipse(50% 50%);
	width: 80px;
	height: 75px;
}

#passion4 img 
{
	float: left;
	clip-path: ellipse(50% 50%);
	width: 80px;
	height: 75px;
}

Tu as mal compris ce que j'ai dis fah tu as compris en partie. Je ne te parlais pas de modifier mais de refaire cette partie ainsi que le css.

Dans ce que tu as fait la maintenant ce qui serait le conteneur serait la div ou tu as mis class="liste4" tu le vois bien c'est lui qui contient tes elements.

Ensuite tu as un div dans ul ca ne se fait pas. 

Ul > li

Si tu as une image de ce que tu essais de faire ce serait plus facile, la cque j'imagines c'est que tu essaies de faire quelque chose comme les card bootstrap. une image avec son texte en dessous et pareil pour toutes les images

-
Edité par zvheer 12 octobre 2021 à 19:10:30

Bonsoir, je vous propose ce code relativement simple et très optimisé. Je ne sais pas si c'est exactement ce que vous souhaitiez mais ce code permet une mise en place responsive très efficace.

Pour le code HTML :

<section id="passion">
    <h2>Centre d'intérêts</h2>
    <article>
        <img src="https://cdn-icons.flaticon.com/png/512/3137/premium/3137272.png?token=exp=1634060579~hmac=99afab99ddc3887eacc2d31df2677d68" alt="Description">
        <p>Jeux vidéos</p>
    </article>
    <article>
        <img src="https://cdn-icons.flaticon.com/png/512/3137/premium/3137272.png?token=exp=1634060579~hmac=99afab99ddc3887eacc2d31df2677d68" alt="Description">
        <p>Informatique</p>
    </article>
    <article>
        <img src="https://cdn-icons.flaticon.com/png/512/3137/premium/3137272.png?token=exp=1634060579~hmac=99afab99ddc3887eacc2d31df2677d68" alt="Description">
        <p>Cuisine</p>
    </article>
    <article>
        <img src="https://cdn-icons.flaticon.com/png/512/3137/premium/3137272.png?token=exp=1634060579~hmac=99afab99ddc3887eacc2d31df2677d68" alt="Description">
        <p>Musique</p>
    </article>
</section>

Pour le code CSS

#passion article
{
    margin-bottom: 15px;
    display: flex;
}

#passion article img
{
    margin-right: 30px;
    display: block;
    height: 50px;
    width: 50px;
}

Bonsoir,

Plutôt que <article>, j'utiliserais <figure> et <caption>, qui sont sémantiquement utilisés pour insérer une image et sa légende dans un <article>

Bonsoir,

+1 Pour ChrisLebure

@Macteaser_- Bonsoir, passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Si vous utilisez une liste <ul> ou <ol> l'enfant direct est obligatoirement un <li> et rien d'autre, donc les <div> ne peuvent être à cette endroit et les images à l'intérieur des <li>.

Inutile d'écrire du CSS si votre HTML n'est pas correctement écrit d'un point de vue sémantique et d'un point de vue de sa validité (pas d'erreurs de syntaxe). 

@Monsieur_Nuns Bonsoir, pourquoi un display: block sur les images?

Bonjour, afin de pouvoir la manipuler comme bon lui semble par la suite. C'était plus une précaution mais c'est vrai que dans son cas, l'utilité n'est pas flagrante. Cependant avec si peu de lignes on peut se le permettre. De plus, il semble être dans une logique d'apprentisage avec un niveau véritablement débutant, si ça peut soulever quelques questions de son côté c'est parfait.

-
Edité par Anonyme 13 octobre 2021 à 11:09:12

@zvheer Ah oui effectivement j'ai mal compris ce que tu m'avais dis je vais tout réecrire en faisant bien attention à la construction de ma page html.

@ChrisLebure Oui effectivement c'est plus approprié je ne réfélchissais pas correctement.

@Monsieur_Nuns Merci pour le code ca ressemble à ce que je veux faire.

@AbcAbc6 Merci du conseil pour la validator c'est vrai que je n'y pense pas tout le temps. En lisant vos messages je me rend compte que j'ai pas réfléchis correctement. En effet moi je voulais lister mes passions avec une image à coté de chaque et je me rends compte que c'est pas forcément le mieux.

Merci à tous les 3 pour vos réponses 

Bonjour,

>> je voulais lister mes passions avec une image à coté de chaque

tu peux remplacer la puce de la liste par une image.

https://developer.mozilla.org/fr/docs/Web/CSS/list-style-image