28111 sujets

CSS et mise en forme, CSS3

Float pour placer une image à côté d'un texte

Bonjour,

J'ai essayé d'utiliser un float-right pour placer une image à droite d'un texte. Ca ne fonctionne que si dans mon code, l'image est placée avant le texte. Est-ce normal ?
Le problème est que sur les petits écrans, je veux que l'image soit sous le texte, je dois donc absolument la placer après dans le code HTML.

Merci pour votre aide.
Modérateur
Bonjour/bonsoir

Si le texte n'a pas a s'enrouler autour de l'image , alors une base sur flex et mediaquerie iront bien .

ex :

<div>
   <img>
   <p>text</p>
</div>

avec en style de base :
div {
  display: flex;
}
div img {
  order: 1;/* order repositionne l'element dans le flux d'affichage */
}
@media screen and (max-width: 600px) {/* exemple sur un écran au plus de 600 pixels de largeur*/
  div{
    flex-direction: column;
  }
}


exemple pour jouer avec : https://codepen.io/gc-nomade/pen/xxRLMVO

tu trouveras dans la partie tutoriels des articles comme :

https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

et Smiley cligne https://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html
Modifié par gcyrillus (21 Feb 2021 - 01:26)
Comment centrer le texte verticalement par rapport à l'image ? J'ai fait un vertical-align : middle, mais ça ne changer rien...
Merci.
Modifié par Airmaster (21 Feb 2021 - 19:03)
Modérateur
Airmaster a écrit :
Comment centrer le texte verticalement par rapport à l'image ? J'ai fait un vertical-align : middle, mais ça ne changer rien...
Merci.


Dans le codepen en flex en exemple donné précédemment, l'image se centre verticalement via un margin vertical en auto.

Depuis le parent(en flex) au lieu du margin, align-items:center peut être utilisé mais aura aussi un effet en horizontal lorsque le CSS(@media) passera en colonne:

1ere démo : (avec margin pour l'image) https://codepen.io/gc-nomade/pen/xxRLMVO

2eme démo avec align-items:center sans margin : https://codepen.io/gc-nomade/pen/yLVzPxb

Pour infos : float et vertical-align sont incompatibles .

dans la section tutoriel : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html qui devrait t'éclairer sur les usages et comment fonctionne ce mode d'affichage(display).

Cdt
Modifié par gcyrillus (22 Feb 2021 - 12:12)
Je n'y arrivais pas car j'utilisais un vertical-align au lieu d'un align-items.
Merci beaucoup, Gcyrillu, pour cette aide précieuse ! La débutante que je suis est très satisfaite du résultat !
Modifié par Airmaster (22 Feb 2021 - 14:27)
Ma joie a été de courte durée car je viens de m'apercevoir que mes images ne rendaient pas bien sur tous les navigateurs.

Voici ma page : https://www.kalyca.fr/fr/content/17-qui-sommes-nous

Je suis sur Chrome, mes images prennent 50 % de la largeur de l'image, c'est parfait.
Sur Firefox, mes images sont toutes petites.
Sur Internet Explorer, elles sont élargies et déformées.

Comment puis-je régler ces problèmes ?

Merci pour votre aide.
J'ai trouvé pour Firefox, j'ai ajouté le CSS flex-shrink: 0 et ça a résolu le problème. Je ne sais pas pourquoi mais ça marche !
Quant à IE, je laisse tomber vu le peu de personnes qui l'utilisent.
Sujet clos
Aller à