1486 sujets

Web Mobile et responsive web design

[Résolu] Bootstrap 4 grid et float right

Bonjour
j'ai besoin dans mon container d'une image (centre.jpg) qui tient sur toute la largeur (container-fluid), mais j'ai aussi besoin d'avoir une image (rond.png), plus petite, qui viendrait par dessus l'image principale, en float-right. En gros, l'image (rond.png) positionnée à droite glisserait par dessus l'image principale (centre.jpg) tenant sur toute la largeur... puis, dans une résolution plus petite, je passerai la petite image (rond.png) sous le contenu. Tant que la résolution est grande, le rendu visuel des 2 images est satisfaisant... Avec une résolution plus serrée, l'image par dessus gène à la visibilité de l'image principale...
Donc voilà ce que j'avais imaginé (sans m'etre encore penché sur l'aspect des résolutions plus petites) : 

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="images/centre.jpg" alt="" class="img-fluid">
      <div class="float-lg-right"><img src="images/rond.png" alt="" class="img-fluid"></div>
    </div>
  </div>
</div>

mais cela ne fonctionne pas car la petite image, qui doit être à droite, en float, ne float pas et passe à la ligne...
Pourriez vous m'aider ?
merci
Modifié par jp.bond (30 Jul 2018 - 14:47)
Bonjour.

Mettre le HTML sans le CSS ou sans un lien vers la page concernée ne sert malheureusement pas à grand-chose.
Modérateur
Hello,

Si j'ai bien compris, tu essaies d'avoir la pastille en superposition sur la grande image ?

Plusieurs possibilités :
- garder les deux images dans le DOM et utiliser une position absolute pour la pastille (avec media querie ou tu passe en position static (valeur par défaut) pour repasser en deux ligne

- garder ta structure actuelle et appliquer un margin-top négatif sur la pastille pour la faire remonter.

- la grande image en background et un placement de la pastille avec flex/margin ou float/clear.

Il existe d'autres solutions mais niveau compatibilité/faisabilité, je pense que c'est déjà pas mal Smiley smile
Merci de ta réponse
c'est justement la solution avec le flex/margin ou float/clear que j'essaie de mettre en place, mais quelque chose m'échappe, je n'y arrive pas. Aurais tu un exemple d'adaptation de mon code pour l'obtenir ? Il y a pleins de solutions déjà toutes pretes avec Bootstrap 4 mais les exemples ne sont pas assez précis et je n'y suis pas arrivé :
https://getbootstrap.com/docs/4.0/utilities/flex/
Modérateur
Ok mais dans ce cas, ton image principale devient un background et plus une image direct du DOM. Est-ce que c'est bien ce que tu as en tête ?
j'avais commencé par mettre mon image en background, mais j'avais du mal à faire en sorte que le background soit bien responsive afin de suivre le redimensionnement...
C'est pour ça que je songeais plutot à une image dans une col-12 dans un container-fluid, puis de mettre l'image ronde par dessus avec un float-right, jusqu'au moment où la résolution ne permettrait plus de positionner l'image ronde à droite car elle viendrait se supperposer avec le texte placé sur le capot de l'ordi... et donc à ce moment passer sur 2 lignes... avec des media queries
Modifié par jp.bond (31 Jul 2018 - 14:41)
ok merci pour cet exemple je vais m'y pencher Smiley cligne
Il me semblait qu'il y avait une solution incluse dans bootstrap 4, mais c'est pas grave, c'est déjà ça !
merci
Sujet clos
Aller à