Bodyline refuse de m'afficher ma bordure

[Petit Démon rêveur]

Bonjour Forumactif,

Je suis actuellement en train de préparer un nouveau design pour mon forum et j'avoue que malgré toutes les modifications que j'ai pu faire dans les templates et autre, je sèche complètement sur un problème tout simple : je n'arrive pas à encadrer le corps de mon forum avec une bordure. Il me semblait que le code était tout simplement à mettre dans bodyline, mais il refuse de m'afficher la bordure.


Voici la partie de mon CSS qui pose problème :

Code:

/* --------------------------------------
CSS GENERAL
--------------------------------------- */

.bodyline {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-image: url('http://img834.imageshack.us/img834/7006/bruitlger.png');
border: 10px solid black;
}

.forumline {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

h1 {
font-size: 20px;
letter-spacing: 3px;
font-weight: lighter;
font-variant: small-caps;
text-align: center;
color: #3A343D;
}


Je trouve ça d'autant plus étrange que les autres propriétés de bodyline fonctionnent parfaitement. Je suis sûre que c'est tout simple, mais je n'arrive pas à voir ce qui bugue. Bref, avis aux amateurs ^^

Si vous souhaitez le reste du CSS ou autre, n'hésitez pas ^^

[Scoubifitz]

bonjour,

"bodyline" est une cellule contenue dans la table "bodylinewidth" ...

remplacez la class "bodyline" par ceci :

Code:

.bodyline {
background-image: url('http://img834.imageshack.us/img834/7006/bruitlger.png');
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.bodylinewidth {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 10px solid black;
}

[Petit Démon rêveur]

Merci beaucoup Scoubifitz, la bordure apparait. Cependant, il a un décalage à droite, comme si la bordure encadrait quelque chose de plus large que mon forum.

Je vous laisse constater la chose par vous-même :
Forum test

En passant, j'ai changé les caractéristiques de la bordure pour arriver à ce que je voulais ^^

[Scoubifitz]

Apparemment , vous avez un écran avec une résolution de 1024x762 ...

règlez la largeur du forum à 900px (elle est règlée à 1000) , ou rajoutez cette ligne au "bodylinewidth" :

Code:

width:900px;

[Petit Démon rêveur]

Je vous avais devancée et avais eu la même idée. ^^
Malheureusement, le problème persiste, la bordure se réduit proportionnellement, mais l'espace à droite reste le même. Je ne sais pas où ça peut pêcher...

[Scoubifitz]

il doit me manquer un élément ...

voilà ce que je vois en tant qu'invité ... pas de décalage ...

à quel endroit se trouve ce décalage ?

(petit temps de chargement )

[Petit Démon rêveur]

Je vais faire un screen ^^

[Petit Démon rêveur]

Voilà un aperçu depuis mon écran :


Vous voyez, à droite, la bordure laisse un espace avec le corps du forum et ce sur toute la longueur.

[Scoubifitz]

vu , la page qui bugge ...

http://ecole-kenryoku.forumactif.com/f1-votre-1er-forum

en comparant les codes sources des deux pages , il manque des balises de fermetures ...

votre souci provient de votre script pour les onglets ....

(mal placé ou incomplet ...)

mais là je cède ma place à des membres plus qualifiés dans ce domaine ...

[Petit Démon rêveur]

Mon script pour les onglets ?
Ca fait un moment qu'il est installé et il fonctionne cependant très bien.
Je vais quand même vérifier avec notepad histoire de voir s'il y a vraiment des soucis.

Merci en tout cas pour l'aide ^^ Je vous tiens au courant.

[Petit Démon rêveur]

Effectivement, maintenant que tu me le dis, j'avais fait un premier essai de design avec une grosse bordure autour du forum sans aucun souci en utilisant bodyline. Mais entre temps j'ai déplacé la position du menu à onglets et j'ai également fait beaucoup d'autres modifs.

J'ai regardé avec notepad et je vois effectivement une erreur sur le code des onglets. Seulement je n'arrive pas à mettre le doigt sur l'erreur en question.

Je vous mets donc mon template, en espérant qu'un œil affuté verra quelle est l'erreur :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

document.write('<div style="display:block;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">

<li onClick="change_cat(1)" class="onglet " id="onglet_1">Au Commencement<br /></li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Cieux<br /></li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Mexico City [Terre]<br /></li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Limbes</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Enfers</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">In the End</li>


</ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
   if(document.getElementById('categorie_'+numero))
   {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();
      
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
   }
}

function capture_cat()
{
   if(compteur_cat == 1)
   {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
   }
   
   compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
   capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->



<tr>
<th style="background-image: none;" colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="200"><div style="width:200px;"></div></th>
<th nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td colspan="2" align="center" valign="middle" height="50">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<!-- BEGIN forum_link_no -->
      <span class="gensmall">
         <div class="sujets_messages">Messages : {catrow.forumrow.POSTS} || Sujets : {catrow.forumrow.TOPICS}</div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
      <!-- END forum_link_no -->
</td>



<td style="-moz-border-radius: 5px; -webkit-border-radius: 5px; " colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>

<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->



Merci beaucoup de m'aider en tout cas ^^

[Petit Démon rêveur]

Je repasse pour vous tenir au courant de mes investigations. Le problème ne vient pas de mon menu à onglets ni même de mon template. Je me suis donc retournée vers le CSS et il semblerait que la partie incriminée soit celle-ci :

Code:

/* Suppression des bordures disgracieuses */
    td.catLeft {
      border-width:0 0 0 0px !important;
    }

    td.catBottom {
      border-width:0 0px 0px !important;
    }

    td.catHead {
      border-width:0px 0px 0 !important;
    }

    td.catRight {
    border-width:0 0 0 0px !important;
    }

    td {
    border-width:0 0 0 0px !important;
    }

    th, td, p {
    border-width:0 0 0 0px !important;
    }


Le seul code CSS que je n'ai pas fait moi-même et que je ne peux pas modifier puisque je ne comprends pas pourquoi il y a plus ou moins de zéros selon les cas.

D'avance merci si quelqu'un trouve l'erreur dans ce code ^^

[Petit Démon rêveur]

Bonjour, c'est encore moi ^^

Je signale que le problème vient des deux derniers attributs que j'ai cités plus haut, même si je n'ai pas réussi à régler le problème autrement qu'en retirant ces lignes de code.

Code:

 td {
            border-width:0 0 0 0px !important;
            }
       
            th, td, p {
            border-width:0 0 0 0px !important;
            }

Le code était-il faux ou bien ne sert-il à rien ? A la base, c'était quelqu'un d'ici qui me l'avait donné afin de retirer certaines lignes disgracieuses qui restaient dans les messages (je ne voulais aucune ligne de séparation) et dans les forums.

[Scoubifitz]

ce code n'est pas faux , il sert à enlever la bordure de TOUTES les cellules du forum !^^

remplacez tout le paragraphe "Suppression des bordures disgracieuses" par ce code, ça suffira amplement :

Code:

/* Suppression des bordures disgracieuses */

td.catLeft,td.catBottom,td.catHead,td.catRight,.row3Right,.thRight,.thLeft {
    border-width:0 0 0 0px !important;
    }

quel est le problème sur cette page ?

http://ecole-kenryoku.forumactif.com/t29-sujet-test-probleme-codage

[Petit Démon rêveur]

Ok, merci beaucoup ^^

Pour le sujet en question je testais un problème que j'avais, et que j'ai à nouveau quand je souhaite modifier l'apparence des zones .post, sans toucher à l'éditeur textarea qui dans ces cas-là devient trop large pour mon forum.

Vous pouvez regarder, en ce moment, j'ai le même problème que la dernière fois à la fin du texte ^^

[Scoubifitz]

les petits carrés ?

vu ... cherchez et remplacez dans la partie "coins arrondis" du CSS :

(postbody devient fondpost)

Code:

.code, .spoiler, .quote, .textarea,  .fondpost{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 20px;
border: none !important;
box-shadow: 0px 0px 10px black;
}

[Petit Démon rêveur]

Oui, j'avais trouvé cette méthode, de créer une classe pour me permettre de faire mes effets comme je le veux ^^

Merci en tout cas !
Je pense que ce sujet peut être verrouillé ^^