Un cadre en pointillé ou autre Bouton_activeUn cadre en pointillé ou autre Bouton_hoverUn cadre en pointillé ou autre Fb-hoverUn cadre en pointillé ou autre 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
Un cadre en pointillé ou autre EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Un cadre en pointillé ou autre EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Un cadre en pointillé ou autre EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Un cadre en pointillé ou autre EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Un cadre en pointillé ou autre EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Un cadre en pointillé ou autre EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Un cadre en pointillé ou autre EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Un cadre en pointillé ou autre EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -14%
Lave-linge hublot HOOVER HWP 10 kg (Induction, 1600 ...
Voir le deal
299.99 €

Partagez
 

Un cadre en pointillé ou autre

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Alors voilà j'avais vue dans un forum que les descriptions des sous forum était entouré par un cadre et je voudrais bien faire ça pour le miens. J'ai le code et tout mais j'aimerais bien que le cadre il soit en pointillé ou quelque chose comme ça de plus original.
Ah euh en montrant mon code je me suis rendue aussi compte que les liens étaient en dehors du cadre oO
Voici une petite manip' PS pour vous montrer ce que ça devrais donner. Là =)

CSSActif qu'est ce que tu peux faire pour moi ?

(mon code)
Code:
<center><div style=" width : 560px ; height : 123px ; border-style : solid ; border-width : 5px ; border-color : #423836 ;"><font face="Georgia"><span style="font-size: 14px; line-height: normal"><div align="left »>[table][td]Je suppose que vous savez lire et que vous n'êtes pas totalement stupide. Toute fois je fais tout de même remarquer que cette partie est là pour regrouper les deux règlements et le contexte. Elle accueillera aussi les différentes intrigues qui vous serons proposé tout au long du jeux[/td][td]<span style="font-size: 12px; line-height: normal">♠️<a href="http://xoxoprojet.forumsactifs.net/reglement-and-co-f1/regles-generales-du-forum-" class="postlink"><strong>Règlement</strong></a> <br>♠️<a href="http://xoxoprojet.forumsactifs.net/reglement-and-co-f1/contexte-lol-t23.htm" class="postlink"><strong>Contexte</strong></a> <br>♠️<a href="http://xoxoprojet.forumsactifs.net/reglement-and-co-f1/regles-pour-le-bon-fonctionnement-des-rpg-t24.htm#43" class="postlink"><strong>Règlement Rpg</strong></a>[/td][/table]</span>
</span></font></div></center>
MessageSujet: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 15:08
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
Bonjour !

Il est un peu en fouillis ce code ^^" Je vais te corriger ça mais j'ai besoin d'avoir quelques précisions.
Ce code est celui que tu as mis directement dans la description de ton forum, tu n'as pas touché aux templates ?
Est-ce que dans Panneau d'Administration > Affichage > Page d'Accueil > Structure et hiérarchie tu as coché "Lien vers les niveaux inférieurs" : oui ou avec une image ?
Est-ce que tu as un apperçu de ce que ça donne actuellement s'il te plait ?


Fu'


EDIT : la prochaine fois un petit bonjour ne fera de mal à personne Wink
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 15:27
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Oups le bonjour >.< Il me semblait bien que j'avais zappé quelque chose ^^'.

Alors Bonjour <3,

Non je n'ai pas touché au Template, oui c'est quelque chose que j'ai mis directe dans la description et voilà ce que ça donne attention parce que c'est mortel xDDDDDD

https://i.servimg.com/u/f68/14/38/20/90/screen11.jpg

Edit : Merci de m'occuper de mon cas ... Et quel cas u.U
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 15:44
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
Heu... Ca je pense que c'est juste les guillemets qui ne sont pas refermés, ce qui fausse tout. Ainsi que l'absence de tr dans le tableau peut-être. Et le div qui n'est pas refermé.
Au passage, je savais même pas que le bbcode était pris en compte dans les descriptions des forums o_O
En tous cas je vais te donner une méthode qui te permettra d'aller un peu plus vite. Il va falloir aller dans les templates et ajouter du css dans le forum plutôt que le mettre directement dans la description. (Panique pas tout de suite ! J'ai pas mon brevet de secourisme !)

D'abord, vas dans Panneau d'Administration > Affichage > Templates > Général. Ouvres celui qui s'appelle index_box. Et dedans tu vas chercher cette portion de code (tu peux utiliser ctrl+f pour aller plus vite) :
Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
Et tu vas le remplacer par ça :
Code:
<span class="genmed"><div class="description-forum">{catrow.forumrow.FORUM_DESC}</div></span>

Là, on a entouré la description de nos forums avec un div pour lui appliquer une classe, qu'on va pouvoir définir dans le css. N'oublie pas d'enregistrer les modifications et de publier le template.

Ce qui t'intéresse c'est d'avoir une bordure, donc tu vas devoir ajouter ceci dans le css du forum. Il est accessible depuis Panneau d'Administration > Affichage > Couleurs > Feuille de style css (onglet en haut).
Code:
.description-forum
{
   border-style: dashed ;   /* pour avoir tes pointillés, on choisi dashed en style. On peut peut aussi mettre dotted pour un autre effet de pointillés */
   border-width: 2px ;   /* c'est l'épaisseur de la bordure */
   border-color: couleur ;   /* couleur de la bordure. N'oublie pas de mettre ta valeur */
}

Maintenant toutes les descriptions de tes forums vont être entourées par la bordure que tu as choisie. Si tu valides, tu vas déjà pouvoir voir ça.

Apparemment tu n'as pas activé les liens automatiques, donc ça c'est parfait.
Pour écrire sur deux colonnes, il va bien falloir qu'on fasse un tableau, mais on va le faire en html et pas en bbcode, je pense que c'est plus sûr, et surtout ça nous permettra d'ajouter des classes, et tu verras que c'est pas plus compliqué. Les tableaux en bbcode se font de la même façon qu'en html. (C'est d'ailleurs en analysant le fonctionnement d'un tableau fait en bbcode que j'ai découvert comment faire un tableau en html... mais bref c'est pas le sujet !)
Donc notre tableau. On l'ouvre avec table, comme tu l'as fait. Mais avant de créer une cellule avec td, il faut faire une ligne avec tr. C'est un peu abstrait tout ça, donc je t'ai fait le début du code.
Code:
 <table>
   <tr>
   
      <td class="desc-case1">
         la description ici
      </td>
      
      <td class="desc-case2">
         les liens ici
      </td>
   </tr>
</table>

Voilà, il n'y a plus qu'à compléter le tableau !
Un dernier détail cependant : comme je l'ai dit tout à l'heure, on a ajouté des classes dans nos cellules (tu peux choisir le nom que tu veux d'ailleurs, j'ai mis ça parce que c'était simple à retenir, et que rien d'autre ne m'est passé par la tête). Ces classes vont nous permettre de définir les propriétés qui vont s'appliquer dans la cellule. Tu peux choisir plusieurs choses. J'ai séparé les valeurs par des slash, ne garde à chaque fois que celle qui t'intéresse, et pense bien à enlever mes parenthèses.
Largeur de la cellule : on peut la définir soit en pourcentages (attention à ce que le total des deux cellules fasse bien 100%) soit en pixels
width: Ypx/Y% ;
Alignement du texte :
text-align: center/left/right/justify ; (centré, à gauche, à droite, justifié)
Position verticale du texte dans la cellule :
vertical-align: middle/top/bottom ; (milieu, haut, bas)
Marges intérieures (pour ne pas que le texte soit trop près de la bordure)
padding: Ypx; (remplace Y par une valeur de ton choix)
On peut choisir l'endroit où va s'appliquer la marge en mettant un tiret et le nom du côté (ex : padding-right: ...)
top : haut
left : gauche
right : droite
bottom : bas
Couleur du texte :
color: couleur;
Texte en gras :
font-weight: bold ;

Pour créer la classe dans le css, il faut mettre un point, le nom de la classe, ouvrir les accolades, et les fermer quand on a fini. Les propriétés s'écrivent en donnant leur nom, deux points, la valeur, point virgule.
Donc en gros :
Code:
.desc-caseX
{
   propriété: valeur ;
}

On a la bordure, on a le tableau. Reste un point sur lequel je voulais venir : les liens. Pour les mettre en gras, on ne va pas utiliser strong (qui ne veut pas dire mettre en gras, mais signale un mot important dans un texte) mais font-weight. Au lieu de donner le style directement, on va le faire en css pour que ce soit plus simple. Pour ça on pourrait appliquer une classe au lien (a class="x" ...), mais on va faire plus simple. On va définir un style pour les liens contenus dans desc-case2. ce qui s'écrit comme ceci :
Code:
.desc-case2 a
{
   propriété: valeur ;
}

Donc couleur, gras et tout, dans le css du forum.

Et une fois ça fait, plus qu'à compléter.

Normalement ça devrait marcher. Je n'ai pas fait le test pour essayer de te répondre le plus rapidement possible, mais si tu as un souci, ou pas compris quelque chose, n'hésite pas.


Fu'


EDIT : J'u pense après coup mais pour enlever le soulignement c'est
text-decoration: none ;
A mettre dans le css, dans .desc-case2 si tu ne veux pas que les liens soient soulignés.
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 16:44
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Alors c'est parfait Very Happy C'est exactement ce que je voulais .... Par contre est ce que c'est possible que les pointillés ne soit pas collé au titre du forum ?

Edit : Ou alors qu'il soit prit en compte ...
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 16:59
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
Ouip.
Retournes dans ton tamplate index_body et cherche ceci :
Code:
<td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td>

On va faire comme tout à l'heure et lui ajouter une classe.
Code:
<td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="forum-titre">{catrow.forumrow.FORUM_NAME}</div></a></td>

Et dans le css on va ajouter une marge en dessous du titre :
Code:
.forum-titre
{
   margin-bottom: 5px;
}

J'ai mis 5px, mais tu peux mettre la valeur que tu veux.

Autre détail auquel je viens de penser : tu peux définir une hauteur minimale pour tes description, ce qui sera peut-être plus joli.
Rajoutes dans le css dans .decs-case1
min-height: Ypx;
Y étant la valeur de ton choix.


Fu'
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 17:25
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Euh ... Je trouve pas dans Index_Body :/

Edit : J'ai ça
Code:
<span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>


Dernière édition par Milkiniz le Dim 13 Juin 2010, 17:50, édité 1 fois
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 17:48
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
Normal c'est dans index_box T_T Pardon !


Fu'
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 17:50
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Je le remet là. Ah ok dans Index_Box j'ai ça
Code:
<span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 17:51
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
*s'auto-flagelle*

Y a des soirs où je ferai mieux d'aller me coucher je crois. (les td provienne d'une modification que j'avais faite sur le template, j'avais ouvert un template modifié et pas un "vierge")
La partie que tu as trouvé est la fonne. Ce qui nous intéresse c'est la fonction catrow.forumrow.FORUM_NAME, qui affiche le nom du forum. C'est à elle qu'on va ajouter la classe pour mettre une marge.
Pour faire simple remplace cette partie par ça :
Code:
<span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="forum-titre">{catrow.forumrow.FORUM_NAME}</div></a>

Le css est celui que j'ai donné tout à l'heure.
Et normalement cette fois c'est bon.


Désolé pour le contretemps.
Fu'
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 17:58
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
xD je comprend je suis comme ça aussi certain soir.
Par contre le code pour mettre par défaut une taille ça marche pas des masses :/

Code:
.description-forum
{
  border-style: dotted ;  /* pour avoir tes pointillés, on choisi dashed en style. On peut peut aussi mettre dotted pour un autre effet de pointillés */
  border-width: 2px ;  /* c'est l'épaisseur de la bordure */
  border-color: #423836 ;  /* couleur de la bordure. N'oublie pas de mettre ta valeur */
}
.forum-titre
{
  margin-bottom: 5px;
}
.decs-case1
{
min-height: 100px;
}
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 18:03
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
Si tu mettais .desc-case1 au lieu de decs-case1, je suis sûr que ça irait tout de suite mieux ^^"
Pardon je viens de voir ma faute de frappe, c'est donc moi qui suis en tord.
En fait, il faut juste reprendre dans le css le même nom que celui que tu as mis dans la case du tableau. J'ai mis ceux-là faute d'avoir une meilleure idée, mais tu aurais pu mettre ce que tu veux d'autre, tant que ça reste les mêmes dans ton tableau et dans ton css.


Fu'
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 18:07
Revenir en haut Aller en bas
http://xoxoprojet.forumsactifs.net/index.htm
Milkiniz
Milkiniz
{ Membre }
{ Membre }

Féminin Messages : 88



Un cadre en pointillé ou autre Empty
Merci beaucoup Fufu' <3

J'ai bien rigolé xDDD Bref merci encore et voilà problème résolut ... Avec classe (h)
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 18:09
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Un cadre en pointillé ou autre Empty
De rien !
Au moins j'ai quand même servi à quelque chose, c'est au moins à moitié rassurant.

Mais je classe, et je vais me coucher quand même, et je fais plus rien de la soirée ! ><


Bone continuation, et au plaisir de t'aider !
Fu'


EDIT : o_O C'est quoi ce surnom ?
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre EmptyDim 13 Juin 2010, 18:14
Revenir en haut Aller en bas
Contenu sponsorisé




Un cadre en pointillé ou autre Empty
MessageSujet: Re: Un cadre en pointillé ou autre   Un cadre en pointillé ou autre Empty
Revenir en haut Aller en bas
 

Un cadre en pointillé ou autre

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

 Sujets similaires

-
» [résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre
» Problème de Pointillé
» Bordure en pointillé
» Pointillé pour séparée les sujets
» Titre Centré et De plus grande taille + Soulignement Pointillé

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