28111 sujets

CSS et mise en forme, CSS3

Media object bootstrap

Bonjour, je dois faire un simple media object composé d'une image, d'un titre et d'un petit paragraphe. Mon problème est le suivant, mon image se positionne au dessus du texte et titre (média body) et non pas a gauche. J'ai essayé toutes les solutions (media left...) Et visiblement personnes ne rencontre le même problème que moi. j'ai besoin d'aide, merci!
Modérateur
Bonjour,

Sans code, difficile de dire où tu te trompes.

Le code ci-dessous met l'image à gauche.
<div class="media">
  <img class="mr-3" src="myImg.jpg" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>


Si ça ne marche pas chez toi, le problème est ailleurs.

Amicalement,
Modifié par parsimonhi (11 Mar 2021 - 14:48)
Modérateur
Bonjour,

Guy-greg44 a écrit :
D'où peut donc venir le problème ?


De n'importe où ailleurs.

Amicalement,
D'accord, est ce qu'il faut une bibliothèque bootstrap particulière que j'aurai oublié de lier? D'après plusieurs exemples dont le votre mon code est censé être correct donc je ne vois pas comment me débloquer.
Modérateur
Bonjour,

La page ci-dessous (code complet) fonctionne.

EDIT: utilisation de bootstrap 4.6 au lieu de 4.0 initialement.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Test</title>
<style>
</style>
</head>
<body>
<div class="media">
  <img class="mr-3" src="myImg.jpg" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
</body>
</html>


Tu as donc 2 solutions pour t'en sortir. Soit tu pars d'une page minimale comme celle que je viens de donner et tu rajoutes un par un tes autres éléments tant que ça marche (et alors tu verras à quel moment ça ne marche plus). Soit tu pars de ta page, et tu retires des éléments un par un jusqu'à ce que ça marche.

Eventuellement, tu as une 3e solution. Tu donnes ici un lien vers ta page qui ne marche pas.

Amicalement,
Modifié par parsimonhi (11 Mar 2021 - 15:07)
Meilleure solution
Ok donc effectivement votre code fonctionne chez moi, et j'ai isolé l'erreur, il s'agit de mon href bootstrap. Visiblement j'ai téléchargé une version 5.0.0 et elle ne prend pas en compte media-object. J'ai pourtant accès à toutes les autres fonctionnalités. Merci de votre aide.
Modérateur
Bonjour,

Guy-greg44 a écrit :
Ok donc effectivement votre code fonctionne chez moi, et j'ai isolé l'erreur, il s'agit de mon href bootstrap. Visiblement j'ai téléchargé une version 5.0.0 et elle ne prend pas en compte media-object. J'ai pourtant accès à toutes les autres fonctionnalités. Merci de votre aide.


Bien joué. La version 5 est encore en version beta. Il faut donc bien maitriser si on souhaite l'utiliser.

Et effectivement, .media a été supprimée dans la version 5.

En bootstrap 5, tu peux faire un truc de ce genre :
<div class="d-flex">
    <img class="mr-3" src="myImg.jpg" alt="Generic placeholder image">
    <div class="p-3">
        <h5 class="mt-0">Media heading</h5>
    	Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>


Amicalement,
C'est noté.
Dernière petite question, (je suis repassé sur 4.6 du coup), comment fait-on un media object responsive? Par exemple quand l'écran devient petit (écran Smartphone) l'image passe au dessus du texte pour une meilleure visualisation et non plus à gauche comme sur grand et moyen écran?
Merci Smiley smile
Modérateur
Bonjour,

Guy-greg44 a écrit :
Dernière petite question, (je suis repassé sur 4.6 du coup), comment fait-on un media object responsive?


Réponse 1 : aucune idée, je n'ai jamais fait de site avec bootstrap (que j'ai toujours considéré comme un truc épouvantable).

Réponse 2 : peut-être que si tu rajoutes la classe "flex-wrap" au <div> qui a la classe "media", ça pourrait marcher.

Amicalement,
Sujet clos
Aller à