css avec media queries pour pour 3 pavés ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 25 Mars 2018.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Bonjour

    J'essaye de positionner trois pavés d'après la largeur de l'écran.
    Voici le code html :

    Code:
    
      <div class="interface_services">
       <div class= "service">
       Pavé1
       </div>
       <div class= "other_service">
        Pavé2
       </div>
      <div class= "service">
       Pavé3
     </div>
    </div>
    
    
    Si largeur < 760px, Pavé1 et Pavé3 doivent être côte à côte, en dessous de Pavé2.

    Si largeur > 760px, Pavé 1, 2 et 3 doivent être côte à côte.

    Dans tous les cas, les pavés côte à côte doivent être alignés par le bas.

    Le tout doit être centré.

    J'ai essayé float:left; pour > 760px, mais pas d'alignement possible par le bas.

    J'ai essayé table pour interface_services et table-cell pour les autres ( > 760 px ), çà marche, mais avec inline-block ou block pour interface_services et other_service, çà me fait un étalage maison.

    Comment résoudre ce petit problème css ?

    Merci beaucoup de votre aide.

    Respectueusement.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 845
    J'aime reçus:
    250
    Tu as essayé avec tarteaucitron ? :D

    Si tu montrais un jsfiddle/codepen de ce que tu as testé.
    Tu peux aussi essayer avec flex box.
     
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Rebonjour spout

    J'ai vu à quoi ressemble la syntaxe de flexbox.
    Je ne sais pas comment avec des mediaqueries, mettre deux lignes au lieu d'une ligne ( < 760px ).

    J'ai des pavés qui ne posent pas de problèmes d'encombrement.
    Sinon, si la ligne de 3 pavés était trop longue, ce serait possible avec flexbox, mais là je ne vois pas.

    Respectueusement.
     
  5. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    777
    J'aime reçus:
    85
    <link rel="stylesheet" media="screen and (max-width: 760px)" href="mobile.css" />

    et tu fais ton design mobile dans le mobile .css
     
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Bonjour ABCWEB

    Oui çà je savais déjà. ;)
    Je suis en train d'essayer avec des relative. ( un par pavé ).
    Amicalement.
     
  7. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    777
    J'aime reçus:
    85
    tu peux créer 2 bloc contenant tes pavés en les alignant comme tu souhaite un normal et un mobile et tu fais un display none selon le cas
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
  9. elas
    elas WRInaute impliqué
    Inscrit:
    26 Février 2008
    Messages:
    759
    J'aime reçus:
    31
    de rien
     
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Bonjour

    Voilà c'est fait.

    Voir sur mon site :

    https://www.pronostics-courses.fr

    C'est pour les votes et services.

    Y a plus qu'à adapter les tailles de caractères, 10px est un peu faible en dessous de 640px.

    Respectueusement.
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Rebonjour

    Réflexion faite j'ai des erreurs.

    Sur Firefox, en mode absolute ( < 760px ) , mes transform à 50%, translate (-50%) sont mal interprétés.

    Le tranform décale bien de 50% à droite, mais le translate ne fait rien.

    Et puis en plus, sous mon smartphone Galaxy S4, les services autres que Google+ ne s'affichent pas.

    Est-ce qu'il y a des préfixes de navigateur à mettre ?

    Merci beaucoup de votre aide.

    Amicalement.
     
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Rebond

    Bon, je me suis trompé.

    Ce n'est pas Firefox sur lequel j'ai fait des essais, mais Samsung Browser.
    Ce browser semble bugué avec transform: translate.

    J'ai mis tous les préfixes aux transform.

    Pendant que j'y suis : Est-il nécessaire de mettre transform : origin avant transform : translate ?

    Et puis : Est-ce que çà rend bien avec les navigateurs courants sur smartphones ?

    Merci beaucoup de vos réponses.
    Respectueusement.
     
  13. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    777
    J'aime reçus:
    85
  14. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 882
    J'aime reçus:
    12
    Bonjour Monsieur

    Et par çà, çà marche comment sur votre smartphone ?

    Sur mon Galaxy S4 ( Chrome ), la page d'accueil a ces pavés qui débordent un peu à droite, mais les autres pages non.
    Sur Samsung Browser c'est aussi le cas, mais les services n'apparaissent pas, et tarteaucitron ne fonctionne pas.

    Je vais diminuer le padding des services.

    Voici le site : https://www.pronostics-courses.fr

    Merci à vous.

    Respectueusement.
     
  15. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    777
    J'aime reçus:
    85
    On dirait un site des années 90..
     
    spout apprécie ceci.
Chargement...
Similar Threads - css media queries Forum Date
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
Texte qui apparait au scroll ou au chargement en CSS Débuter en référencement 24 Octobre 2018
trop de style CSS dans un code HTML Demandes d'avis et de conseils sur vos sites 12 Octobre 2018
Quel site pour produire les styles css d'une page ? Développement d'un site Web ou d'une appli mobile 25 Avril 2018
CMS type Forum HTML5 CSS3 SEO Développement d'un site Web ou d'une appli mobile 17 Janvier 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice