schtroumph

Merci pour ton aide et les liens. Je vais lire tous ça et revoir mon code.

Salut

Je suis sous Joomla 4.4.4 et j'ai une div (avec le même contenu) présente dans plusieurs pages. En responsive, suivant les pages j'ai remarqué que j'ai trois styles de placements des éléments qui reviennent. Pour ne pas dupliquer (voir tripler) les mêmes code j'ai mis dans le fichier _declarations.scss les trois codes correspondant aux différents placements :

%licences-tutos-1-ligne {

    grid-template-columns: 274px 95px 110px 95px 105px;
    grid-template-rows: 1fr;
    
        & .titre
            {grid-column:1; grid-row:1;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:3; grid-row:1;}
        & .img-lal
            {grid-column:4; grid-row:1;}
        & .plus-info-lal
            {grid-column:5; grid-row:1;}
          
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
}

%licences-tutos-2-lignes {

    grid-template-columns: 268px 105px 105px;
    grid-template-rows: 1fr auto;
    
        & .titre
            {grid-column:1; grid-row:1 / span 2;}
        & .img-ccbysa
            {grid-column:2; grid-row:1;}
        & .plus-info-ccbysa
            {grid-column:2; grid-row:2;}
        & .img-lal
            {grid-column:3; grid-row:1;}
        & .plus-info-lal
            {grid-column:3; grid-row:2;}
      
        & .titre {align-self:center;}
      
        & .titre p:after {
            content:":";
            margin:0 0 0 10px;
        }
      
        & img {justify-self:center;}
      
        & .plus-info {text-align:center;}
}

%licences-tutos-3-lignes {

    grid-template-columns: repeat(2, 125px);
    grid-template-rows: auto auto auto;
    
        & .titre
            {grid-column:1 / span 2; grid-row:1;}
        & .img-ccbysa
            {grid-column:1; grid-row:2;}
        & .plus-info-ccbysa
            {grid-column:1; grid-row:3;}
        & .img-lal
            {grid-column:2; grid-row:2;}
        & .plus-info-lal
            {grid-column:2; grid-row:3;}
          
        & img {justify-self:center;}

        & .titre p:after {
            content:"";
            margin:0;
        }
      
        & .plus-info {text-align:center;}
}

Dans _contenu-modules-tutoriels.scss j'ai mis les codes correspondant à chaque page. Pour la page d'accueil c'est :
 

.page-tous-les-tutos .licences-tutos .custom {
    @extend %licences-tutos-1-ligne;
}

Pour le responsive de la première page :

@media (min-width:320px) and (max-width:599px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-3-lignes;
    }
}

@media (min-width:600px) and (max-width:1023px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-2-lignes;
    }
}

@media (min-width:1024px) and (max-width:1180px) {
    .page-tous-les-tutos .licences-tutos .custom {
        @extend %licences-tutos-1-ligne;
    }
}

Et c'est là que ça foire. Sur toutes les largeurs d'écrans ce qui est pris en compte c'est :
 

@extend %licences-tutos-3-lignes;

J'ai fait deux tests.

• Test 01 : j'ai modifié la couleur du titre de cette div suivant la largeur (les codes ont été mis dans les mêmes fichiers). La modification est bien prise en compte suivant la largeur.
• Test 02 : dans _contenu-modules-tutoriels.scss, à la place de "@extend...", j'ai mis le code complet. Les placements, suivant la largeur, est bien prise en compte.

J’espère que j'ai été clair dans mes explications

Salut

Ayant un souci avec WampServer, en attendant de résoudre le problème et pour pouvoir continué à bosser, je me suis installé Ampps 3.9. J'aimerais pouvoir modifier la page avec la liste des sites. Je préférerais que les sites s'ouvrent dans une nouvelle fenêtre et utilisant Joomla j’aimerais arriver sur la page de connexion de l'admin et non sur le site. Avec WampServer j'avais réussis à faire ça (le fichier est dans le dossier www), mais avec Ampps je ne trouve pas le fichier. (il n'est pas dans www).

J'ai fait différemment. En fait j'avais mis un display:grid; juste pour centrer les images qui se trouve dedans. Hors j'avais un peu oublié que c'est possible avec :

width:auto;
margin-left:auto;
margin-right:auto;

Mais il faut que je me penche sur ce grid-column-start car ça pourrait me servir si j'en ai besoin un jour. Avant de (re-)penser au width:auto j'ai donc essayé avec grid-column-start mais ça ne fait pas ce que je voulais. Mais comme tu la écris : En espérant que ça s’applique à ton cas (vu qu’on n’a pas le code sous les yeux). Je ne peux pas te le montrer car je suis en local. Mais va voir ici j'y ai mis le code et l'effet que ça me fait. Le texte ne vient pas se placer à gauche comme avec float.

Salut

J'ai un DIV avec un display:grid et à l’intérieur un autre DIV pour lequel je voudrais lui mettre la même action qu'un float:right. Sauf qu'avec grid le float ne marche pas. Comment je pourrais faire ?

Salut

J'aimerais savoir s'il est possible, et si oui comment faire, de mettre un background-color à une piste avec Grid Layout. Déjà voici le code HTML. Ce que j'aimerais faire c'est mettre sous l'image, le titre et le bouton Plus d'info une bande colorée. J'ai bien pensé ajouter une div (comme dans mon exemple en lien) mais je préférerais ne pas l'y mettre mais colorer simplement la piste où se trouve l'image, le titre et le bouton.