3 images qui restent horizontales, dont une centrée

gnugo -  
Exileur Messages postés 1475 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,


J'ai besoin de placer 3 images comme ceci :
une en haut à droite de la page,
une en haut à gauche
et une autre centrée en haut. Cette image doit être centrée sur la page et ne pas tenir compte des images de droite et de gauche.


Pour l'image centrée, j'utilise l'attribut margin auto
Pour les 2 autres, l'instruction float : left et right

Mais je voudrais que les 3 images restent alignées, or quand je réduis la fenêtre du navigateur, des images passent à la ligne, sortent de leur div si je leur en mets une, j'ai essayé de jouer avec l'attribut overflow mais je perds le centrage de mon image du milieu, l'attribut clear ne résout pas non plus mon problème.

Comment pourrais-je avoir une image fixe en haut à droite, une autre fixe en haut à gauche, et une 3eme au milieu qui reste fixe horizontalement et dont dont seul l'écart par rapport aux bords (=la marge qui permet de centrer) varie.
Si on réduit trop la fenêtre et que les 3 images ne peuvent s'afficher, alors le navigateur doit tronquer et afficher une barre de défilement. Comme si j'avais défini une taille et position fixe pour tout, mais avec une marge qui varie pour centrer l'image du milieu quand la fenêtre est grande. Mais aucune image ne doit chevaucher/passer à la ligne.

Sauriez vous m'aider svp ?
Merci
A voir également:

3 réponses

Réponse 1 / 3
Profil bloqué
 
<img src="image1.png" style="position:absolute; left:0;">
<img src="image2.png" style="position:absolute; right:0;">
<img src="image3.png" style="position:absolute; right:50%;">

?
0
gnugo
 
Merci pour votre réponse

Mais en procédant ainsi, l'image du milieu n'est pas centrée sur l'écran, et surtout si on réduit la fenêtre elles se chevauchent les unes sur les autres.
Sur ce forum par exemple si on réduit la fenêtre du navigateur, le menu reste intact, "accueil' n'entre pas en collision avec "forum" et une barre de défilement horizontale apparait à la place pour voir le reste du menu tronqué
C'est ce comportement que je cherche, tout en ayant mon image du milieu centrée au milieu
0
Réponse 2 / 3
Profil bloqué
 
a ce moment là
faites 3 div en float;left; et un width de XX px
à l'intérieur vous mettez vos images
pour la 1ere faites un text-align:left; celle du milieu text-align:center; et celle de droite text-align:right;
0
Réponse 3 / 3
Exileur Messages postés 1475 Date d'inscription   Statut Membre Dernière intervention   150
 
Salut,
Moi j'ai fais comme ça, pas sur que ça soit optimal, mais ça fonctionne...

Html :
<div id="imgs">
<div id="img1"><center>Image1</center></div>
<div id="img3"><center>Image3</center></div>
<center><p>Image2</p></center>
</div>

Css:
div#imgs {
width:100%;
background-color:#88CC55;
}

div#img1 {
float:left;
width:33%;
background-color:#00CCFF;
}
div#img3 {
float:right;
width:33%;
background-color:#33FF99;
}
0

Discussions similaires

Ca veut dire quoi :3
Moi -
AssassinTourist -

2 réponses
Signification de :3
blanchecanelle -
Pistounette -

5 réponses
signification "<3" dans un sms
lecogno -
Utilisateur anonyme -

3 réponses
Mise à jour logicielle samsung galaxy tab 3 avec kies
nin745 -
nin745 -

9 réponses