avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 6 Oct 2018 - 16:25
Ooh, je vois. Du coup, ça les met tous côte à côté, et quand je réduit l'affichage, ça réduit la largeur des blocs.

Jusque là, pas de soucis, je comprends.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 6 Oct 2018 - 19:21
Tout à fait.
Le flex-box nous permet à l'aide de plusieurs propriétés de personnaliser le positionnement de nos éléments de façon qui reste flexible et en utilisant moins de propriétés comme les marges, padding etc.
On a en tout deux types de propriétés : Les propriétés liés au conteneur et les propriétés lié aux éléments enfants. Le premier groupe va nous permettre de positionner en masse tous les enfants du bloc parent. Le second groupe est pour modifier la position d'un élément spécifique et donc seront mis dans le CSS de l'élément spécifique.

Pour les éléments liés au conteneur nous avons :
- flex-direction
- flex-wrap
- flex-flow (raccourci des deux précédentes)
- justify-content
- align-items
- align-content

Pour les éléments liés aux éléments du bloc, nous avons :
- order
- flex-grow
- flex-shrink
- flex-basis
- flex (raccourci des trois précédentes)
- align-self

Tu trouveras la définition de chacune de ces propriétés dans ce tutoriel

Et on verra ensemble les propriétés que tu ne comprends pas ou qui manquent au tuto.

Comme tu peux le voir il y a beaucoup de propriétés et à chacune ses valeurs mais tu n'as pas à les retenir, ça viendra avec la pratique et aussi tu ne va pas forcément utiliser tout ça. Perso j'utilise selon le besoin une ou deux et j'ai mes propriétés listées dans un document auquel je reviens si besoin.
L'essentiel à ce point et de comprendre chaque propriété comme ça tu n'auras pas de mal à l'utiliser ultérieurement.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 6 Oct 2018 - 23:36
Ça fait beaucoup de choses, mais je crois que j'ai compris, en théorie du moins ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 7 Oct 2018 - 18:39
D'accord, s'il y a une propriété qui te semble difficile à cerner n'hésite pas à m'en faire part.

Examinons maintenant la maquette de notre exo. On va faire quelque chose qui ressemble à ça en premier temps :



J'ai pris un bloc avec 4 paragraphes, voici mon CSS pour te faire gagner du temps.

Code:
.flex-container {
  margin: 10px auto;
  border: 1px solid;
  width : 850px;
  height: 450px;
}

.flex-item {
  background: skyblue;
  width: 30%;
  height: 45%;
  line-height: 4em;
  color: white;
  font-size: 3em;
  text-align: center;
  margin: 10px;
}

Je te laisse essayer alors :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 9 Oct 2018 - 12:27
Je sais pas si j'ai bien compris ce que tu voulais que je fasse mais du coup j'ai fait ça ?_?
https://codepen.io/anon/pen/Xxpxvm?editors=1100
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 9 Oct 2018 - 23:32
Coucou :3

C'est très bien bravo !

Il reste juste une petite chose qui est l'espace vide à gauche sur la première ligne, vu qu'on a mis flex-end.
On va partager l'espace vide sur les blocs de cette ligne. Pour ça j'ai ajouté :

Code:
.flex-item {
flex-grow: 1;
}

Ceci va faire en sorte que le bloc 4 prend toute la largeur aussi. Ce n'est pas vraiment un problème vu la maquette on peut juste aligner le contenu avec text-align: right; vu qu'il n'y a que du texte dans cette partie. Mais sinon j'ai préféré mettre un id au bloc 4 et annuler l'agrandissement du bloc.

Code:
#quart {
flex-grow: 0;
}

Maintenant ajoutons des blocs en flex dans le 2ème. Attention à transformer le p en div parce qu'un paragraphe ne peut contenir que du texte / image.




avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 16:09
Comme ça ?
https://codepen.io/anon/pen/Xxpxvm?editors=1100

Code:
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">
    <div class="flex-container-2">
      <p class="flex-item-2">A1</p>
      <p class="flex-item-2">A2</p>
      <p class="flex-item-2">A3</p>
      <p class="flex-item-2">A4</p>
      <p class="flex-item-2">A5</p>
      <p class="flex-item-2">A6</p>
    </div>
  </div>
  <div class="flex-item">3</div>
  <div class="flex-item" id="quart">4</div>
</div>

Code:
.flex-container {
  margin: 10px auto;
  border: 1px solid;
  width: 850px;
  height: 450px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.flex-item {
  background: skyblue;
  width: 30%;
  height: 45%;
  line-height: 4em;
  color: white;
  font-size: 3em;
  text-align: center;
  margin: 10px;
  flex-grow: 1;
}

#quart {
  flex-grow: 0;
}

.flex-container-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item-2 {
  background: mediumseagreen;
  width: 25%;
  line-height: 2em;
  color: white;
  font-size: 0.5em;
  text-align: center;
  margin: 10px;
}
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 17:08
C'est tout bon :3

Je te laisse alors essayer l'exercice.
On va faire notre structure sans les variables juste avec du texte temporairement et on l’adaptera après en template.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 17:42
Ok je m'attaque à ça tout de suite !

Juste, c'est qui la police ? Et j'ai pas l'image de fond aussi :c
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 18:47
Je crois que j'ai utilisé les mêmes polices que la PA : Architects Daughter et Roboto Condensed.
Pour le fond voilà le lien, j'ai pris celui que j'ai fait pour ma signature.

Yeah I'm lazy and proud /pan


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 20:14
Voila mon essais :
https://codepen.io/anon/pen/MPmJZa?editors=1100

Code:
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Roboto+Condensed" rel="stylesheet">

<div class="QEELbox">
  <div class="QEELtitre">Qui est là ?</div>
  <div class="QEELflexbox">
    <div class="QEELflex1">
      <div>
        <span>Ils sont ensemble !</span>
        <p><a href="">Mihaeel Keehl</a>, <a href="">Mikasa Ackerman</a>, <a href="">Morgan Rey</a>, <a href="">Ricky Zacharias</a>, <a href="">Sonja Nottsen</a>, <a href="">Thandi Mweki</a>, <a href="">Mihaeel Keehl</a>, <a href="">Mikasa Ackerman</a>,
          <a href="">Morgan Rey</a>, <a href="">Ricky Zacharias</a>, <a href="">Sonja Nottsen</a>, <a href="">Thandi Mweki</a>, <a href="">Ricky Zacharias</a>, <a href="">Sonja Nottsen</a>, <a href="">Thandi Mweki</a>,</p>
      </div>
    </div>
    <div class="QEELflex2">
      <div class="QEELflexbox2">
        <p>R</p>
        <p>O</p>
        <p>B</p>
        <p>E</p>
        <p>M</p>
        <p>Y</p>
      </div>
      <span>Les Yakuzas</span>
    </div>
    <div class="QEELflex1">
      <div><span>Joyeux anniversaire !</span>
        <p><a href="">Mihaeel Keehl</a>, <a href="">Mikasa Ackerman</a>, <a href="">Morgan Rey</a></p>
      </div>
    </div>
    <div class="QEELflex3"><strong>10</strong> membres<br/>
      <strong>20</strong> sujets<br/>
      <strong>50</strong> messages</div>
  </div>
  <div class="QEELdernier">Bienvenue au dernier inscrit : Pseudo</div>
</div>

Code:
.QEELbox {
  width: 100%;
  min-width: 760px;
  max-width: 980px;
  height: 500px;
  margin: auto;
  background-color: #fff9f6;
  background-image: url("https://nsm09.casimages.com/img/2018/10/06//18100602381412811115927255.jpg");
  background-repeat: no-repeat;
  font-family: "Roboto Condensed", sans-serif;
}

.QEELtitre {
  text-align: center;
  font-family: "Architects Daughter", cursive;
  font-size: 45px;
  color: #fff9f6;
  text-shadow: 1px 2px #ce7c69;
  height: 110px;
  padding-top: 10px;
}

.QEELflexbox {
  margin: auto;
  height: 300px;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.QEELflex1 {
  border: 2px solid #edcac2;
  padding: 8px;
  width: 30%;
  height: 150px;
  flex-grow: 1;
  margin: 0 5px;
}
.QEELflex1 div {
  background-color: rgba(237, 202, 194, 0.5);
  height: 100%;
  text-decoration: underline;
  color: #edcac2;
}
.QEELflex1 span {
  color: #ce7c69;
  font-size: 20px;
  display: block;
  padding: 5px 10px 0;
  text-align: center;
  font-family: "Architects Daughter", cursive;
}
.QEELflex1 p {
  height: 90px;
  overflow: auto;
  margin: 15px 10px 0;
  font-size: 13px;
}

.QEELflex2 {
  text-align: center;
  width: 27%;
  height: 150px;
  padding: 10px 0;
}

.QEELflexbox2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  justify-content: space-evenly;
}

.QEELflexbox2 p {
  background: black;
  width: 20%;
  max-width: 40px;
  height: 40px;
  margin: 10px;
  line-height: 1.5em;
  color: white;
  font-size: 1.5em;
  text-align: center;
}
.QEELflex2 span {
  display: block;
  padding-top: 10px;
  text-decoration: underline;
  color: #edcac2;
  font-family: "Architects Daughter", cursive;
  font-size: 20px;
}

.QEELflex3 {
  border-bottom: 1px solid #32221b;
  width: 22%;
  padding-right: 25px;
  margin: 0 5px;
  color: #ce7c69;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 30px;
  text-align: right;
}

.QEELflex3 strong {
  color: #33221b;
  font-family: "Architects Daughter", cursive;
  font-size: 20px;
}

.QEELdernier {
  text-align: right;
  margin-top: 35px;
  margin-right: 8%;
  color: #ce7c69;
  font-family: "Architects Daughter", cursive;
  font-size: 21px;
  text-transform: uppercase;
}
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 21:22
Wow c'était rapide, je suis jalouse :p

J'aime bien le résultat c'est parfaitement fidèle à la maquette.

Alors pour les flex1 quand j'ai vu que tu as mis une div à l'intérieur d'une autre j'ai pensé que c'était pour utilisé la propriété opacity uniquement sur le fond mais je vois que tu as plutôt géré la transparence avec le coefficient alpha du rgba, ce qui est ingénieux. Seulement ça devrait t'éviter d'utiliser la 2ème div.
Pour ça on ne va pas utiliser une bordure (border) mais plutôt un cadre externe (outline).
La différence est la suivante :
- border se trace à l'extrémité de notre boite et fait partie des dimensions largeur/hauteur de l'élément.
- outline se trace à l'extérieur du cadre de l'élément. Un outline sera par défaut collé à l'extérieur de la bordure. sa valeur ne fait pas partie de la largeur et hauteur de l'élément. En plus cette propriété vient avec une propriété annexe qui nous permet de définir de combien on peut espacer l'outline de l'élément.
Cette propriété est appelée outline-offset.

Exemple :

Code:
<div style="display:flex; justify-content: space-around;">

<div style="background:lightgreen; width: 100px; height: 50px; border: 2px solid;"> </div>

<div style="background:lightgreen; width: 100px; height: 50px; border: 2px solid; outline: 2px solid red;"> </div>

<div style="background:lightgreen; width: 100px; height: 50px; outline: 2px solid; outline-offset: 5px;"> </div>

</div>










Pour les titres, je ne vois pas l'intérêt de mettre une span si c'est pour lui mettre un display: block. Rien ne t'oblige à utiliser un élément inline en premier lieu.

Pour les groupes, on va voir comment faire des onglets, j'ai pensé que ça sera une bonne opportunité pour voir un nouveau script.

L'alignement avec space-evenly ne fonctionne pas sur IE. Très peu de gens utilisent IE mais juste au cas où autant mettre space-around.

Sinon tu n'es pas obligée d'utiliser les unités responsive em et %. Tu peux mettre les largeurs en % pour que ça s'adapte à tous les écrans mais le reste il vaut mieux avoir les mêmes unités partout pour ne pas avoir des disparités dans l'affichage.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 10 Oct 2018 - 22:58
@Reine des Ténèbres a écrit:Alors pour les flex1 quand j'ai vu que tu as mis une div à l'intérieur d'une autre j'ai pensé que c'était pour utilisé la propriété opacity uniquement sur le fond mais je vois que tu as plutôt géré la transparence avec le coefficient alpha du rgba, ce qui est ingénieux. Seulement ça devrait t'éviter d'utiliser la 2ème div.
Pour ça on ne va pas utiliser une bordure (border) mais plutôt un cadre externe (outline).
À vrai dire, j'ai beaucoup galéré avec cette partie là, j'ai eu du mal à trouver comment faire pour mettre l'opacité que sur le fond et je ne connaissais pas l'outline non plus, j'étais paumé ! x) Je vais changer ça :3

@Reine des Ténèbres a écrit:Pour les titres, je ne vois pas l'intérêt de mettre une span si c'est pour lui mettre un display: block. Rien ne t'oblige à utiliser un élément inline en premier lieu.
C'est justement parce que j'avais mis une div en trop pour le cadre au dessus que du coup j'étais obligé de mettre un span ici, en fait. Du coup, comme j'ai corrigé le truc du dessus, je change ça ;)

@Reine des Ténèbres a écrit:L'alignement avec space-evenly ne fonctionne pas sur IE. Très peu de gens utilisent IE mais juste au cas où autant mettre space-around
Modifié alors c:

@Reine des Ténèbres a écrit:Sinon tu n'es pas obligée d'utiliser les unités responsive em et %. Tu peux mettre les largeurs en % pour que ça s'adapte à tous les écrans mais le reste il vaut mieux avoir les mêmes unités partout pour ne pas avoir des disparités dans l'affichage.
Je pensais que  c'était mieux justement de mettre des % le plus souvent possible, j'avais peur d'avoir mis trop souvent des px moi ! x'3 J'ai enlevé mon padding en % (c'était bien lui le soucis ?) et j'ai mis les polices et line-height en px pour les groupes.

Tout est changé du coup, toujours là : https://codepen.io/anon/pen/MPmJZa?editors=1100

@Reine des Ténèbres a écrit:Pour les groupes, on va voir comment faire des onglets, j'ai pensé que ça sera une bonne opportunité pour voir un nouveau script.
I AM READY dance
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 18 Oct 2018 - 14:11
Coucou :3

Je m'excuse du retard, j'ai eu une opération et je n'ai pas pu me connecter depuis, rien de grave ne t'inquiète pas j'étais juste un peu étourdi à cause des médicaments post-opératoires.

Alors, c'est bon pour les modifications.
Pour les unités c'est un peu délicat. La norme (ou plutôt la mode lol) serait d'utiliser les unités responsives, mais pour ça il faut les utiliser convenablement et jusqu'au bout.
Imagine que tu vas faire un rapport scientifique pour expliquer une expérience (j'espère que tu es en S et non en L pour que ça fonctionne lol).
On sait tous que 1 L = 1 dm³ ou 1Kg = 2.2 lbs enfin tu peux imaginer ce que tu veux en unité.
Dans ton rapport tu ne vas quand même pas à t'amuser à utiliser tantôt le kg et tantôt le livre (lbs). C'est soit l'un soit l'autre.
C'est un peu la même chose en codage, c'est soit qu'on va utiliser du responsive soit des valeurs fixes.
Si j'utilise par exemple une police avec une valeur qui doit s'adapter à l'écran dans un bloc de largeur fixe. Je pourrai me trouver sur un petit écran de 7", ma police va s'adapter elle sera donc petite mais mon bloc lui va rester à 300px par exemple. J'aurais donc un petit texte au coin d'un grand bloc ce qui altère l'esthétique de base.
Donc si mon codage est responsive tout devrait s'adapter pour garder le même résultat visuel ou presque, si mon codage n'est pas responsive il devrait quand même être consultable avec le même résultat visuel en scrollant ou réduisant le zoom de la page en tout cas ça doit rester consistant. Et c'est dans le but de pouvoir quand même regarder l'ensemble des éléments quelque soit la taille de l'écran qu'on utilise des largeurs en pourcentage.




avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 18 Oct 2018 - 15:40
D'accord, je comprends !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 19 Oct 2018 - 16:55
Alors voyons maintenant le script pour les onglets.
Il y a beaucoup de façon d'en faire au fait, on peut contrôler l'alignement en vertical ou en horizontal avec le JS, tu trouveras ce genre de script dans les tutos de manu sur le forum par exemple.
Par contre je préfère le genre de script qui va simplement contrôler le dynamisme des onglets et plutôt positionner les onglets avec le CSS parce que c'est beaucoup plus simple. L'avantage est donc qu'on peut utiliser le même script peu importe le type d'onglets qu'on veut faire, que ça soit horizontal, vertical ou même de façon plus originale.

La procédure est donc assez simple.
On va créer les intitulés des onglets avec le même nom de classe et un id pour chacun avec une suite de numéro. Par exemple :

Code:
<span class="intitule" id="1">onglet 1</span>
  <span class="intitule" id="2">onglet 2</span>
  <span class="intitule" id="3">onglet 3</span>

J'ai mis une span pour avoir des onglets sur la même ligne en horizontal.
Tu peux mettre les onglets dans un bloc pour faciliter la mise en forme et le positionnement surtout, mais ce n'est pas obligatoire pour que ça fonctionne donc je mets juste ce qui est obligatoire pour l'explication.

En suite on va créer des blocs du contenu des onglets avec la même classe également et des id avec les numéros correspondants aux intitulés, bien sûr on va mettre un mot avec le num parce qu'un id devrait être et pour faire la différence. Bref voici l'exemple :

Code:
<div class="description" id="num1"> Je suis la description du premier onglet </div>
<div class="description" id="num2"> Je suis la description du 2ème onglet </div>
<div class="description" id="num3"> Je suis la description du 3ème onglet </div>

Là je ne pense pas qu'on aura besoin de mettre le tout dans un bloc parce qu'un seul onglet sera visible à la fois.

Et finalement on a le script :

Code:
$(document).ready(function() {
  $(".description").each(function() {
    $(".description").css("display", "none");
    $("#num1").css("display", "block");
  });
  $(".intitule").click(function() {
    $(".description").css("display", "none");
    var show = $(this).attr("id");
    $("#num" + show).css("display", "block");
  });
});

Le code est au fait du jQuery donc si tu veux tester sur codepen par exemple u auras besoin de telecharger la base jQuery (settings > JavaScript > Search > tape : jQuery
jQuery est une bibliothèque JavaScript libre créée par pour faciliter l'écriture de scripts, elle arrange les codeurs paresseux parce qu'elle permet de raccourcir considérablement le code JS.
Si on examine le code tu verras que ça a l'air simple même pour des gens qui comprennent rien au JS comme nous /pan

Code:
$(document).ready(function() {
  $(".description").each(function() {
    $(".description").css("display", "none");
    $("#num1").css("display", "block");
  });
$ est le symbole du jQuery d'ailleurs. Cette première partie nous permet d'appliquer la règle display : none à tous les bloc description. Le premier num1 sera l'onglet visible par défaut. si tu mets par exemple num3 c'est le 3ème qui sera visible par défaut. Ceci me permet par exemple d'afficher le contenu de l'onglet New par défaut dans ma signature et quand j'ai un beau cadeau je change 1 par 3 et c'est l'onglet Gifts qui devient visible.

Code:
$(".intitule").click(function() {
    $(".description").css("display", "none");
    var show = $(this).attr("id");
    $("#num" + show).css("display", "block");
  });
Là c'est la partie qui va faire en sorte que le reste des onglets s'affichent au clic d'ailleurs il y a le mot "click" dans le code et si tu te rappelles .click() est appelé une méthode en JS, tout comme .css() ou .attr() etc.
Donc là on lie les intitulés des onglets à leurs descriptions correspondantes et on dit qu'au click le css passe de display none à block.

CodePen

A savoir que tu peux mettre ce que tu veux dans les noms des classes. Mais attention pour les id, les numéros sont importants, on peut changer le nom des groupes mais je n'ai pas réussi à ajouter un petit nom aux numéros des intitulés donc là il faut garder juste des numéros et rien d'autre.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 19 Oct 2018 - 19:18
Okaaay, je crois que j'ai compris !

Du coup, j'ai essayé de mettre les onglets sur les groupes (j'ai aussi mis une couleur à chaque groupe en passant, dans le HTML direct, puisque c'est les couleurs des groupes à mettre... j'me comprends DX )

https://codepen.io/anon/pen/MPmJZa?editors=1100
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 20 Oct 2018 - 23:16
C'est bon pour les onglets, bravo.
Par contre je comprends que tu te comprends xD. Enfin, si tu as du pensé que c'est temporaire vu que sur le forum on a une variable de la légende on ne peut pas transformer une variable qui est juste un petit mot en des onglets vu qu'on besoin de mettre les groupes avec leurs descriptions, donc on supprime généralement la variable et on fait les groupes manuellement.
Du coup pour la personne qui va utiliser ton code, il serait plus simple de changer le CSS que de fouiller dans un template, surtout que la balise contient une classe et un id, il y a le risque d'y toucher par mégarde, dans une commande par exemple vu qu'on met le reste des infos par nous-mêmes. Par contre pour un LS, je peux comprendre qu'il est plus simple d'avoir toutes les modifications à faire dans la même partie, vu qu'il faut que le membre ajoute la description et les noms par lui-même.

Sinon j'ai l'impression que le texte n'est pas bien centré par rapport aux blocs , il y a plus d'espace à droite qu'à gauche. Il sera peut-être mieux de le justifier ?
Ah et j'ai oublié de dire que la partie ils sont ensemble qui correspond aux personnes en ligne devrait aussi devenir la partie des gens connectés il y a 24h au hover. Désolée pour l'oubli.

Est-ce que tu as déjà travaillé sur le template du QEEL, index_body ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 21 Oct 2018 - 18:22
Oui, voila, on s'est compris x'3
De quel texte tu parles qui n'est pas centré ? Je vois pas très bien... ^^'

Et pour le coup des connectés au hover, j'ai un peu paniqué là, je savais pas trop comment m'y prendre pour changer mon code et touut, alors j'ai tenté un truc avec un translate, j'sais pas si c'est bien >//<
Je l'ai enregistré sur un autre lien, histoire de pouvoir récupérer l'ancien après si c'est pas bien, donc c'est là : https://codepen.io/anon/pen/ePjmmZ

J'avais déjà bidouiller un peu le template il y a loooongtemps, un peu au hasard pour faire un QEEL tout simple, j'avais réussit à m'y retrouver un peu, mais c'est tout.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Oct 2018 - 1:48
Alors, je vois pas de problème avec ton hover en translation, c'est même mieux que la procédure habituelle qui nécessite de superposer deux blocs avec le positionnement en absolut. Moins on a de ligne de code, mieux c'est.

Pour le texte non aligné je parlais des pseudos à l'intérieur des blocs flex1. Pour la partie annif c'est compréhensible vu qu'il y a peu de texte mais dans la 1ère partie ça se voit que ce n'est pas bien aligné, le texte est beaucoup plus à gauche ça me fait bizarre. A mon avis autant le justifier ou le centrer, sinon passer la marge en auto, c'est comme tu veux.

Le QEEL ne représente qu'une partie du template index_body. Cette partie est entre la boucle "disable_viewonline"
A l'aide de ce tuto template index_body que tu as peut-être déjà vu, je te laisse faire un premier essai pour mettre les variables aux bons endroits. On verra ensemble le reste après.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Oct 2018 - 18:00
Ah oui je vois ! Tu as raison, j'ai mis en justify du coup ;)

Pour les variables, j'ai fait un premier essai comme ça :
Code:

<div class="QEELbox">
  <div class="QEELtitre">Qui est là ?</div>
  <div class="QEELflexbox">
    <div class="QEELflex1">
      <div class="QEELtranslate">
      <h3>Ils sont ensemble !</h3>
      <p>{LOGGED_IN_USER_LIST}</p>
<h3>Ils étaient là !</h3>
      <p>{L_CONNECTED_MEMBERS}</p>
    </div></div>
   
    <div class="QEELflex2">
      <div class="QEELflexbox2">
        <div class="QEELnomgrp" id="1" style="background:skyblue;">R</div>
        <div class="QEELnomgrp" id="2" style="background:darkorchid;">O</div>
        <div class="QEELnomgrp" id="3" style="background:mediumseagreen;">B</div>
        <div class="QEELnomgrp" id="4" style="background:slateblue;">E</div>
        <div class="QEELnomgrp" id="5" style="background:black;">M</div>
        <div class="QEELnomgrp" id="6" style="background:darksalmon;">Y</div>
      </div>
      <div class="QEELliengrp" id="num1"><a href="">Groupe 1</a></div>
      <div class="QEELliengrp" id="num2"><a href="">Groupe 2</a></div>
      <div class="QEELliengrp" id="num3"><a href="">Groupe 3</a></div>
      <div class="QEELliengrp" id="num4"><a href="">Groupe 4</a></div>
      <div class="QEELliengrp" id="num5"><a href="">Groupe 5</a></div>
      <div class="QEELliengrp" id="num6"><a href="">Les Yakuzas</a></div>
    </div>
    <div class="QEELflex1">
      <h3>Joyeux anniversaire !</h3>
      <p>{L_WHOSBIRTHDAY_TODAY}</p>
    </div>
    <div class="QEELflex3"><strong>{TOTAL_USERS}</strong> membres<br/>
      <strong>20</strong> sujets<br/>
      <strong>{TOTAL_POSTS}</strong> messages</div>
  </div>
  <div class="QEELdernier">Bienvenue au dernier inscrit : {NEWEST_USER} </div>
</div>

Mais euh, je vois pas la variable pour afficher le nombres de sujets ? Est-ce que je devrais utiliser {FORUMCOUNTOPIC*} ?

Et les membres connectés dans les 24 dernière heures doivent être entre balise table en fait ? mais j'avais mis dans un paragraphe, alors je sens que ça va pas marcher... je vais devoir changer mon code pour remplacer mon paragraphe par une div ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Oct 2018 - 19:07
En effet, il n'y a pas de variable pour les sujets, on utilise FORUMCOUNTOPIC. Si tu sais comment faire, vas-y.
Pour les connectés au court des 24/48/72h et aussi les anniversaires, si tu es sous une ancienne version comme phpbb2 il faut les mettre dans un tableau. Tu n'as pas besoin de lignes ou colonnes, il suffit de mettre la balise table, c'est bizarre mais c'est comme ça sur FA donc on fait avec, tu n'auras pas ce problème sur la modernbb et versions ultérieures.

Tu peux déjà tester ton code sur un forum pour résoudre les petits soucis de CSS et pour qu'on puisse voir ce qu'on doit changer avec le JS.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Oct 2018 - 21:39
Alors, voila, c'est mis sur mon forum de test, voila ce que ça donne pour l'instant


J'ai eu du mal, parce qu'au début, le premier bloc (les connectés) se mettait à côté des catégories, et après, il prenait toute la place, sans laisser les autres à côté... J'ai corrigé le soucis en mettannt tout dans un tableau, alors voila la partie des templates qui nous concerne :



Du coup, j'ai du mettre les derniers connectés et les anniversaires dans un tableau aussi sinon ça s'affichait pas, et du coup j'ai du remplacer mon paragraphe avec une div à laquelle j'ai mis une class. J'ai rien changé au css, juste remplacé .QEELflex1 p par .QEELlistmembrs.

Pour le FORUMCOUNTOPIC, je savais pas qu'il marchait pas sur le QEEL, mais du coup j'ai cherché, donc je me suis basé sur ça pour le mettre : https://forum.forumactif.com/t260631-utiliser-les-variables-user-et-forum-autre-part-sur-le-forum c'était la bonne méthode ? D'ailleurs on peut pas utiliser les autres variables du même genre pour le nombre de messages, membres et dernier utilisateur, plutôt que de changer le texte de chaque trucs individuellement ? (c'est bien ce qu'on va faire là après ?)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2875
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 22 Oct 2018 - 22:58
Coucou :3

J'ai supprimé le tableau mais ça ne change rien chez moi, je ne comprends pas pourquoi c'est utile dans ton cas, je peux voir ce que ça donne chez toi sans le tableau ?

Pour le conteur des sujets c'est bon. J'ai jamais essayé pour les autres franchement mais c'est une bonne occasion pour tester, si ça fonctionne j'aurais appris un nouveau truc aussi grâce à toi et ça réduira l'utilisation du JS ce qui nous arrangerait parfaitement.

Pour les derniers connectés et anniversaires j'ai dit de les mettre dans un tableau justement vu que ton forum est en phpbb2.
Pour la mise en forme vu qu'ils sont dans un tableau on utilise ces deux sélecteurs :

Code:
.QEELlistmembrs td.row1, .QEELlistmembrs span {
background: transparent;
}
Et tu les ajoutes aux autres blocs CSS pour la font, couleur et tout ça.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 291
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 23 Oct 2018 - 0:16
@Reine des Ténèbres a écrit:J'ai supprimé le tableau mais ça ne change rien chez moi, je ne comprends pas pourquoi c'est utile dans ton cas, je peux voir ce que ça donne chez toi sans le tableau ?
Eh bien, je viens d'enlever le tableau pour revenir au résultat sans, et ça marche aussi chez moi, alors j'ai pas compris non plus... Pourtant ça marchait vraiment pas, j'avais essayé en mettant dans une div ça changeait rien, puis dans un tableau en mettant juste la balise table et finalement, ça n'a marché que quand j'ai mis les tr et td... En fait, ça me mettait le bloc du "ils sont ensemble" à côté des catégories et tous les autres blocs étaient en dessus mais collés sur la gauche... j'aurais du prendre un screen !  

Mais du coup, ça fonctionne maintenant,, donc tout va bien. J'ai rien compris.

Du coup, pour le compte des membres et messages, j'ai fait de la même façon que les sujets. J'ai pas pu le faire pour le dernier utilisateur néanmoins, parce que la variable ne met pas le lien.

Voila mon code :
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum