Discussion :

[Fredpeche]

Bonjour à tous,


Je ne connaissais pas l'existence de ce portail de programmation que de nom, grave erreur ! Tout y est intéressant !


Pour me présenter, je suis donc admin d'un forum http://princesse-robert.forumpro.fr/forum.htm et je me suis lancé dans un nouveau design complet depuis quelques semaines en passant de phpBB3 à PunBB qui me paraissait plus intéressant: ici

Tout se passe bien, c'est presque terminé mais il y a un gros hic que je n'arrive pas à régler et qui rend mon design inexploitable:


Il s'agit biensur de mes icônes qui grimpent sur le titres des topic. Dans ma version antérieure, j'avais déjà eu un problème similaire réglé en ajoutant au thème d'origine ce qui suit sur ma feuille de style CSS de la manière suivante:

dl.icon {
min-height: Xpx;
background-position: left top;
background-repeat: no-repeat;
height: auto !important;
}
ul.topics dt {
padding-left: Y+Zpx;
display: block;
float: left;
width: 50%;
}
.row dl.icon dt {
background-position: Ypx 5px;
min-height: Xpx;
height:auto !import

Mais malheureusement et quelque soit mes valeurs en X,Y,Z, ça ne change strictement rien à mon apparence.
Je pense que la solution est toujours dans cet ordre d'idée mais mes capacités en programmation sont beaucoup trop limitées et ça me désole carrément car j'étais plutôt satisfait de mon travail.

Alors forcément, merci beaucoup à ceux qui pourront tenter de m'apporter une solution

[c_s_s]

Bonjour,

Quand je regarde la page, je ne vois pas le bug dont tu parles. Le texte s'affiche bien à droite de l'icône.

[HiRoN]

Bonjour,
Quand je regarde la page, je ne vois pas le bug dont tu parles. Le texte s'affiche bien à droite de l'icône.

+1, sous FF3 & IE7...

[Fredpeche]

En fait dans la mesure où j'ai fais une capture d'écran, j'ai mis le lien de l'accueil du forum qui marche parfaitement. Mais je n'ai pas jugé utile (à tort) de vous indiqué le lien direct de la capture: celui des catégories du forum avec le listing des topic car c'est là que ça coince et que ça rend le design carrément inutilisable que ce soit sous Firefox ou IE.

Sachant que dans mon panneau d'administration, je ne peux intervenir sur l'affichage (hormis les options habituelles évidemment) qu'en ajoutant une nouvelle partie à ma feuille de style CSS, la feuille de style de base n'étant disponible qu'en lecture.

Alors voici et merci


http://robertlaprincesse.forumdefan.com/web-f4/

[GihefBey]

Bonjour,

Il n'y a pas de réponse simple dans ce contexte.

Il faudrait que tu fasses autrement. Les <span> sont trop souples ici.

Si tu en as la possibilité, essaye ces quelques modifications, propositions.
Au minimum, supprime les espaces insécables et remplace un <span> par une <div> (ou affiche-le en display : block;)
Et place le texte dans une autre <div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<td class="tcl tdtopics">
 
<div class="status">
  <img title="Pas de nouveaux messages" 
      src="http://i79.servimg.com/u/f79/11/59/45/21/pasnew10.gif" alt="Pas de nouveaux messages" />
</div>
 
<div class="sujets">     
  <h2 class="topic-title">
    <a class="topictitle" href="/web-f4/ca-ne-marche-pas-et-ca-m-enerve-t7.htm">
       Ca ne marche pas et ça m'énerve...
    </a>
  </h2>
 
  par <a href="/profile.forum?mode=viewprofile&amp;u=1" rel="nofollow">
    <span style="color:#000099; font-weight : bold;">Admin</span></a>
</div>
 
</td>

avec ces ajouts

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  /* à adapter */
.status { float: left; width: 90px; }
.sujets { margin-left: 70px; }

Ce qui pourrait donner



Ou alors, crée un nouveau tableau de deux cellules dans le <td>
Une pour l'image, une pour le texte.


++
N'as-tu pas la possibilité de spécifier des sauts de lignes Unix dans ton code ? De ne pas générer ce code sur une seule ligne ?

-

[Fredpeche]

Merci GihefBey de ton aide et merci aux autres. Mais malheureusement, je ne peux pas intervenir sur l'HTML depuis mon panneau d'administration, cela aurait été tellement plus simple pour moi...
La seule chose que je pouvais faire: des ajouts à ma feuille de style CSS.

Le problème est cependant résolu grâce à un ami de ce forum que je remercie, voici donc le supplément prioritaire que j'ai donné sur mon CSS de base:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*.status {
  float: left !important;
  display: block !important;
  width: 90px !important;
}
.sujets {
  margin-left: 70px !important;
}*/
 
 
/* ========== Added by julp ========== */
 
/* Flottement des images */
.pun table .tcl {
  padding-left: 110px !important;
  padding-right: 0px !important;
}
.pun table .status {
  margin-left: -100px !important;
  margin-right: -100px !important;
  display: block !important;
  min-height: 80px !important;
}