Version haut débit de: Fire Soft Board
Aide - Rechercher - Membres

[2.0.3] Problème de CSS

G-Ski (02 Janvier 2012, 1:00)
  1. Type de bug : Bug d'affichage
  2. Zone du forum affectée : Affichage des messages d'un sujet
  3. Priorité du bug : Basse
  4. Description : En essayant d'adapter mon design (WhiteSummer modifié en 2.0.1) à la 2.0.3, j'avais un affichage des messages dans les sujets très moche.
    J'ai bidouillé la css main.css mais le meilleur résultat que j'ai réussi à avoir est

    http://img857.imageshack.us/img857/891/problemedesign.png

    Alors en regardant le fichier files/forum/forum_topic.html, j'ai vu que entre la 2.0.1 et la 2.0.3 vous avez changé en passant d'un table avec des td à deux divs l'un a coté de l'autre (un pour la partie userinfo_box et l'autre postcontent)

    J'ai modifié un peu les css, voici les parties concernées (après mes bidouillages)
  5. Elément de réponse :
    
    /* Tableau affichant un message d'un sujet */
    .post
    {
    	margin-bottom: 8px;
    	width: 100%;
    }
    
    /* Cellules pour l'affichage des sujets */
    .post td
    {
    	vertical-align:top;
    	margin-left:10px;
    }
    
    /* Cellule contenant les informations des membres dans les sujets */
    .post .userinfo
    {
    	width: 18%;
    	vertical-align: top;
    	
    	clear: both;
    }
    
    /* Boite affichant les informations dans les sujets */
    .post .userinfo .userinfo_box
    {
    	color : black;
    	margin-right: 8px;
    	padding: 4px;
    	-moz-border-radius: 7px;
    	-webkit-border-radius: 7px;
    	border-radius: 7px;
    	border: none;
    	background:#F1F1F1;
    	
    }
    
    /* Information sur le pseudonyme du membre */
    .post .userinfo .username
    {
    	height: 20px;
    	font-size: 1.1em;
    	border-bottom: 1px solid #CCCCCC;
    	vertical-align: middle;
    	margin-bottom: 2px;
    }
    
    /* Image en ligne à côté du pseudonyme */
    .post .userinfo .username img
    {
    	margin-right: 4px;
    	vertical-align: middle;
    }
    
    /* Affichage du rang */
    .post .userinfo .rank
    {
    	text-align: center;
    	color: #999999;
    	margin-bottom: 2px;
    }
    
    /* Information sur le profil */
    .post .userinfo ul.list
    {
    	margin: 0px;
    	padding: 3px;
    	padding-top: 5px;
    }
    
    .post .userinfo ul.list li
    {
    	list-style: none;
    }
    
    /* Avertissements du membre */
    .warn
    {
    	text-align: center;
    }
    
    .warn img
    {
    	vertical-align: middle;
    }
    
    /* Cellule affichant les messages */
    .post .postcontent
    {
    	color : black;
    	border: none;
    	background: #FFFFFF;
    	padding: 3px;
    	-moz-border-radius: 7px;
    	-webkit-border-radius: 7px;
    	border-radius: 7px;
    	float:right;
    	width:82%;
    }
    
    /* Entête du message */
    .post .postcontent .postheader
    {
    	line-height: 19px;
    	vertical-align: middle;
    	padding: 0px 4px;
    	margin-bottom: 3px;
    	height: 20px;
    	background: #CCE4FF;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    }
    
    /* Images dans l'entête du message */
    .post .postcontent .postheader img
    {
    	vertical-align: middle;
    }
    
    /* Bouttons d'action sur le message */
    .post .postcontent .postheader span
    {
    	float: right;
    	color: #777777;
    }
    
    /* Pied du message */
    .post .postfooter
    {
    	text-align: right;
    	font-weight: bold;
    	font-size: 9px;
    	padding-top: 3px;
    }
    
    /* Contenu du message */
    .post .message
    {
    	padding: 5px;
    	overflow: auto;
    	clear: both;
    }
    


    Je pense avoir faux au niveau de mes float et clear, puisque comme on peut le voir le dernier message sort meme du "cadre bleu"


    Merci d'avance !
  6. Fichier(s) : main.css , files/forum/forum_topic.html
  7. Base de donnée utilisée : MySQL 4
  8. Type de serveur : Apache (généralement unix)
Arcalys (02 Janvier 2012, 1:23)
Ca donne quoi avec un float: left; dans le .post .userinfo ?
G-Ski (03 Janvier 2012, 13:30)
La même chose, sauf que le fond bleu de l'ensemble du topic ne va plus jusqu'en bas du topic :

http://img861.imageshack.us/img861/994/bugaccueil2.png
Arcalys (03 Janvier 2012, 16:40)
Essaye plutôt ceci :

Laisse le float: left, retire le clear: both et retire le float: right;

Le width du premier à 18%, le margin-left du deuxième à 18% et son width à 82%.
G-Ski (03 Janvier 2012, 23:28)
http://img205.imageshack.us/img205/6766/bugaccueil3.png

ça donne ça ! :fsb2_oui:
G-Ski (07 Janvier 2012, 18:20)
Un petit up :FSB2_oups:
G-Ski (11 Janvier 2012, 16:18)
Vraiment pas ? :fsb2_cry:
Arcalys (11 Janvier 2012, 16:23)
Tu peux reposter cette partie du CSS (de .post à .post .message) corrigée ? Tu as modifié quoi d'autre ? Car la modif, je viens de la faire sur le thème 2.0.3 (width de 18% et margin-left de 18%, et ca passe parfaitement). Tu peux poster aussi le CSS du .round ?
G-Ski (22 Janvier 2012, 14:04)
Me revoilà désolé pour le déterrage de topic

Voilà ce que j'ai :


/* Tableau affichant un message d'un sujet */
.post
{
	margin-bottom: 8px;
	width: 100%;
}

/* Cellules pour l'affichage des sujets */
.post td
{
	vertical-align:top;
	margin-left:10px;
}

/* Cellule contenant les informations des membres dans les sujets */
.post .userinfo
{
	width: 18%;
	vertical-align: top;
	float:left;
	/*clear:both;*/
}

/* Boite affichant les informations dans les sujets */
.post .userinfo .userinfo_box
{
	color : black;
	margin-right: 8px;
	padding: 4px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: none;
	background:#F1F1F1;
	
}

/* Information sur le pseudonyme du membre */
.post .userinfo .username
{
	height: 20px;
	font-size: 1.1em;
	border-bottom: 1px solid #CCCCCC;
	vertical-align: middle;
	margin-bottom: 2px;
}

/* Image en ligne à côté du pseudonyme */
.post .userinfo .username img
{
	margin-right: 4px;
	vertical-align: middle;
}

/* Affichage du rang */
.post .userinfo .rank
{
	text-align: center;
	color: #999999;
	margin-bottom: 2px;
}

/* Information sur le profil */
.post .userinfo ul.list
{
	margin: 0px;
	padding: 3px;
	padding-top: 5px;
}

.post .userinfo ul.list li
{
	list-style: none;
}

/* Avertissements du membre */
.warn
{
	text-align: center;
}

.warn img
{
	vertical-align: middle;
}

/* Cellule affichant les messages */
.post .postcontent
{
	color : black;
	border: none;
	background: #FFFFFF;
	padding: 3px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	/*float:right;*/
	width:82%;
	margin-left:18%;
}

/* Entête du message */
.post .postcontent .postheader
{
	line-height: 19px;
	vertical-align: middle;
	padding: 0px 4px;
	margin-bottom: 3px;
	height: 20px;
	background: #CCE4FF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/* Images dans l'entête du message */
.post .postcontent .postheader img
{
	vertical-align: middle;
}

/* Bouttons d'action sur le message */
.post .postcontent .postheader span
{
	float: right;
	color: #777777;
}

/* Pied du message */
.post .postfooter
{
	text-align: right;
	font-weight: bold;
	font-size: 9px;
	padding-top: 3px;
}

/* Contenu du message */
.post .message
{
	padding: 5px;
	overflow: auto;
	clear: both;
}



/* Boite principale */
.round
{
	margin: 2px 0px 6px 0px;
	padding: 6px;
	padding-bottom: 0px;
	border: 1px solid #999999;
	/*background-color: #E1E1E1;*/
	background-color: #dde5ee;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}

/* Titre des boites */
.round h1
{
	font-size: 1.3em;
	line-height: 18px;
	vertical-align: middle;
	margin-bottom: 6px;
}

/* Titres en lien sur les boites */
.round h1 a
{
	color: #333333;
}

/* Images dans les titres des boites */
.round h1 img
{
	vertical-align: middle;
	margin: 0;
	margin-right: 4px;
}

/* Règles du forum lors de l'inscription */
.round .rules
{
	border: 1px solid  #999999;
	background:#CCCCCC;
	padding:4px;
	margin-bottom: 4px;
	height: 200px;
	overflow: auto;
	font-family: Courier, 'Courier New', sans-serif;
}


Merci d'avance !
Arcalys (24 Janvier 2012, 23:41)
La tout de suite je vois pas, c'est assez difficile de voir comme ça, d'autant plus que ça me semble correct. Au pire, si tu veux, envoie ton thème (je comprendrais que tu ne veuilles pas :-)) dans une archive, qu'on puisse le tester directement, parce qu'on avance pas la :P
G-Ski (05 Février 2012, 23:55)
Voilà je te le mets en pièce jointe en zippé

Merci d'avance pour ton aide
Fichier joint
Vous n'avez pas l'autorisation de télécharger ce fichier
Arcalys (06 Février 2012, 14:22)
Je testerai ça après le boulot :)
G-Ski (06 Février 2012, 16:00)
Super, merci.

Je viens de voir que la réponse rapide ne marche plus... Jdeviens fou je crois ^^

PS: Sur chrome, les textes sont tout blanc
G-Ski (08 Février 2012, 16:01)
Salut Arcalys,

As tu eu du temps pour regarder?

Merci
Arcalys (09 Février 2012, 11:07)
Salut, désolé je n'ai pas eu le temps. J'ai passé les deux soirées à me battre avec ma nouvelle machine (custom build...). Je vais m'installer un FSB pendant la pause de midi et le tester. Je te dis quoi dans l'après-midi :)
Arcalys (09 Février 2012, 14:00)
Bon, pour l'instant j'arrive à remettre le texte à son point de départ, mais je n'arrive pas à donner la même taille aux deux div si celle de droite est plus petite :

Fichier joint
Vous n'avez pas l'autorisation de télécharger ce fichier
G-Ski (09 Février 2012, 15:56)
Ah c'est déjà un peu mieux
Sauf sur chrome, le texte est encore tout blanc et le div de droite prend toute la largeur (en se mettant en dessous)

:(
Arcalys (09 Février 2012, 17:34)
Bizarre, sous Chromium c'était bon chez moi -_-

Edit : et c'est bon aussi sur un Chrome... Tu as quelle version ? Vidé le cache ?
G-Ski (09 Février 2012, 18:17)
C'est bon, j'avais pas vidé le cache (ctrl + F5 ça fait rien sous chrome lol)
Arcalys (10 Février 2012, 9:49)
Je regarderai ce soir si j'arrive à le remettre à la même hauteur.
G-Ski (12 Février 2012, 23:39)
C'est déja super !
J'ai juste un petit problème, le réponse rapide ne marche pas (pas lié à ton css ni rien), c'est dans quel fichier de tpl ? Que je remette celui du pack 2.0.3 ?

Merci
Arcalys (13 Février 2012, 11:33)
Le switch se trouve dans tpl/WhiteSummer/files/forum/forum_topic.html. Le template de la réponse rapide, lui, est tpl/WhiteSummer/files/quick_reply.html.
G-Ski (14 Février 2012, 11:17)
Merci, ça remarche
G-Ski (15 Février 2012, 0:10)
Encore une autre questions ^^

Quand on coche "MAP libre, les membres choisissent la MAP qu'ils veulent à chaque message ", le choix se fait où ? Parce que je vois pas du tout, donc au final on a pas le choix.
Car les MAP c'est bien, mais parfois quand on poste une note, ça n'a rien a voir avec la MAP donc c'est un peu chiant ^^
Arcalys (15 Février 2012, 11:50)
Normalement, le choix apparait en dessous de la description de sujet et des boutons radio (annonce, note,...). Ce n'est pas le cas pour toi ? Tu n'aurais pas modifié le template forum_post dans ton ancienne version ?
G-Ski (16 Février 2012, 0:32)
Non, et de toute façon depuis j'ai uploadé celui du 2.0.3
Mais rien n'apparait... D'autres ont-ils déja évoqué le problème ?
Arcalys (16 Février 2012, 9:48)
Je ne me souviens pas avoir déjà vu cela mentionné. Je testerai en soirée (et je ferai un test avec ton template aussi tant qu'on y est).
G-Ski (21 Février 2012, 15:14)
Salut

Un double Up (design et choix de la map) :fsb2_oui:
Arcalys (21 Février 2012, 16:39)
Je n'avais pas vu d'erreur, et il fonctionnait chez moi (en ce qui concerne la map) :/
G-Ski (01 Mars 2012, 1:25)
Tu peux screener le choix des MAP?