Problème catégorie Bouton_activeProblème catégorie Bouton_hoverProblème catégorie Fb-hoverProblème catégorie Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Problème catégorie EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Problème catégorie EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Problème catégorie EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Problème catégorie EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Problème catégorie EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Problème catégorie EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Problème catégorie EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Problème catégorie EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

Partagez
 

Problème catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
Bonjour,

étant en train de modifier la présentation des catégories de mon forum, je suis arriver à ça:

Problème catégorie Probla10

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
MessageSujet: Problème catégorie   Problème catégorie EmptyMar 08 Juin 2010, 14:20
Revenir en haut Aller en bas
http://wegossip.1fr1.net
Clecle57400
Clecle57400
{ Membre }
{ Membre }

Féminin Messages : 61



Problème catégorie Empty
Tu met ce code :
Code:
<img src="LIEN DE L'IMAGE"></br>
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 11 Juin 2010, 18:59
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
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'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptySam 12 Juin 2010, 06:31
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
Merci Fu', j'essaye ça de suite.
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyDim 13 Juin 2010, 08:09
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
Pas de souci Wink
Redis-moi si tu as des difficultés à le mettre en place.


Fu'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyDim 13 Juin 2010, 09:12
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
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 ?

MessageSujet: Re: Problème catégorie   Problème catégorie EmptyLun 14 Juin 2010, 13:51
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
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'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 08:09
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
Bah c'est pas grave je vais renoncer à cette présentation. Mais merci pour ton aide Fu'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 08:36
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
.Little Lady a écrit:
Bonjour,

étant en train de modifier la présentation des catégories de mon forum, je suis arriver à ça:

Problème catégorie Probla10

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 ??
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 08:37
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Problème catégorie Empty
Tu à pencé à appliquer une marge à gauche sur la balise legend ?
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 10:26
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
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 scratch
(J'avais dû faire une bourde ? o_O Naaaan u__u")


Fu'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 16:28
Revenir en haut Aller en bas
http://kobehs.chocoforum.net
Liliana
Liliana
{ Membre actif }
{ Membre actif }

Féminin Messages : 997



Problème catégorie Empty
Je prends en cours de route xD

As tu essayé en mettant un align à la légende ?


LégendeTexte dans le fieldset



Code:
<fieldset><legend align="right">Légende</legend>Texte dans le fieldset</fieldset>
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 17:05
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
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.

MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 17:20
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
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'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyVen 18 Juin 2010, 17:55
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
Ça ne marche pas.
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyDim 20 Juin 2010, 15:57
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
Chez moi ça a l'air d'aller nickel pourtant. Puis-je voir ton code ?


Fu'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyLun 21 Juin 2010, 07:41
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
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;
}

/*cette partie correspond à l'affichage des images No new, News, Lock*/
.bouton_accueil {
margin-right: 5px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border-collapse: collapse;
border-top: 2px solid #FCF880;
border-right: 2px solid #FCF880;
border-bottom: 2px solid #FCF880;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
}

/*cette partie correspond à l'encadrement des sujets, du nb de sujets & messages*/
.messages_sujets_derniers_sujets {
margin-left: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
border-collapse: collapse;
border-top: 2px solid #FCF880;
border-left: 2px solid #FCF880;
border-bottom: 2px solid #FCF880;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
}

Et voici mon template:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall"><br />
        <br /><br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" 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%">
      </td>
        <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}>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr border="0">

      <td class="row1"  colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" border="0">

<!---- DÉBUT DES MODIFICATIONS EFFECTUEES PAR ALISON A. BOWER ---->

<form>
  <fieldset class="affichage_categories">
      <legend>Titre</legend>

              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<table width="800px" align="center">
<tr>
<td width="50px">
      <div class="bouton_accueil">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"></div>
</td>
<td width="600px">
      <div class="forum_description">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      </div>
      <div class="forum_sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><br />
</td>
<td width="150px">
      <div class="messages_sujets_derniers_sujets">
      <span class="gensmall"><div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div>
        <div class="sujets_messages">{catrow.forumrow.TOPICS} Sujets & {catrow.forumrow.POSTS} Messages</div></span>
      </div>
</td>
</tr>
</table>
  </fieldset>
</form>

<!---- 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 -->
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyMar 22 Juin 2010, 06:40
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
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.

Ton template
Spoiler:

Ton css
Spoiler:

Le résultat te convient-il ?


Fu'

MessageSujet: Re: Problème catégorie   Problème catégorie EmptyMar 22 Juin 2010, 16:00
Revenir en haut Aller en bas
http://www.illusionimaginative.net/
.Little Lady
.Little Lady
{ Membre actif }
{ Membre actif }

Féminin Messages : 564



Problème catégorie Empty
C'est parfait Fu' merci beaucoup pour ton aide.
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyMer 23 Juin 2010, 11:51
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Problème catégorie Empty
Pas de problème Wink


Au plaisir !
Fu'
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyMer 23 Juin 2010, 13:17
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Problème catégorie Empty
    Je classe !
MessageSujet: Re: Problème catégorie   Problème catégorie EmptyMer 23 Juin 2010, 19:22
Revenir en haut Aller en bas
Contenu sponsorisé




Problème catégorie Empty
MessageSujet: Re: Problème catégorie   Problème catégorie Empty
Revenir en haut Aller en bas
 

Problème catégorie

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» problème de catégorie (image sous la catégorie)
» Problème catégorie
» Problème de catégorie
» Problème de catégorie
» Problème de catégorie

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit