[RÉSOLU] Aligner 6 images horizontalement (+ responsive)

Bonjour,

J'aimerai aligner horizontalement ces 6 images avec des écarts entre chaque équivalent et que le premier soit a 5 pixel de la bordure droite et 5 px de la bordure gauche le dernier. Mon site est responsinve et mobile first je me base donc pour le style de base sur du 479 px : width.

http://sdcs.olympe.in/aide_3.1.jpg

Et qu'a partir de 330 pixels de la largeur de la page, que les images soit sur 2 lignes et que chaque lignes est 3 image chacun + aligné entre eux, pour éviter ce genre de soucis :
http://sdcs.olympe.in/aide_3.2.jpg

Donc pour le troisième point, on devrait travailler avec un media querie avec max-width : 330px; Si je ne dis pas de bétise.

voici le lien du projet pour que vous ayez accès au code source : http://sdcs.olympe.in/no-template/

Encore merci.
Modifié par Dr.Revolte (26 Sep 2012 - 11:21)

Bonjour,

apparemment tu cherches du flexbox justify sous conditions .

Je te propose de tester les médiaqueries pour la largeur, et du texte justifié forcé pour l'alignement horizontal.

En jouant sur letter-spacing via mediaquerie, tu peut partager tes images sur deux lignes selon une ou plusieurs largeur que tu definis.

Demo de base à reprendre à ta sauce si cela te convient : http://dabblet.com/gist/3766297

j'en avais un peu parlé là : http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites , ça peut servir a ligner des boites et sera bientôt simple a mettre en place via CSS avec flex .

++

Hello,
Sans attendre Flexbox, tu peux aussi faire plus simple avec le modèle de boite tabulaire. Voici un truc que j'avais fais il y a quelques temps: http://dev.iamvdo.me/tumblr/tableLayout/

Tu peux t'en inspirer je pense...

ha cool , 2 approche de ton problème.

1) intégrateur CSS pure.
2) intégrateur qui pense en développeur.

Cdt,
GC

Merci beaucoup !

Je vais essayer les 2 techniques et voir la quel est la plus simple (pour moi)

Encore merci, je vais enfin résoudre mon problème.

gc-nomade a écrit :


1) intégrateur CSS pure.
2) intégrateur qui pense en développeur.

Tu veux dire quoi par «qui pense en développeur»?

gc-nomade a écrit :
Bonjour,

apparemment tu cherches du flexbox justify sous conditions .

Je te propose de tester les médiaqueries pour la largeur, et du texte justifié forcé pour l'alignement horizontal.

En jouant sur letter-spacing via mediaquerie, tu peut partager tes images sur deux lignes selon une ou plusieurs largeur que tu definis.

Demo de base à reprendre à ta sauce si cela te convient : http://dabblet.com/gist/3766297

j'en avais un peu parlé là : http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites , ça peut servir a ligner des boites et sera bientôt simple a mettre en place via CSS avec flex .

++

Par contre j'ai une question, sa fonctionne mais juste qu'avec le media queri :

@media only screen and (max-width:350px){
/* on force le passage sur 2 lignes en fonction
des 330px de la question et de la taille
des images */
.justifycenter {letter-spacing:50px;}
}


cela ne fonctionne pas, ou alors je copie mal.

Merci.
Modifié par Dr.Revolte (23 Sep 2012 - 17:50)

@ Dr.Revolte

est-ce dans ton navigateur PC ou sur ton mobile ?
peut-on voir ta page test ?

@vdo93
Ta solution propose une structure complexe, typique de celles produites et nécessaires à des effet de script javascript ou de nombreux plugin pour framework js.

Ma proposition tente de se suffire d'un balisage minimale.

Je trouve le biais des deux approches très intéressantes .

Cdt,
GC

@gc-nomade

Depuis le navigateur de mon pc, je vais essayer avec mon smartphone très bientôt.

Oui voici le lien de test : http://sdcs.olympe.in/no-template/bonnes-adresses.html

Encore merci

edit : Sur un smartphone galaxy s, les 2x3 images sont bien aligné.
Merci beaucoup.

Quel logiciel pouvons-nous utiliser pour tester nos site sur des mobile depuis notre ordinateur ?
Merci
Modifié par Dr.Revolte (23 Sep 2012 - 23:58)

A ton service,

Dr.Revolte a écrit :

Quel logiciel pouvons-nous utiliser pour tester nos site sur des mobile depuis notre ordinateur ?
Merci

Personnellement, je test en local via wi-fi avec mon smartphone et j'abuse de la gentillesse de mes relations proches pour qu'il me disent ce qu'il pensent de telle ou telle page dans leur smartphone sans aucunes autres précisions de ma part. D'ailleurs je demande aussi pour les test PC , j'ai parfois des retours surprenant et différents avec des config à priori similaires, tant sur des bugs d'affichage ou l'utilisation/consultation des pages.

Dans mon HTC , en mode portrait , je n'ai qu'une ligne justifié, en mode paysage, idem , 1 seule ligne justifié.
Résultat attendu selon une résolution/largeur supérieur a 330px (480px X 800px ). Le test me semble concluant depuis mon smartphone.

++

Cela est parfait alors, je vous remercie.
Modifié par Dr.Revolte (25 Sep 2012 - 23:16)

Arf mince, je viens de remarquer un problème de compatibilité de navigateur, il fonctionne partout sauf sur ie (dont ie 9).

Mince je pensais toucher le but

Dr.Revolte a écrit :
Cela est parfait alors, je vous remercie.

Je viens de remarquer qu'en testant sur mon smartphone que le bouton "Menu" est buggé, mais pas sur l'ordinateur, pourtant ce sont les mêmes résolutions, c'est bizarre.

Il vaudrait mieux choisir, bouton ou lien , mais le lien dans un bouton n'est pas logique (autant faire un form avec un input submit ).
CSS peut faire en sorte qu'un lien ressemble à un bouton .

Dr.Revolte a écrit :

Edit : Par contre sur ie9, l'affichage est buggé, a ne fonctionne pas l’alignement.

Pour IE9 , mettre font-size pour .notext a 1px .

Encore merci gc-nomade. Faut que je teste les version ie8 et ie7 également.

Je viens d'ouvrir un post pour mon problème de bouton : http://forum.alsacreations.com/topic-4-63954-1-Probleme-dif-nav-sur-un-bouton-en-float--relative.html#lastofpage

Edit : IE 8 c'est oki, mais ie7 à l'air d’être le remplacent de ie6, il n'en fait qu'à sa tête.
Modifié par Dr.Revolte (26 Sep 2012 - 14:24)

Bonsoir,
Ie7 ne gere pas le pseudo :after, Ne te prend pas la tête avec ça.

Mais si tu veut vraiment y faire quelque chose , alors insere en CC juste aprés le derniere lien.
ex:

<!--[if lte ie7]><span style="display:inline-block;width:100%;"></span><![endif]-->

Et ça ne marchera que pour l'alignement justifié des images, d'un autre coté , je ne connais aucun mobile qui a un IE7 comme navigateur.

De plus c'est un morceau de html que tu vas oublié , qui va trainé dans ta page pour de moins en moins de raison et un jour quelqu'un se demanderas d'où viens ce b@rdel et a quoi qui peut bien servir.


Cdt,
GC

Encore merci GC.

Tu n'as pas tord.

Mais ce bloc sera aussi visible sur la version desktop c'est pour ça, que je cherche à le rendre compatible sur ie7, en espérant que mes futurs visiteurs n'utiliseront pas IE 7.