Titre arrondi et bordure blanche au tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Titre arrondi et bordure blanche au tableau

Message par Archimus le Jeu 14 Jan 2016 - 19:16

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 Smile Merci d'avance

Bonne journée.


Dernière édition par Archimus le Mer 20 Jan 2016 - 14:30, édité 1 fois

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Invité le Sam 16 Jan 2016 - 10:15

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Archimus le Dim 17 Jan 2016 - 12:19

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

:editer: 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.Mais oui
Bonne journée.


Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Musara le Mar 19 Jan 2016 - 7:25

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" !

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Archimus le Mar 19 Jan 2016 - 18:11

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.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Musara le Mar 19 Jan 2016 - 22:57

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 !

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Archimus le Mer 20 Jan 2016 - 3:56

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.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Musara le Mer 20 Jan 2016 - 9:25

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 !

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Titre arrondi et bordure blanche au tableau

Message par Archimus le Mer 20 Jan 2016 - 14:29

Un grand merci, tout est parfait ! Thanks Smile


Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum