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

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 ^^

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 ?

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.

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 :)

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 ?

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.

D'accord oui je vois, merci pour toutes ces explications.