étant en train de modifier la présentation des catégories de mon forum, je suis arriver à ça:
Comme vous pouvez le remarquez, j'ai mis un cadre blanc à un endroit précis sur le screen. En fait, j'aimerais mettre une image ici mais je sais pas comment faire. Pourriez-vous m'aider ??
Dernière édition par .Little Lady le Mer 23 Juin 2010, 11:52, édité 2 fois
Sujet: Problème catégorie Mar 08 Juin 2010, 14:20
Clecle57400
{ Membre }
Messages : 61
Tu met ce code :
Code:
<img src="LIEN DE L'IMAGE"></br>
Sujet: Re: Problème catégorie Ven 11 Juin 2010, 18:59
Furase
{ Membre actif }
Messages : 312
Salut !
Le seul truc que je vois qui pourrait te permettre d'écire dans ta bordure, c'est fieldset (et legend à mettre après pour écrire le titre), qui se met normalement dans un formulaire (dans form donc). J'avais fait l'essai y a un moment mais j'avais eu des soucis en essayant de modifier la bordure. Mais ce n'était pas pour afficher sur les catégories, et j'ai testé là sur mon forum, et ça a l'air de fonctionner. Je te propose une solution, à toi de voir si les résultats possibles peuvent convenir.
Code:
<form> <fieldset> <legend>Titre</legend> ce qu'on veut </fieldset> </form>
Si c'est une image que tu veux incruster dans la bordure, il suffit de l'ajouter là où j'ai mis "Titre".
Après, à toi de rajouter ton css.
Un test ici (Le cadre blanc est l'image que j'ai incrustée.)
A part celle-ci, je n'ai pas d'autres idées... ^^"
Fu'
Sujet: Re: Problème catégorie Sam 12 Juin 2010, 06:31
.Little Lady
{ Membre actif }
Messages : 564
Merci Fu', j'essaye ça de suite.
Sujet: Re: Problème catégorie Dim 13 Juin 2010, 08:09
Furase
{ Membre actif }
Messages : 312
Pas de souci Redis-moi si tu as des difficultés à le mettre en place.
Fu'
Sujet: Re: Problème catégorie Dim 13 Juin 2010, 09:12
.Little Lady
{ Membre actif }
Messages : 564
J'ai testé ton code et j'obtiens ce que je souhaite. Par contre, j'aimerais coller aux bordures gauches et droites du fieldset ce que j'ai indiqué par des flèches blanches sur mon screen. Et comment décaler un peu le titre, vers la droite ?
Sujet: Re: Problème catégorie Lun 14 Juin 2010, 13:51
Furase
{ Membre actif }
Messages : 312
Re-bonjour ^^
Je n'ai malheureusement pas de solution à te proposer pour décaler le titre vers la droite (mais quelqu'un d'autre le pourra peut-être ?). J'avais fais des essais avec des marges et text-indent, ce qui fonctionne au détail près que la bordure s'interrompt... ^^" Ca commence à dater et je n'ai pas franchement cherché depuis, mais je n'ai pas vraiment d'idées... Tout ce que je peux te suggérer, c'est d'ajouter une image représentant uniquement la bordure avant ton titre. Pas très pratique, et sans doute assez long de trouver la bonne position, mais personnellement je ne vois rien d'autre.
Pour "recoller" tes cadres à la bordure du fieldset, essaie tout simplement de supprimer les marges internes avec padding: 0px; et si besoin border-collapse: collapse; et margin: 0px; dans le tableau et les cellules qui sont à l'intérieur du fieldset, voire à tes div selon comment tu as construit ton code. J'ai fait l'essai dans un sujet et personnellement il me reste une marge de 1px que je n'arrive pas à supprimer. Je ne sais pas ce qu'il en sera dans le cas des descriptions des catégories (pardonne ma flemme d'aller bidouiller mes templates pour faire le test... ^^").
Fu'
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 08:09
.Little Lady
{ Membre actif }
Messages : 564
Bah c'est pas grave je vais renoncer à cette présentation. Mais merci pour ton aide Fu'
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 08:36
.Little Lady
{ Membre actif }
Messages : 564
.Little Lady a écrit:
Bonjour,
étant en train de modifier la présentation des catégories de mon forum, je suis arriver à ça:
Comme vous pouvez le remarquez, j'ai mis un cadre blanc à un endroit précis sur le screen. En fait, j'aimerais mettre une image ici mais je sais pas comment faire. Pourriez-vous m'aider ??
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 08:37
VPeybernes
{ Membre actif }
Messages : 563
Tu à pencé à appliquer une marge à gauche sur la balise legend ?
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 10:26
Furase
{ Membre actif }
Messages : 312
J'ai essayé margin tout à l'heure et ça fonctionne nickel. Pourquoi ça "coupait" la bordure la dernière fois que j'ai essayé ? o_O (J'avais dû faire une bourde ? o_O Naaaan u__u")
Fu'
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 16:28
Liliana
{ Membre actif }
Messages : 997
Je prends en cours de route xD
As tu essayé en mettant un align à la légende ?
Code:
<fieldset><legend align="right">Légende</legend>Texte dans le fieldset</fieldset>
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 17:05
.Little Lady
{ Membre actif }
Messages : 564
Pour le titre c'est pas trop grave. Par contre, j'aimerais coller aux bordures gauches et droites du fieldset ce que j'ai indiqué par des flèches blanches sur mon screen.
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 17:20
Furase
{ Membre actif }
Messages : 312
Oh j'avais jamais pensé au coup de l'alignement XD Mais la marge sur mon dernier essai ça fonctionne. T'as essayé ?
Pour enlever l'espace, essaie padding:0px; pour le fieldset et margin:0px; pour le tableau et les cellules, et border-collapse:collapse; si besoin >< Je vois pas autre chose ^^"
Fu'
Sujet: Re: Problème catégorie Ven 18 Juin 2010, 17:55
.Little Lady
{ Membre actif }
Messages : 564
Ça ne marche pas.
Sujet: Re: Problème catégorie Dim 20 Juin 2010, 15:57
Furase
{ Membre actif }
Messages : 312
Chez moi ça a l'air d'aller nickel pourtant. Puis-je voir ton code ?
Fu'
Sujet: Re: Problème catégorie Lun 21 Juin 2010, 07:41
.Little Lady
{ Membre actif }
Messages : 564
Alors voici l'extrait CSS correspondant:
Code:
/*cette partie correspond à l'affichage des descriptions, des images, des derniers messages et du nb de sujets & messages des catégories*/ .affichage_categories { border: 2px solid #FCF880; -moz-border-radius: 15px; padding-top: 10px; margin-top: 10px; margin-left: 40px; margin-bottom: 10px; padding-left: -2px; text-align: center; width: 795px; border-collapse: collapse; }
<!---- FIN DES MODIFICATIONS EFFECTUEES PAR ALISON A. BOWER ---->
<!-- 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 --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Sujet: Re: Problème catégorie Mar 22 Juin 2010, 06:40
Furase
{ Membre actif }
Messages : 312
Effectivement tu ne risquais pas de changer la position du titre puisque tu n'as rien appliqué sur la balise legend XD Je t'ai rajouté une classe titre_categories Renommes-là comme tu veux. Tu verras que j'ai mis une marge à gauche. C'est elle qui va te permettre de décaler ton titre. J'ai mis 50px, mais à toi de choisir ta valeur. Tu as appliqué le border-collapse au fieldset et dans plusieurs cellules, ce qui est tout à fait inutile. C'est au tableau à l'intérieur qu'il faut l'appliquer ^^ Pour faire ça, je t'ai créé une classe table_catégories Tu peux bien sûr la renommer à ta convenance.
Outre ces quelques points, je n'ai pas corrigé plus que quelques détails. Tu avais notamment oublié de refermer le td de la cellule qui contient toute la description de la catégorie, image, etc.
Je t'ai remis les propriétés -webkit-border-radius et border-radius. N'oublie pas de les mettre aussi dans la partie du css que tu ne m'as pas donnée. Elles permettent d'élargir le nombre de navigateurs sur lesquels on verra les angles arrondis. Je t'ai déjà expliqué -et tu n'es pas la seule dans ce cas- que l'utilisateur ne changera pas de navigateur pour aller sur un site en particulier. C'est au webmaster de le rendre accessible au plus grand nombre possible, à moins qu'il préfère perdre des visiteurs.
Comme vu par MP, j'ai déplacé la fonction d'affichage des titres des forums pour la mettre dans le fieldset.
<!---- FIN DES MODIFICATIONS EFFECTUEES PAR ALISON A. BOWER ---->
</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 --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Ton css
Spoiler:
Code:
/* cette partie sert à sipprimer les marges à l'intérieur du fieldset */ .forumline fieldset { padding-left: 0px; padding-right: 0px; }
/* cette partie correspond au cadre qui entoure la description des catégories */ .affichage_categories { border: 2px solid #FCF880; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin-top: 10px; margin-left: 40px; margin-bottom: 10px; padding-top: 10px; text-align: center; width: 798px; }
/* cette partie est appliquée au fieldset et correspond à l'affichage du titre des forums */ .titre_categories { margin-left: 50px; }
/* cette partie définie les propriétés du tableau des catégories contenu dans le fieldset */ .table_categories { width: 800px; border-collapse: collapse; border: none ; margin-left: -1px; margin-right: -1px; }