Le Deal du moment : -47%
Réduction de 47% sur la souris gaming Razer ...
Voir le deal
79.99 €

[Difficile] Catégories #1 - Eavenn


Aller en bas

Eavenn
Newbie

Et voici un petit schéma pour les catégories !  plz
> je n'ai pas mis le texte pour les descriptions mais il n'y a aucun effet, il s'agit du texte brut
> il peut éventuellement y avoir une animation sur les titres des forums

[Difficile] Catégories #1 - Eavenn Jody_210
Eavenn
Date d'inscription : 06/08/2015
Messages : 62

Ayfoth
Newbie

Bon je rends mon code en espérant avoir de précieuses correction (je ne reussisait pas a placer l'icone aux extrémités et à inverser le sens à droite.

Aperçu

Template
Code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Megrim&display=swap" rel="stylesheet"> /*********** CATEGORIES exo 1 ******************/


.exo1 {
    --police-titre: 'Megrim', cursive;
    --main-bg-color: #d2cedb;
    --color-titre-cat: #aeacb0;
    --color-titre-forum: #e1abd0;
    --desc-bg-color: #fdfdfc;
  --color-icon: #e6e4eb;}
  #conteneur{
  position: relative;
    background-color: var(--main-bg-color);
    width: 800px;
    border-radius: 150px 150px 0px 0px / 30px 30px 0px 0px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:1rem;
}

.exo1 h1{
    font-family: var(--police-titre);
    text-align: center;
    color: var(--color-titre-cat);
  font-size: 30px;
  position: relative;
  top: 50px;
  width: 800px;
 
}

.exo1 .forum{
  
     width:auto;
  padding:1rem;
    margin-left: 10px;
    margin-right: 10px;
 

position: relative;
  top: -50px;

}

.exo1 .forum #avatar img{
    
    width: 40px;
    height: 60px;
 position: relative;
  top: 0px;
  
}

.exo1 .forum #icone img{
  width: 40px;
    height: 60px;
 position: relative;
  top: 0px;
  
}



.exo1 .forum .description{
    
    background-color: var(--desc-bg-color) ;
  position: relative;
  top: 60px;
  left: 50px;
   height: 60px;
    width: 310px;
}



.exo1 .forum .description h3{
    font-family: var(--police-titre);  
    color: var(--color-titre-forum);
   position: relative;
  top: -10px;
  font-size: 20px;
}

.exo1 .forum .description p{
    color: var(--color-titre-forum);
    height: 40px;
    width: 310px;
    overflow: auto;
  
    scrollbar-color:  var(--color-titre-forum )white;
    scrollbar-width: thin;
    font-size: 12px;
}


Merci d'avance de m'expliquer ^^
<div class="exo1">
    <!-- BEGIN catrow -->

        <!-- BEGIN tablehead -->
   
    
        <h1 nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</h1>
      
   <div id="conteneur">
          
    
        <!-- END tablehead -->
    
        <!-- BEGIN cathead -->
  
 
        <!-- BEGIN inc -->
  
        <!-- END inc -->
  
        <!-- END cathead -->
    
        <!-- BEGIN forumrow -->
  
        <div class="forum">

    
            <div class="description">
        
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        
                <p>{catrow.forumrow.FORUM_DESC}</p>
        
            </div>
          <div id="icone"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
      
            <!-- BEGIN inc -->

    
            <!-- END inc -->
    
            <!-- BEGIN switch_moderators_links -->
  
    
            <!-- END switch_moderators_links -->
    
            <!-- BEGIN ads -->
    
            <!-- END ads -->
    
    
            <!-- BEGIN avatar -->
    
    
    
            <span id="avatar"> {catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  
    
            <!-- END avatar -->
  
    
        </div>
  
    
        <!-- END forumrow -->
    
    
        <!-- BEGIN catfoot -->
  
    
        <!-- BEGIN inc -->

  
    
        <!-- END inc -->

  
    
        <!-- END catfoot -->  
 

  
<!-- BEGIN tablefoot -->
          </div>
<!-- END tablefoot --> <!-- END catrow --> </div>

CSS
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

Ayfoth
Newbie

Bon je rends mon code en espérant avoir de précieuses correction (je ne reussisait pas a placer l'icone aux extrémités et à inverser le sens à droite.

Aperçu

Template
Code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Megrim&display=swap" rel="stylesheet"> /***********



<div class="exo1">
    <!-- BEGIN catrow -->

        <!-- BEGIN tablehead -->
   
    
        <h1 nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</h1>
      
   <div id="conteneur">
          
    
        <!-- END tablehead -->
    
        <!-- BEGIN cathead -->
  
 
        <!-- BEGIN inc -->
  
        <!-- END inc -->
  
        <!-- END cathead -->
    
        <!-- BEGIN forumrow -->
  
        <div class="forum">

    
            <div class="description">
        
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        
                <p>{catrow.forumrow.FORUM_DESC}</p>
        
            </div>
          <div id="icone"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
      
            <!-- BEGIN inc -->

    
            <!-- END inc -->
    
            <!-- BEGIN switch_moderators_links -->
  
    
            <!-- END switch_moderators_links -->
    
            <!-- BEGIN ads -->
    
            <!-- END ads -->
    
    
            <!-- BEGIN avatar -->
    
    
    
            <span id="avatar"> {catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  
    
            <!-- END avatar -->
  
    
        </div>
  
    
        <!-- END forumrow -->
    
    
        <!-- BEGIN catfoot -->
  
    
        <!-- BEGIN inc -->

  
    
        <!-- END inc -->

  
    
        <!-- END catfoot -->  
 

  
<!-- BEGIN tablefoot -->
          </div>
<!-- END tablefoot --> <!-- END catrow --> </div>

CSS
Code:
CATEGORIES exo 1 ******************/


.exo1 {
    --police-titre: 'Megrim', cursive;
    --main-bg-color: #d2cedb;
    --color-titre-cat: #aeacb0;
    --color-titre-forum: #e1abd0;
    --desc-bg-color: #fdfdfc;
  --color-icon: #e6e4eb;}
  #conteneur{
  position: relative;
    background-color: var(--main-bg-color);
    width: 800px;
    border-radius: 150px 150px 0px 0px / 30px 30px 0px 0px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:1rem;
}

.exo1 h1{
    font-family: var(--police-titre);
    text-align: center;
    color: var(--color-titre-cat);
  font-size: 30px;
  position: relative;
  top: 50px;
  width: 800px;
 
}

.exo1 .forum{
 
    width:auto;
  padding:1rem;
    margin-left: 10px;
    margin-right: 10px;
 

position: relative;
  top: -50px;

}

.exo1 .forum #avatar img{
   
    width: 40px;
    height: 60px;
 position: relative;
  top: 0px;
 
}

.exo1 .forum #icone img{
  width: 40px;
    height: 60px;
 position: relative;
  top: 0px;
 
}



.exo1 .forum .description{
   
    background-color: var(--desc-bg-color) ;
  position: relative;
  top: 60px;
  left: 50px;
  height: 60px;
    width: 310px;
}



.exo1 .forum .description h3{
    font-family: var(--police-titre); 
    color: var(--color-titre-forum);
  position: relative;
  top: -10px;
  font-size: 20px;
}

.exo1 .forum .description p{
    color: var(--color-titre-forum);
    height: 40px;
    width: 310px;
    overflow: auto;
 
    scrollbar-color:  var(--color-titre-forum )white;
    scrollbar-width: thin;
    font-size: 12px;
}

Merci d'avance de m'expliquer ^^
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

'Christa
Fidèle au poste !

Hello !

En premier lieu, je te renvoie au premier exercice où je t'ai donné des conseils, notamment pour te rappeler qu'un identifiant doit être unique. Or, le contenu des boucles de Forumactif se répète. Donc si à l'intérieur d'une boucle destinée à gérer l'affichage d'un forum, tu utilises des éléments avec identifiants, ceux-ci seront répétés autant de fois qu'il y a de forums dans une catégorie.

En somme : N'utilise jamais d'identifiants dans les boucles des templates de ForumActif.

Évidemment, c'est plus subtil que ça, mais ça nécessite de bien connaitre le fonctionnement des templates de FA, donc dans le doute, pas d'identifiants. Par la suite, quand tu t'y connaitras mieux, tu sauras où tu peux te le permettre.

Pour l'heure, j'ai du mal à comprendre exactement ce que tu cherches à faire.

Le problème posé par l'exercice se situe à trois niveaux
- Premièrement, afficher les différents forums d'une catégorie sous forme de grille à deux colonnes. Pour ça, tu as bien obtenu ce résultat, c'est bien.
- Deuxièmement, réussir à mettre le bloc contenant la description et celui contenant l'avatar côte à côte. Il existe plusieurs méthodes pour ça : les flottants, le positionnement, flexbox ou les grilles CSS.
- Troisièmement, réussir à alterner l'emplacement de la description et de l'avatar. Le CSS possède une intéressante pseudo classe :nth-child() qui t'aidera à obtenir ce résultat facilement.

Pour le moment, donc, tu sembles être bloqué sur l'affichage côte à côte de l'avatar, la description et l'icône.

Je nettoie un peu ton code histoire qu'il soit plus simple à lire et manipuler (inutile de garder les boucles vides) :
Code:
<div class="exo1">
    <!-- BEGIN catrow -->

      <!-- BEGIN tablehead -->

      <h1 nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</h1>

      <div id="conteneur">

      <!-- END tablehead -->


      <!-- BEGIN forumrow -->

      <div class="forum">

          <div class="description">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              <p>{catrow.forumrow.FORUM_DESC}</p>
          </div>

          <div id="icone">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </div>

          <!-- BEGIN avatar -->
          <span id="avatar"> {catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
          <!-- END avatar -->

      </div>

      <!-- END forumrow -->

      <!-- BEGIN tablefoot -->
      </div>
      <!-- END tablefoot -->
<!-- END catrow -->
</div>

La partie "forums en grille", est faite, cette étape là on peut la considérer comme franchie. Maintenant, tu dois essayer de revoir le code qui gère l'affichage d'un forum, c'est à dire cette partie :
Code:
      <div class="forum">

          <div class="description">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              <p>{catrow.forumrow.FORUM_DESC}</p>
          </div>

          <div id="icone">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </div>

          <!-- BEGIN avatar -->
          <span id="avatar"> {catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
          <!-- END avatar -->

      </div>

Si on se base sur le schéma proposé, il nous faut trois zones. L'une contiendra le titre, la description, les sous-forums, etc. L'autre contiendra l'icone du forum. La troisième contiendra l'avatar. Il faut les placer côte à côte, et il faut prévoir leur changement de position une fois sur deux. Flexbox est l'outil idéal pour ça, mais tu sembles être parti sur du positionnement. Sauf que voilà, je ne comprends pas ce que tu cherches à faire dans ton CSS. Tes différents blocs sont positionnés de manière relative : pourquoi ?  Connais-tu la différence entre un positionnement relatif et un positionnement absolu ? Serais-tu capable de m'expliquer quel est ton raisonnement, et quel est le résultat que tu souhaites obtenir ?
'Christa
Date d'inscription : 27/10/2018
Messages : 252

Ayfoth
Newbie

Bonjour,
pou moi je mettais en relatif pour qu'il soit positionner par rapport au grid.
Absolu c'est par rapport à l'écran et relatif c'est en fonction du bloc précédent non ?

Pour moi je pensais faire ::

Image (float left) - Description - Icone new (float right) puis pour le second contenu inverser les deux float avec un nth-child mais ca n'a pas fonctionné donc j'ai du mal comprendre le nth-child.

En espérant répondre à tes questions.
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

'Christa
Fidèle au poste !

Hello :)

Alors, le positionnement relatif et absolu, ce n'est pas tout à fait ça ^^

Le positionnement relatif repositionne un bloc dans le flux, par rapport à sa position de départ.
Le positionnement absolu positionne un bloc hors du flux par rapport à un élément parent positionné (s'il y en a pas, c'est par rapport au corps du document, en effet). Généralement, donc, on donne au parent un positionnement relatif, comme ça t'a été expliqué par Artemis à la suite d'un des exercices que tu as fait :)

Le code que tu as partagé ne contient pas du tout de nth-child() ni de flottants, du coup je ne peux pas te dire où tu t'es trompé dans ce domaine :/, mais en tout cas ta solution telle que tu la détailles est tout à fait viable. Je ne peux que te réorienter vers la documentation de la pseudo classe nth-child() pour commencer :)
'Christa
Date d'inscription : 27/10/2018
Messages : 252

Ayfoth
Newbie

Ah oui je comprends mieux le positionnement du coup, enfin je crois par exemple on a :

Bloc conteneur (en relatif)
--> Paragraphe en absolu genre top : 0^px il sera coller au bloc conteneur

Bloc conteneur (en absolu) top : 0 px (celui la sera placé en haut de la fenetre

C'est bien ça ?
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

'Christa
Fidèle au poste !

Exactement ! C'est pour ça que pour placer des blocs en positionnement absolu, il faut toujours s'assurer que leur parent soit lui-même positionné. Comme le positionnement relatif ne sort pas le bloc du flux, c'est généralement la méthode à adopter, parce que ça ne va pas influencer le bloc parent (tant qu'on ne s'amuse pas à définir ses propriétés de placement XD).

Ça veut également dire que tu peux placer des blocs en absolu à l'intérieur d'un élément lui-même positionné de façon absolue. L'important c'est d'être bien conscient de quel élément est le parent de quels autres éléments, et du positionnement de chacun.
'Christa
Date d'inscription : 27/10/2018
Messages : 252

Ayfoth
Newbie

D'accord oui je vois, merci pour toutes ces explications.
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

Contenu sponsorisé


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum