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! |
| Titre catégorie modifiant d'autres données | |
| Elanor
{ Membre }
Messages : 61
| Bonjour à tous, J'espère que vous me comprendrez. Tout d'abord voilà mon problème. J'ai lu un sujet (ici) très intéressant bien que difficile à comprendre. Lorsque j'ai lu les 4 pages et effectuée la manipulation, je n'ai pas réussi à trouver la même chose que la personne qui a créé le sujet. Mais, j'ai eu le même problème que d'autres membres. Or, je n'ai pas trouvé de "remède" ou d'explication qui arrive à remettre mon forum correctement. Donc le résultat que j'aimerai est le suivant (seulement le rond rouge du haut, bien que si vous aviez les codes pour les deux autres cela m'intéresse aussi) : - Spoiler:
Le topic (lien donné précédemment) permet de faire la même chose. Or comme vous pouvez voir sur al photo ci-dessous, il y a quelques problème. Au niveau des titres en dessous, et de plus j'aurai aimé que les titres de catégorie prennent toute la place : - Spoiler:
Voici mes codes : CSS : - Code:
-
.titre_categorie { background: #fad8a8; /*fond*/ -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/ -moz-border-radius-topright: 50px; /*arrondi angle droit*/ -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/ -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/ margin-top: 10px; /*ne pas modifier*/ margin-bottom: -10px; /*a modifier selon vos goûts*/ text-align: center; /*alignement du texte*/ height: auto; /*hauteur à modifier selon vos goûts*/ width: 500px; /*largeur à modifier selon vos goûts*/ margin-left: 350px; /*pour déplacer la position des titres des catégories*/ padding-top: 1px !important; /*espace entre la bordure et le texte*/ padding-bottom: 5px !important; /*espace entre la bordure et le texte*/ } Index_box : - Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}
{CURRENT_TIME}
</span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="titre_categorie">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr>
<th nowrap="nowrap" width="150"><div style="width:150px;">Statistiques</div></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%"> <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}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </td> <!-- BEGIN forum_link_no --> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall"><div class="sujets_messages">Messages : {catrow.forumrow.POSTS} | Sujets : {catrow.forumrow.TOPICS}</div><div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span> </td> <!-- END forum_link_no --> <!-- 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 --> J'espère que vous pourrez m'aider. Cordialement, Elanor. |
Dernière édition par Elanor le Dim 16 Jan 2011, 18:11, édité 4 fois | |
| | | Elanor
{ Membre }
Messages : 61
| Bonjour ! J'ai trouvé seule ! Youf ! En fait, il fallait supprimer un code de plus que ce que dis le topic d'astuces : Ca : - Code:
-
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> </th> Et ça : - Code:
-
<th nowrap="nowrap" width="150"><div style="width:150px;">Statistiques</div></th> Mais il me reste encore Quelques question question : x Comment changer la couleur de police des catégories ? x Comment les mettre à la longueur du forum sans le déformer ? x Comment augmenter la longueur de la dernière colonne ? Enfin en clair comment changer pour faire comme sur l'image de mon post précédent ? - Spoiler:
Merci d'avance. Bien cordialement, Elanor. | | |
| | | Sui
{ Membre actif }
Messages : 346
| Pour augmenter la largeur de la partie sujet/messages, il faut aller dans le CSS. Pourrions nous avoir ton CSS associé à cela ? (: Aussi, essaie ça.. pour la largeur des catégories. (: - Code:
-
.titre_categorie { background: #fad8a8; /*fond*/ -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/ -moz-border-radius-topright: 50px; /*arrondi angle droit*/ -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/ -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/ margin-top: 10px; /*ne pas modifier*/ margin-bottom: -10px; /*a modifier selon vos goûts*/ text-align: center; /*alignement du texte*/ height: auto; /*hauteur à modifier selon vos goûts*/ width: 100%; /*largeur à modifier selon vos goûts*/ margin-left: 350px; /*pour déplacer la position des titres des catégories*/ padding-top: 1px !important; /*espace entre la bordure et le texte*/ padding-bottom: 5px !important; /*espace entre la bordure et le texte*/ font-size: TAILLE DU TEXTE; font-family: POLICE DU TEXTE; } Tu pourras modifier la taille et la police du texte. (: | | |
| | | Elanor
{ Membre }
Messages : 61
| Voilà mon code CSS entier : - Code:
-
/*QUI EST EN LIGNE*/
.statistiques{ background-image: url("http://i37.servimg.com/u/f37/14/97/95/83/4854610.png"); background-repeat: no-repeat; background-position: text-align:jusitify;
height:500px;}
.groupes{ font-size:12px;font-weight: small-caps;text-align:center;height:20px -moz-border-radius-BOTTOM: 16px -moz-border-radius-TOP: 16px text-decoration: none;}
.coins { border:3px solid #BD997D; background-color: silver; -moz-border-radius:10px; -webkit-border-radius:10px; padding-left: 10px; }
.gensmall.statistiques { color: black; background-color: dimgray; -moz-background-opacity: 0.5; font-size: 13px; }
a.forumlink:hover { text-decoration: none; }
a.gen:hover a.genmed:hover a.gensmall:hover{ text-decoration: none; }
a:hover{ text-decoration: none !important; }
.cattitle{ font-weight: bold; font-size: 15px ; letter-spacing: 1px; color: silver; } .topictitle,h1,h2{ font-weight: bold; font-size: 13px; color : silver; }
.postbody { display: block; padding-left: 15px; padding-right: 15px; }
/*Catégorie du forum bord arrondis*/
.titre_categorie { background: #fad8a8; /*fond*/ -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/ -moz-border-radius-topright: 50px; /*arrondi angle droit*/ -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/ -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/ margin-top: 10px; /*ne pas modifier*/ margin-bottom: -10px; /*a modifier selon vos goûts*/ text-align: center; /*alignement du texte*/ height: auto; /*hauteur à modifier selon vos goûts*/ width: 90%; /*largeur à modifier selon vos goûts*/ margin-left: 50px; /*pour déplacer la position des titres des catégories*/ padding-top: 1px !important; /*espace entre la bordure et le texte*/ padding-bottom: 5px !important; /*espace entre la bordure et le texte*/ font-size: 12; font-color: #ffffff; font-family: tahoma;
}
/*Bordure du forum arrondis droite gauche blanc*/
.forumline {
border-left: 10px white solid; border-right: 10px white solid; border-bottom: 0px white solid; border-top: 0px white solid; -moz-border-radius-topleft: 10px; /*arrondi angle gauche*/ -moz-border-radius-topright: 10px; /*arrondi angle droit*/ -webkit-border-radius-top-left: 10px; /*arrondi angle gauche*/ -webkit-border-radius-top-right: 10px; /*arrondi angle droit*/ -moz-border-radius-bottomleft: 10px; /*arrondi angle gauche*/ -moz-border-radius-bottomright: 10px; /*arrondi angle droit*/ -webkit-border-radius-bottom-left: 10px; /*arrondi angle gauche*/ -webkit-border-radius-bottom-right: 10px; /*arrondi angle droit*/}
body { cursor: crosshair } a:hover { cursor:ne-resize; }
.postdetails.poster-profile a img { border: 5px double #BD997D; -moz-border-radius: 7px 0px 7px 0px; }
.sujets_messages {margin-top: 3px; /* pour faire un léger espace entre le bord et la ligne des "messages & sujets"; on évite de retirer */ padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre; on évite de retirer */ border: 1px dotted #BD997D; background-color: #FCEECF; -moz-border-radius: 7px 0px 4px 0px}
.derniers_sujets {margin-top: 3px; padding: 3px; border: 1px double #BD997D; background-color:#FCEECF; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px;}
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
.forumlink {text-align:center} a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; border-bottom: 4px double; display: block; text-align: center; font-size: 15px; letter-spacing: 0.5em; }
a.mainmenu:hover{ font-size: 13px; color: #BD997D; text-align: center; font-variant: small-caps; text-decoration: none; }
a.mainmenu{ font-size: 13px; color: #757575; text-align: center; font-variant: small-caps; text-decoration: none; }
a:link,a:active,a:visited,a:hover { font-variant: small-caps; font-size: 12px; text-decoration: none; }
/*spoiler - code - citation */
.code { background-color: #ffffff; /* couleur noire du fond */ border:1px #BD997D dashed; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 7px 0px 4px 0px -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #000000; /* couleur du texte blanche */ padding : 10px; }
.quote { background-color: #ffffff; /* couleur noire du fond */ border:1px #BD997D dashed; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 7px 0px 4px 0px -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #000000; /* couleur du texte blanche */ padding : 10px; }
.spoiler_closed { background-color: #ffffff; /* couleur noire du fond */ border:1px #BD997D dashed; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 7px 0px 4px 0px -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #000000; /* couleur du texte blanche */ padding : 10px; }
.spoiler_content { background-color: #ffffff; /* couleur noire du fond */ border:1px #BD997D dashed; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 7px 0px 4px 0px -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #000000; /* couleur du texte blanche */ padding : 10px; }
.presentation { background-color: #BD997D; border-bottom: 1px #BD997D dashed; border-top: 1px #BD997D dashed; border-right: 1px #BD997D dashed; border-left: 1px #BD997D dashed; -moz-border-radius: 13px 0px 13px 0px ; background-color: #ffffff ; border-width: 4px ; border-style:double ; border-color: #BD997D ; padding : 5px; }
.presentation2{ background-color: #BD997D; border-bottom: 1px #BD997D dashed; border-top: 1px #BD997D dashed; border-right: 1px #BD997D dashed; border-left: 1px #BD997D dashed; -moz-border-radius: 13px 0px 13px 0px ; background-color: #ffffff ; border-width: 4px ; border-style:double ; border-color: #BD997D ; padding : 5px; }
.presentation3{ background-color: #BD997D; border-bottom: 1px #BD997D dashed; border-top: 1px #BD997D dashed; border-right: 1px #BD997D dashed; border-left: 1px #BD997D dashed; -moz-border-radius: 13px 0px 13px 0px ; background-color: #ffffff ; border-width: 4px ; border-style:double ; border-color: #BD997D ; padding : 5px; }
.presentation4{ background-color: #BD997D; border-bottom: 1px #BD997D dashed; border-top: 1px #BD997D dashed; border-right: 1px #BD997D dashed; border-left: 1px #BD997D dashed; -moz-border-radius: 13px 0px 13px 0px ; background-color: #ffffff ; border-width: 4px ; border-style:double ; border-color: #BD997D ; padding : 5px; }
.presentation5{ background-color: #BD997D; border-bottom: 1px #BD997D dashed; border-top: 1px #BD997D dashed; border-right: 1px #BD997D dashed; border-left: 1px #BD997D dashed; -moz-border-radius: 13px 0px 13px 0px ; background-color: #ffffff ; border-width: 4px ; border-style:double ; border-color: #BD997D ; padding : 5px; }
#userlinks { background-color: #ffffff; border-bottom: 1px solid #cadceb; }
.boite{height: 300px ;}
EDIT : Merci beaucoup ça marche ! Un grand grand merci pour ta réponse rapide ! Tant pis si mon texte n'est pas de la bonne couleur. RE EDIT : Je viens de me rendre compte que non c'est pas bon en fait ! XD il reste la partie statistique qui reste trop petite à mon gout... Et si au passage vous avez l'astuce pour la couleur ! le liens : http://alyssonbrooks.forumactif.com/ RE-RE-EDIT : J'ai trouvé, juste ajouter dans la balise "width:XXpx" ! Merci à ceux qui m'on aidé ! | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Bonsoir; Alors essayes de rajouter une largeur - j'ai mis 150; mais ça se change xD - dans le CSS; dans cette partie : EDIT : J'avais pas vu ton édit xD - Citation :
- .sujets_messages
{margin-top: 3px; /* pour faire un léger espace entre le bord et la ligne des "messages & sujets"; on évite de retirer */ padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre; on évite de retirer */ border: 1px dotted #BD997D; background-color: #FCEECF; -moz-border-radius: 7px 0px 4px 0px; width: 150px;} Pour ce qui est de la couleur; ton titre se met en "silver", couleur que tu as mis pour la class nommée ".topictitle,h1,h2" (qui comprends aussi les liens des topics). Le problème est que le nom de ta catégorie rentre dans cette class; et prend donc cette couleur "silver" xD En rajoutant ceci dans ton CSS; tu forceras tes noms de catégories à se mettre à la couleur que tu souhaites, sans affecter le reste des liens : - Code:
-
.titre_categorie h2 {color: #ffffff!important;} Ici, j'ai mis #ffffff; pour du blanc; mais tu peux modifier par la couleur de ton choix =) Normalement ça devrait marcher | | |
| | | Elanor
{ Membre }
Messages : 61
| Merci Liliana ! Pour la couleur, ça marche implacable ! Tu me sauves ma mise en page ! | | |
| | | L
{ Membre actif }
Messages : 867
| Dans ce cas,je classe | | |
| | | Contenu sponsorisé
| | | | | Titre catégorie modifiant d'autres données | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|