[Résolu] Retour à la ligne ne fonctionne pas correctement

aissa · 06-03-2014 16:47:38

Bonjour à tous !

Je vous report un petit bug relevé avec un thème T3hsex de punres.net. - fluxbb 1.5.6

Il s'avère que lorsque je créé un post, ou un reply, et que je saute une ligne dans mon paragraphe, il fait qu'un retour à la ligne simple.

Exemple du bug

Salut,
Ca va ?

au lieu de :

Salut,
Ca va ?

Avez vous des idées pour trouver une solution ?

PS: j'ai vu un peu sur le forum un bug pas très similaire, mais qui à le même rapport ici.
Perso je pense que ça peux venir du theme car si je change de theme, tout fonctionne... Donc surement dans le css.

Merci d'avance de votre aide !

Dernière modification par aissa (06-03-2014 16:49:58)

Otomatic · 06-03-2014 19:16:38

Bonjour,

Punres.net, c'est pour PunBB et il est certain que les thèmes pour PunBB nécessitent des modifications pour être totalement compatibles avec FluxBB.
De plus, le thème T3hsex date du 15 janvier 2007, c'est-à-dire de plus de sept ans - ce devait être pour PunBB 1.1.5 - autrement dit, la préhistoire.

Utilisez, par exemple, une extension comme Firebug avec Firefox, pour voir quels sont les directives css appliquées en corrélation avec les paragraphes.

aissa · 07-03-2014 19:21:12

/*
	Style for PunBB 1.2 by xxtubbyxx, http://punres.net/
	Adaptation for FluxBB 1.5 by Alec-Bimetallic, http://timfan.info/fluxbbstyles.php
	Thanks to Daris, https://fluxbb.org/forums/viewtopic.php?id=4514
*/

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/base2.css);

/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/

/* 2.1 This sets the default Font Group */

.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.pun {
	font-size: 11px;
	line-height: normal;
}

/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {
	font-size: 68.75%;
}
/* End IE Win Font Size */

/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {
	font-size: 1em;
}

/* 2.2 Set the font-size for preformatted text i.e in code boxes */

.pun PRE {
	font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
}

/* 2.3 Font size for headers */

.pun H2, .pun H4 {
	font-size: 1em;
}
.pun H3 {
	font-size: 1.1em;
}
#brdtitle H1 {
	font-size: 2.5em;
}
#brdtitle {
	text-align: center;
	width: 100%;
}

/* 2.4 Larger text for particular items */
DIV.postmsg P {
	line-height: 1.5;
}
DIV.postleft DT {
	font-size: 1.2em;
}
.pun PRE {
	font-size: 1.3em;
}

/* 2.5 Bold text */

DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
DIV.linksb LI, DIV.postlinksb LI, .blockmenu LI, #brdtitle H1, .pun SPAN.warntext, .pun P.warntext {
	font-weight: bold;
}

/****************************************************************/
/* 3. LINKS */
/****************************************************************/

/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */

.pun A:link, .pun A:visited {
	text-decoration: none;
}

/* 3.2 Underline on hover for links in headers and main menu */

#brdmenu A:hover {
	text-decoration: none;
	background: #000000;
	padding: 7px 4px 7px 4px;
	border: 1px solid #FF9900;
}
#brdmenu A:link {
	text-decoration: none;
	padding: 7px 4px 7px 4px;
}
#brdmenu {
	text-align: center;
}
#brdmenu {
	border: 1px solid #121212;
}

/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/

/* 4.1 By default borders are 1px solid */

DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
	border-style: solid;
	border-width: 0px;
}

/* 4.2 Special settings for the board header. */

#brdheader DIV.box {
	border-top-width: 0px;
	background: #000000;
	width: 100%;
}

/* 4.3 Borders for table cells */

.pun TD, .pun TH {
	border-bottom: none;
	border-right: none;
}

.pun .tcl {
	border-left: none;
}

/* 4.4 Special setting for fieldsets to preserve IE defaults */

DIV>FIELDSET {
	border-style: solid;
	border-width: 1px;
}

/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/

/* 5.1 Page margins */

HTML, BODY {
	margin: 0;
	padding: 0;
}
#punwrap {
	width: 80%;
	margin: 13px auto;
	padding: 15px;
	background: #121212;
}

/* 5.2 Creates vertical space between main board elements (Margins) */

DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {
	margin-bottom: 13px;
}
#punindex DIV.blocktable, DIV.blockpost {
	margin-bottom: 7px;
}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {
	margin-bottom: 0px;
}

/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */

DIV.linkst, DIV.linksb {
	margin-top: -11px;
}
DIV.postlinksb {
	margin-top: -5px;
}

/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */

#brdstats {
	margin-top: 13px;
}

/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/

/* 6.1 Default padding for main items */

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {
	padding: 4px 7px;
}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {
	padding: 4px 0;
}
.pun H2 {
	padding: 4px 7px;
}

/* 6.2 Special spacing for various elements */

.pun H1 {
	padding: 4px 0px 0px 0;
}
#brdtitle P {
	padding-top: 0px;
}
DIV.linkst {
	padding: 9px 7px 4px 7px;
}
DIV.linksb, DIV.postlinksb {
	padding: 4px 7px 9px 7px;
}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT {
	line-height: 1.4em;
}
#viewprofile DT, #viewprofile DD {
	padding: 0 4px;
	line-height: 2em;
}

/* 6.4 Create some horizontal spacing for various elements */

#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT {
	margin-right: 12px;
}

/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/

.pun TH, .pun TD {
	padding: 4px 7px;
}
.pun TD P {
	padding: 6px 0 0 0;
}

/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/

/* 8.1 Padding around left and right columns in viewtopic */

DIV.postleft DL, DIV.postright {
	padding: 7px;
}

/* 8.2 Extra spacing for poster contact details and avatar */

DD.usercontacts, DD.postavatar {
	margin-top: 6px;
}
DD.postavatar {
	margin-bottom: 6px;
}

/* 8.3 Extra top spacing for signatures and edited by */

DIV.postsignature, DIV.postmsg P.postedit {
	padding-top: 16px;
}

/* 8.4 Spacing for code and quote boxes */

DIV.postmsg H4 {
	margin-bottom: 11px;
}
.pun BLOCKQUOTE, DIV.codebox {
	margin: 6px 16px 16px 16px;
	padding: 9px;
}

/* 8.5 Padding for the action links and online indicator in viewtopic */

DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {
	padding: 11px 7px 6px 7px;
}

/* 8.6 This is the input on moderators multi-delete view */

DIV.blockpost INPUT, DIV.blockpost LABEL {
	padding: 4px;
	display: inline;
}

P.multidelete {
	padding-top: 16px;
	padding-bottom: 6px;
}

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {
	padding: 0;
}

/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/

/* 9.1 Padding around fieldsets */

DIV.blockform FORM, DIV.fakeform {
	padding: 21px 21px 16px 21px;
}
DIV.inform {
	padding-bottom: 13px;
}

/* 9.2 Padding inside fieldsets */

.pun FIELDSET {
	padding: 0px 13px 0px 13px;
}
DIV.infldset {
	padding: 10px 0px 13px 0;
}
.pun LEGEND {
	padding: 0px 7px;
}

/* 9.3 The information box at the top of the registration form and elsewhere */

DIV.forminfo {
	margin-bottom: 13px;
	padding: 10px 11px;
}

/* 9.4 BBCode help links in post forms */

UL.bblinks LI {
	padding-right: 21px;
}

UL.bblinks {
	padding-bottom: 11px;
	padding-left: 5px;
}

/* 9.5 Horizontal positioning for the submit button on forms */

DIV.blockform P INPUT {
	margin-left: 13px;
}

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
	float: left;
	margin-top: 0.1em;
	margin-left: 0.2em;
	display: block;
	border-width: 0.6em 0.6em 0.6em 0.6em;
	border-style: solid;
}

DIV.searchposts DIV.icon {
	margin-left: 0;
}

/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {
	margin-left: 2.3em;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

BODY {
	background-color: #1A1A1A;
}

.pun {
	color: #D4D4D4;
}

DIV.box,  #adminconsole FIELDSET TH, .rowodd, .roweven {
	background-color: #121212;
}
#adminconsole TD, #adminconsole TH {
	border-color: #121212;
}

/* 1.2 Darker background colours */

TD.tc2, TD.tc3, TD.tcmod, #brdfooter DIV.box {
	background-color: #121212;
}
#adminconsole FIELDSET TD, #viewprofile DD, DIV.forminfo, DIV.blockmenu DIV.box, #adstats DD {
	background-color: #121212;
}

.pun BLOCKQUOTE, DIV.codebox {
	background-color: #252525;
}

/* 1.3 Main headers and navigation bar background and text colour */

.pun H2 {
	background-color: #010101;
	color: #D4D4D4;
}
#brdmenu {
	background: #121212;
	color: #D4D4D4;
}

/* 1.4 Table header rows */

.pun TH, .bgc4 {
	background-color: #222222;
}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {
	color: #FF9900;
}

/* 1.6 Highlighted text for various items */

.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {
	color: #D4D4D4;
}

/* 1.7 Dark background for form elements */

.pun TEXTAREA, .pun INPUT, .pun SELECT {
	background-color: #1A1A1A;
	color: #D4D4D4;
}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright, #postpreview {
	background-color: #121212;
}
DIV.postright, DIV.postfootright {
	border-left-color: #222222;
}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {
	background-color: #222222;
}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {
	background-color: #010101;
}
DIV.blockpost H2 SPAN.conr {
	color: #A19E96;
}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {
	background-color: #404040;
	color: #404040;
}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* 3.1 All external borders (H1 is the board title) */

DIV.box {
	border-color: #010101;
}

/* 3.2 Makes the top border of posts match the colour used for post headers */

DIV.blockpost DIV.box {
	border-color: #010101 #525252 #525252;
}

/* 3.3 Table internal borders. By default TH is same as background so border is invisible */

.pun TD {
	border-color: #FF9900;
}
.pun TH {
	border-color: #FF9900;
}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
	border-color: #404040;
}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {
	border-color: #ACA899;
}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */

.pun A:link, .pun A:visited {
	color: #FF9900;
}
.pun A:hover {
	color: #FFCC33;
}

/* 4.2 This is the colour for links in header rows and the navigation bar */

.pun H2 A:link, .pun H2 A:visited {
	color: #D4D4D4;
	text-decoration: none;
}
.pun H2 A:hover {
	color: #D4D4D4;
	text-decoration: none;
}

/* 4.3 This is for closed topics and "hot" links */

LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {
	color: #888;
}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {
	color: #AAA;
}
LI.maintenancelink A:link, LI.maintenancelink A:visited {
	color: #FF4000;
}
LI.maintenancelink A:hover {
	color: #FF5010;
}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {
	border-color: #222222 #222222 #222222 #222222;
}
TR.iredirect DIV.icon {
	border-color: #121212 #121212 #121212 #121212;
}
DIV.inew {
	border: 1px solid #FF9900;
}

Voilà le .css du thème

Otomatic · 07-03-2014 20:44:52

Bonsoir,

FluxBB 1.5.6 (Sans aucune modif) et le style Air.

Texte avec un saut de ligne
Avec un autre saut de ligne
Et encore un autre
Mais là deux sauts de lignes

Puis encore deux autres

C'est fini.

Lors de l'affichage, le parser traduit tout ça en code HTML comme ci-dessous

<div class="postmsg"><p>FluxBB 1.5.6 (Sans aucune modif) et le style Air.</p><p>Texte avec un saut de ligne<br />Avec un autre saut de ligne<br />Et encore un autre<br />Mais là deux sauts de lignes</p><p>Puis encore deux autres</p><p>C&#039;est fini</p>

On peut voir que du texte qui comporte que des sauts de lignes simples, est traduit par un paragraphe ... dans lequel les sauts de lignes simples sont remplacès par des

En revanche, les doubles sauts de lignes génèrent un nouveau paragraphe ...

Il faut donc regarder dans la définition CSS du paragraphe p qui est, pour le fichier mis au dessus :

/* 2.4 Larger text for particular items */
DIV.postmsg P {
	line-height: 1.5;
}

Nota : À mon humble avis, ce ne devrait pas être en majuscules !
Documentation line-height

aissa · 07-03-2014 21:24:21

Bonsoir,

Donc, il faut le mettre de cette manière ? :

/* 2.4 Larger text for particular items */
div.postmsg p {
line-height: 1.5;
}

Si c'est le cas, ça n'a rien pas fonctionné, j'ai fait l'essai.

Otomatic · 08-03-2014 11:00:50

Bonjour,

Il faut, quand-même, effectuer quelques recherches par vous-même siffle .
La directive CSS

div.postmsg p {
    line-height: 1.5;
}

s'applique aux paragraphes dans un message et, votre problème provient de ce que lesdits paragraphes ne sont pas représentés tesl qu'ils devraient être.
Une simple recherche, dans le fichier css, de ".postmsg p" montre d'autres affectations dont :

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {
	padding: 0;
}

À supprimer totalement.

aissa · 09-03-2014 16:55:29

Cette solution fonctionne parfaitement.

Merci Otomatic.

FluxBB.fr

#1 06-03-2014 16:47:38

[Résolu] Retour à la ligne ne fonctionne pas correctement

#2 06-03-2014 19:16:38

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

#3 07-03-2014 19:21:12

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

#4 07-03-2014 20:44:52

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

#5 07-03-2014 21:24:21

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

#6 08-03-2014 11:00:50

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

#7 09-03-2014 16:55:29

Re : [Résolu] Retour à la ligne ne fonctionne pas correctement

Pied de page des forums