Titre arrondi et bordure blanche au tableau

[Archimus]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://toadius.forumactif.be/

Description du problème

Bonjour,

Je souhaiterai connaitre les "class" CSS pour mettre les fonds de titre arrondi (longues bandelettes brunes) et faire en sorte que les tableaux soient arrondis avec une bordure simple blanche lisse. Je souhaiterai que ça soit le cas sur tout le forum autant sur la gestion des groupes, que la réponse aux messages dont je souhaiterai connaitre les expressions pour y accéder Merci d'avance

Bonne journée.

[Invité]

Re bonjour,

Peut-être simplement ?:

Code:

table {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

Pour les coins arrondis voir ce générateur:

- http://border-radius.com/

Cordialement.

[Archimus]

Merci beaucoup, mais j'ai des lignes transparentes et non blanche et nette :s comment dois-je faire ?

EDIT - Après quelques test, j'ai trouvé comment mettre des lignes blanches. Seulement, j'ai un petit bémols. Je n'ai que les contours du tableau, mais pas les lignes, alors j'ai essayé les th.test1, td.test1, mais rien n'y fait. Voici mes modifications et mon css, si vous pouviez m'aider :

Code:

/****************Tableau arrondi************/
table.test1 {
border-radius: 5px;
border-width:1px;
 border-style:solid;
 border-color:white;
background-image:url(http://img15.hostingpics.net/pics/365137551.png);
} 
th.test1 {
border: 1px solid #FFFFFF;}

Code:

<form action="{S_MODE_ACTION}" method="get">
<table class="test1" BORDER="0" cellspacing="0" cellpadding="0" align="center" width="90%">
   <tr>
      <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
   </tr>
   <tr>
      <td class="test1">
      <table cellspacing="0" cellpadding="0" border="0" align="center" class="genmed">
         <tr>
                          <td width="90%"><br/>{L_USER_SELECT}&nbsp;<input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {L_SELECT_SORT_METHOD}&nbsp;{S_MODE_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {L_ORDER}&nbsp;{S_ORDER_SELECT}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {S_HIDDEN_SID}
            <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /><br/><br/></td>
         </tr>
      </table>
      </td>
   </tr>
</table>
</form>
<br><br/>
<table  class="test1" align="center" width="90%" cellspacing="0" cellpadding="0">
   <tr class="test1">
      <th class="thCornerL" nowrap="nowrap" height="25" >#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->

      <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
   </tr>
   <!-- BEGIN memberrow -->
   <tr class="test1">
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">&nbsp;{memberrow.ROW_NUMBER}&nbsp;</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
      </td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
   </tr>
   <!-- END switch_no_user -->
</table><br>
<!-- BEGIN switch_pagination -->
<table width="90%" align="center" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td><span class="nav">{PAGE_NUMBER}</span></td>
      <td align="right"><span class="nav">{PAGINATION}</span></td>
   </tr>
</table>
<br />
<!-- END switch_pagination -->

N'hésitez pas à m'expliquer, car je comprends pas bien le système de TD, TR, ... comprenant une "class" en CSS.
Bonne journée.

[Musara]

Salut Archimus,

Plutôt que de mettre des classes à tous tes éléments td et th, puis de les récupérer ensuite en CSS, je te conseille de faire comme ça :

Code:

table.test1 td, table.test1 th{
border: 1px solid #FFFFFF;
}

Ça applique le code à tous les éléments td et th présents dans tes table de classe "test1".

J'ai peur ceci dit que ça ne te donne pas le résultat que tu souhaites : je pense que ça fera une ligne de 2 pixels entre les cases (2 td collés auront tous les deux une bordure de 1 pixel, ce qui fera une ligne de 2 pixels entre eux deux).

EDIT : et au passage je crois que presque tous les tableaux du forum ont la classe "forumline" de base. Essaye d'utiliser celle là plutôt que de t'embêter à modifier tous tes templates pour y mettre la classe "test1" !

[Archimus]

Bonjour,

Merci pour votre répondre. Si je ne change pas forumline, c'est tout simplement pour certains aspect du portail ou autres ^^ Sinon, l'effet que j'aimerais, c'est qu'il y ait que ligne du bas et du haut et non celle de gauche et de droite dans les lignes du tableau. Comment dois-je faire ?

Bonne journée.

[Musara]

Salut Archimus !

Ok pour "forumline" !

Pour ne mettre des bordures que en haut et en bas de tes cellules, je te propose les codes CSS suivants (ils devraient avoir des effets proches, à toi de choisir celui qui te plait le plus) :

Code:

table.test1 td, table.test1 th{
border-top: 1px solid #FFFFFF;
}

Code:

table.test1 td, table.test1 th{
border-bottom: 1px solid #FFFFFF;
}

Code:

table.test1 td, table.test1 th{
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

Voilà, dis-moi si ça te convient !

[Archimus]

Bonjour,

Un grand grand merci pour ces différentes options. Alors, j'ai encore un petit souci, il y a une "bavure" au niveau des lignes. Que dois-je faire ? Dois-je insérer un border-spacing ?

http://toadius.forumactif.be/memberlist

Code:

table.test1 {
border-width:1px;
 border-style:solid;
 border-color:white;
 border-radius: 5px;
background-image:url(http://img15.hostingpics.net/pics/365137551.png);
} 
table.test1 td, table.test1 th{
border-top: 1px solid #FFFFFF;
}

Merci et bonne journée.

[Musara]

Salut Archimus,

Si tu parles des genres de "pointes" vers le bas qu'on observe sous google chrome, c'est dû à un arrondi. En examinant le code de ta page, j'ai l'impression que tu as dans ton CSS le code suivant :

Code:

.forumline, td{
-moz-border_radius: 5px;
-webkit-border_radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
}

À remplacer par le code suivant :

Code:

.forumline td{
-moz-border_radius: 5px;
-webkit-border_radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
}

J'ai retiré la virgule entre .forumline et td pour que ce code soit appliqué aux td des éléments de classe forumline. Et non à tous les éléments de classe forumline et à tous les td.

J'espère que ça corrigera le souci !

[Archimus]

Un grand merci, tout est parfait ! :thanks: