Texte description du forum qui ne s'aligne pas au titre du forum

par Melodiam Dim 23 Juil 2023 - 12:23

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://10-gates.forumactif.com/

Description du problème

Bonjour !! Visage souriant

Je viens vers vous parce que je rencontre un petit souci (deux en fait) avec le texte de la description du forum... Comme vous pouvez le voir sur la capture d'écran ou le forum directement, le texte descriptif reste en bloc à droite du titre du forum, or j'aimerais qu'il l'épouse ? Enfin le contourne ? Comme sur cette image : https://media.discordapp.net/attachments/710159789199589416/1131858778204164137/Capture_decran_2023-07-21_a_10.02.27.png?width=993&height=662

J'ai essayé de rajouter un "float" dans mon code CSS mais cela ne marche pas...

Voici mon code CSS :

Spoiler:

Code:: /******LES CATEGRORIES******/ .categoo { margin: auto; width: 860px; } /***le titre****/ .titre-catego h2 { color: #f2e0d9; font-family: 'Bebas Neue', sans-serif; font-size: 53px; border-bottom: 1px solid #f2e0d9; } /****bloc du forum*****/ .forum-wrap { background-color: #fff; width: 860px; flex-wrap: wrap; margin: -30px auto; min-height: 120px; position: relative; } .forum-wrap a, .forum-wrap a:hover { text-decoration: none !important; } /****titre des fo*****/ .forum-title .a-title { color: #fff !important; background: linear-gradient(180deg,rgba(191,208,202,1) 0%,rgba(221,229,226,1) 100%); font-size: 12px; font-family: 'Arial' letter-spacing: 1px; padding: 5px; text-transform: uppercase; font-weight: none !important; } /*****desc des fos*****/ .forum-desc { height: 60px; margin-top: 0px; overflow: auto; padding: 5px; text-align: justify; background: white; width: 522px;flex: 1; font-size: 12px; } .forum-desc::-webkit-scrollbar { width: 3px; } .forum-desc::-webkit-scrollbar-track { background-color: #fff; } .forum-desc::-webkit-scrollbar-thumb { background: #f1ded9; } .desclastf { background: linear-gradient(to top,#ccc18b 0%,#b2a659 100%); width: 225px; height: 50px; text-align: center; padding: 10px; } /****avatar du posteur*****/ .forum-avatar { border-radius: 50%; height: 36px; position: relative; overflow: hidden; margin-left:-30px; border: 4px solid white; width: 36px; } .forum-avatar img { transform: translateY(-50%); width: 100%; height: auto; margin-top: 50%; } .forum-img { height: 50px; width: 50px; border: 10px solid #f2e0d9; } .forum-top { display: flex; justify-content: space-between; width: 100%; } /****dernier message en dessous****/ .forum-last { text-align: center; margin-left: 10px; padding: 5px; width: 170px; border-radius: 2px; background: white; font-size: 10px; } .forum-last span > a:first-child { color: #a7a7a7; font-weight: bold; text-align: center; text-transform: uppercase; } .forum-last span > a:first-child:hover { color: #ccc; } .forum-last:empty, .forum-avatar:empty, .noMessage .stats-forum { display: none; } /****sous forums*****/ .sous-forum { margin-left: 77px; margin-top: -10px; text-align: left; width: 450px; font-size: 11px; background: white; position: relative; } .sous-forum a { color: #d57d54; height: 15px; padding: 1px; margin-right: 1px; text-transform: lowercase; font-family: Arial; font-size: 11px; text-align: left; }

Voici mon template au complet :

Spoiler:

Code:: <div class="categoo"> <div class="titre-catego">{catrow.tablehead.L_FORUM}</div>     <div class="forum-wrap"> <table> <tr> <td> <div class="forum-img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div></td><td> <div class="forum-desc"> <div class="forum-title"> <table><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy"> <a class="a-title" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </h{catrow.forumrow.LEVEL}></div></td><td> {catrow.forumrow.FORUM_DESC}</td></tr></table> </div></td><td> <div class="desclastf"><table><tr><td><div class="forum-last">{catrow.forumrow.LAST_POST} </div></td><td><div class="forum-avatar"> {catrow.forumrow.avatar.LAST_POST_AVATAR} </div></td></tr></table></div></td></tr> </table> <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div> </div>    </div>  <script> const forums=document.querySelectorAll(".forum-wrap");forums.forEach(e=>{e.querySelector(".forum-last").innerText||e.classList.add("noMessage"),e.querySelector('img[title="Nouveaux messages"]')&&e.classList.add("new");const t=e.querySelectorAll(".stats-forum > div");t&&t.forEach(o=>{o.addEventListener("mouseenter",e=>{const t=document.createElement("div");t.id="stats-tooltip",t.innerText=o.getAttribute("data_stats"),document.body.appendChild(t)}),o.addEventListener("mouseleave",e=>{const t=document.getElementById("stats-tooltip");t.parentElement.removeChild(t)}),o.addEventListener("mousemove",function(e){var t=e.pageX+10,e=e.pageY+10;const o=document.getElementById("stats-tooltip");o&&(o.style.left=t+"px",o.style.top=e+"px")})})}); </script>

Mon deuxième petit souci c'est le titre de la catégorie en gras... J'ai essayé de mettre un "font-weight: none !important;" dans mon CSS, j'ai même essayé de rajouter directement une "div style" dans mon template au niveau du titre de la catégorie, mais celui-ci reste en gras haha... sauriez-vous comment je peux enlever le gras du titre ?

Merci à vous pour votre temps et conseils !!!

Bonne journée !! Visage câlin

M

par marcophil Dim 23 Juil 2023 - 18:15

bonjour
pour le titre catégorie et texte
tout ce fait ici pour la taille et style de police text
avez vous regardé dans le PA
Affichage-images et couleurs-couleurs et css-couleurs

la structure des pages
PA-général-forum-configuration
repérer Structure des pages
modifier le pourcentage

pour le css et Template que vous avez modifié, je peux pas vous conseiller.
un staff ou membre vous aidera.

par Melodiam Lun 24 Juil 2023 - 17:13

Coucou !!

Alors pour le titre en gras, vraiment j'ai tout essayé à ma disposition, j'ai encore check d'autres codes pour voir s'ils interfèrent mais rien n'y fait !

Concernant les catégories, oui, je pense attendre le passage d'un devactif ! ^^

Merci pour vos réponses !!

par **Toryudo** Lun 24 Juil 2023 - 17:37

Bonjour !

Concernant le premier point, pour que le float fonctionne, vous avez deux solutions possibles :
- soit faire en sorte que les <td> qui contiennent le titre et la description soient en display: inline
- soit faire en sorte que le titre et la description soient dans le même <td>
Sachant que vous avez touché au Template, je pense que la solution n°2 est la plus propre et le plus facile à mettre en place, vous vous assurez de ne rien casser autre part en tout cas !

Et pour enlever le gras, ce n'est pas la valeur "none" qu'il faut mettre, mais la valeur "normal" !
Donc plutôt :

Code:: font-weight: normal !important;

par Melodiam Lun 24 Juil 2023 - 17:54

Bonsoir !!

Je vous remercie pour vos conseils ! Concernant le foat, c'est réglé - j'ai enlevé le td les séparant et tout roule !! Texte description du forum qui ne s'aligne pas au titre du forum 1f601

Texte description du forum qui ne s'aligne pas au titre du forum 1f601

Pareil pour le problème avec le gras du titre, je me sens un peu bête de pas avoir pensé au "normal" plutôt qu'au "none"...

Merci encore et bonne soirée à vous !!! Texte description du forum qui ne s'aligne pas au titre du forum 1f604

Texte description du forum qui ne s'aligne pas au titre du forum 1f604

Texte description du forum qui ne s'aligne pas au titre du forum 1f60a

Texte description du forum qui ne s'aligne pas au titre du forum