[Last post avatar + 1.0.3] Forcer l'alignement du texte long

par **ninouee** » 23 Fév 2017 à 23:47

Bonjour à tous!

J'utilise l'extention Last post avatar qui est ici https://www.phpbb.com/customise/db/exte ... last_post/ sur mon forum.
Je cherche à régler un petit défaut à mon goût visible sur mon forum de test : http://ddstv.fr/RPG/index.php

Le problème est simple : quand le titre du sujet est trop long, les informations se mettent sous l'avatar au lieu de se mettre à côté mais sur plusieurs lignes.

Je sais comment changer la taille de l'avatar sur cette extention, mais les réglage de texte ça je n'y arrive pas encore. Je ne pense pas que ce soit lié à la structure mais au CSS.
Savez-vous ce que je dois modifier pour que le texte soit toujours aligné de la même manière?

Merci à vous.

par **cabot** » 24 Fév 2017 à 10:59

Hello,

Sur un forum "normal", je dirais que ça devrait suffire :

Code: Tout sélectionner

dd.lastpost {
	white-space: nowrap;
}

.lastsubject {
	text-overflow: ellipsis;
	overflow: hidden;   
	max-width: 190px;
}

Mais comme tu as collé du style en ligne au lieu d'ajouter des classes et de déclarer les propriétés dans une feuille de style, ben t'as pas fini de bricoler nawak dans le HTML. Et bonjour la maintenance...

par **ninouee** » 24 Fév 2017 à 11:33

Ah oui c'est vrai que j'ai retiré 2 colonnes avec des pourcentages pour les largeurs.

Il aurait fallut que je trouve une extension ?

par **cabot** » 24 Fév 2017 à 11:47

Non, il aurait fallu que tu fasses les modifications proprement plutôt que de coller du style inline.

Là, par exemple :

Code: Tout sélectionner

<dd class="topics" style="width:20%;border-left:0;line-height:1.1em;font-size:1.1em; float: right; text-align:left;">

Code: Tout sélectionner

<dd class="topics machouetteclasse">

Code: Tout sélectionner

dd.machouetteclasse {
	width: 20%;
	border-left: 0;
	line-height: 1.1em;
	font-size: 1.1em;
	float: right;
	text-align: left;
}

Du coup je t'aurai dit d'ajouter white-space: nowrap; à dd.machouetteclasse {, plus la règle .lastsubject{...}.

par **ninouee** » 24 Fév 2017 à 11:49

Je peux tout refaire au pire car le style de base n'a pas été touché mais seulement le miens.

Si besoin je peux, dans le week-end donner mon code pour voir?

par **cabot** » 24 Fév 2017 à 12:09

Ben si tu appliques ce que j'ai dit dans le sujet, tu as déjà résolu ton problème avec les avatars.

Et non, je ne serai pas là ce WE, mais de toute façon même si je l'étais, je n'aurai pas plus le temps d'éplucher ton style.
Il n'y a rien de compliqué, il faut simplement virer tout le style en ligne que tu as pu ajouter et le déclarer dans une de tes CSS externes.

par **ninouee** » 24 Fév 2017 à 13:08

Je regarderai ce soir la je suis sur mon téléphone.

Je te remercie d'avance pour tes conseils.

Edit:

Ca fonctionne super bien!

Merci

par **ninouee** » 04 Mar 2017 à 21:22

Me revoilà

J'avais donc intégré l'élément white-space: nowrap; dans le code pour voir ce que ça donnait en attendant de remettre le nez dans le code pour le rendre plus propre comme vous me le conseillez.

Et seulement une partie du CSS est prise en compte. J'avoue que je comprend mal la notion d'héritages avec plusieurs éléments Css qui s'imbriquent.

Du coup dans mon Css j'ai ajouté les éléments qui étaient dans forumlist_body

Code: Tout sélectionner

.part1 {
      width:70%;
    }
	
dd.part2 {
      width:20%; 
	  float: right;
    }
dd.part3
{
     width:20%;
	 border-left:0;
	 line-height:1.1em;
	 font-size:1.1em; 
	 float: right; 
	 text-align:left; 
	 white-space: nowrap;
    }

Et le éléments de CSS sont intégrés de cette manière:

Code: Tout sélectionner

	<dd class="posts">{L_POSTS}</dd>-->
						<dd class="lastpost fusion part2" ><span>{L_LAST_POST}</span></dd>
					</dl>
					<!-- EVENT forumlist_body_category_header_row_append -->
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

Code: Tout sélectionner

<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"></a><!-- ENDIF -->
					<div class="list-inner part1" ><!--modification de la largeur de la 1er partie-->

Code: Tout sélectionner

	<!-- ELSEIF not forumrow.S_IS_LINK -->
						
                        
                        <!--nombre de messages et sujets-->
						<dd class="topics part3" >
                        {forumrow.TOPICS} {L_TOPICS} <br/>
                        			{forumrow.POSTS} {L_POSTS} <br/>
						<!-- IF forumrow.U_UNAPPROVED_TOPICS -->

Alors j'ai essayé de retirer le point ou le dd devant "part" et ça change mais pas comme il faut. Je ne dois pas en être loin mais je ne comprend pas.

J'ai essayé les combinaisons suivantes pour voir mais sans effet, la catégorie du dernier message ne veut pas faire 20% du forum et se coller sur la droite comme ici http://ddstv.fr/forum/index.php
Mes essais:
dd.lastpost fusion part2
dd.part2
dd, lastpost, part2
dd, lastpost, .part2
#part2

J'ai même tenté avec width:20% !important; mais toujours rien. :lol:

J'avoue j'ai pas compris.

par **cabot** » 05 Mar 2017 à 12:35

Oula !

Si tu veux te lancer dans le positionnement, je te suggère d'apprivoiser quelques bases, notamment la notion de flux et de flottant.

Il faut simplifier tout ça, commence par annuler ce que tu as fait dans forumlist_body et dans le CSS, puis ouvre un sujet dans la section des modifs de style pour fusionner les trois dernières colonnes dans la liste des forums, histoire de partir sur quelque chose d'exploitable.

par **ninouee** » 07 Mar 2017 à 20:33

Bonjour Cabot!

Merci pour le conseil je vais tout de suite lire tes liens.
Déjà je vois aue ça parle d'éléments que je n'aime pas trop : les float :mrgreen:

Bonne soirée.

par **cabot** » 07 Mar 2017 à 22:04

Oui nan mais ne reste pas comme ça, ouvre un sujet dans le forum des modifs de styles car il ne faut pas que tu conserves le code actuel, on va le simplifier/optimiser.

par **ninouee** » 07 Mar 2017 à 22:37

Le code actuel n'est pas sur un forum utilisé il est sur un forum test car tout est en chantier. Il ne faut pas te faire de soucis. En tout cas c'est très gentil de ta part. Le vraie forum est là http://ddstv.fr/forum/index.php vieux, mourant mais bien là :lol:

Et le forum test est ici http://ddstv.fr/RPG/index.php

C'est vraie que je pose beaucoup de questions mais c'est que j'essaie d'apprendre et de comprendre via des retour d'expériences et des questions ici.

J'avoue que ce qu'on voit pour le moment sur le forum test est moche j'ai pas mal de recherches à faire pour les couleurs, des choses à affiner.

Il en est de même pour la structure.

J'ai tout mon temps. :wink:

J'étais entrain de lire les liens que tu m'as donnée et ouvrir le sujet dans la partie style. C'est que je ne veux pas abuser de votre gentillesse. :wink: