Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

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

Résolu Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mar 4 Oct 2011 - 2:31

Bonjour, bonsoir à tous !
Voilà mon problème, cela fais plusieurs jours que je me creuse la tête et que je vagabonde de forum en forum pour trouver des tuto qui m'expliquerais ce dont j'ai envie de faire.
Évidemment, rien de tout ça ne m'a réellement aidé, je n'ai jamais poster de demande (jusqu'à aujourd'hui), de peur de déranger pour une demande aussi enorme (je pense...) et surtout, je ne voulais pas paraitre nulle (même si mon but premier dans ce genre de forum c'est d'apprendre >.<)

Je ne sais pas si je dois poster ici ou dans les codes, donc veuillez m'excuser si je me suis gouré (et j'ai lu les règles, j'vous le jure !)

J'ai créer deux images, l'une avec un effet de survol que je voudrais et l'autre sans (quoi de plus logique !)
Spoiler:


> sans le survol

> avec survol

En fait, pour être le plus clair possible, lorsqu'on passe le curseur sur l'image par exemple, l'opacité devrait s'enlever, pareil sur la description.

J'ai déjà "réussi" à faire la partie derniers messages en suivant un tuto (même si je n'ai pas encore personnalisé le tout, car ça aurait été me casser la cervelle pour rien si je n'avais pas poster ici , vu que j'ai pas trop compris ce que j'ai fais >.>").

Voilà, j’espère que vous aurez compris ma demande ! je suis vraiment novice en ce qui concerne le codage, mais je peux vite comprendre si on m'apprends x) Et je ne suis pas pressée, je sais que je ne suis pas la seule à faire une demande.




Dernière édition par Aii-Chan~~ le Mer 19 Oct 2011 - 11:46, édité 1 fois

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mar 4 Oct 2011 - 2:57

Bonsoir

Donc ce que vous souhaitez c'est créer un effet d'opacité sur la description c'est bien ça?
Si c'est le cas il me faudrait le template index_box pour que je vous explique comment faire.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mar 4 Oct 2011 - 3:02

Mmmh oui mais pas seulement, j'aimerais aussi faire les sortes de tableau avec l'image et la bordure (enfin tableau, c'est pas vraiment le mot ><)

Cependant, je poste déjà le template, se sera une chose de faite ^^

Spoiler:
<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}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</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><br />
</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><td class="row3 over" align="center" valign="middle" height="50">
<table class="case_stats" cellpadding="0" cellspacing="0">
<tr>
<td class="dernier_msg"><p>{catrow.forumrow.LAST_POST}</p></td>
</tr>
<tr>
<td class="stats_forum"><p> {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </p></td>
</tr>
</table>
</td>
</td>
</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 -->

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mar 4 Oct 2011 - 4:39

Bon ce n'est qu'une première ébauche nous fignolerons par la suite.

Donc dans le template index_box repérer la partie suivante elle correspond a la première ligne supprimez-la.

Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>
Puis remplacez-la par celle-ci.
Code:
  <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
Ensuite nous allons créer un nouveau tableau pour englober tous l’ensemble donc repérer ceci.
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
et placer juste en dessous ceci.
Code:
  <table class="fond_cat"  width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
Maintenant nous allons entourer la description d'une DIV et lui attribuer une class pour pouvoir lui mettre un fond et un contour.
Donc repérer la partie suivante.
Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
et remplacez-la par celle-ci.
Code:
<div class="fond_descript">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
ensuite repérer ceci.
Code:
</td><td class="row3 over" align="center" valign="middle" height="50">
<table class="case_stats" cellpadding="0" cellspacing="0">
et placer juste avant cette partie c'est pour fermer le tableau.
Code:
</td>
</td></tr></table>

Pour finir la partie css a placer dans votre feuille de style.

Code:
.fond_cat{
  background-color: #f6f0d4;
  border-left: 10px solid #a39e8b;
  border-right: 10px solid #a39e8b;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  padding: 10px;
    opacity : 0.50;
    -moz-opacity : 0.50;   
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}

.fond_cat:hover{
    opacity : 0.95;
      -moz-opacity : 0.95;
      -ms-filter: "alpha(opacity=10)"; /* IE 8 */
      filter : alpha(opacity=10); /* IE < 8 */
}

.fond_descript{
  background-color: #dad3b9;
  border-left: 10px solid #bcb6a0;
  border-right: 10px solid #bcb6a0;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mar 4 Oct 2011 - 10:54

ça commence à prendre forme, merci de m'aider ^^
Cependant je ne vois pas encore l'opacité lors du survol, c'est moi ou c'est normal? xD

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mar 4 Oct 2011 - 21:14

Bonsoir

Normalement si vous avez bien suivi mes instruction l'opacité devrait fonctionner.
Puis avoir le template svp.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mar 4 Oct 2011 - 22:49

bien sur ^^
Spoiler:
<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}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- 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">
<table class="fond_cat" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<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><br />
</span>
</h{catrow.forumrow.LEVEL}>
<div class="fond_descript">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
<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>
</td></tr></table>
</td><td class="row3 over" align="center" valign="middle" height="50">
<table class="case_stats" cellpadding="0" cellspacing="0">
<tr>
<td class="dernier_msg"><p>{catrow.forumrow.LAST_POST}</p></td>
</tr>
<tr>
<td class="stats_forum"><p> {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </p></td>
</tr>
</table>
</td>
</td>
</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 -->

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mar 4 Oct 2011 - 23:44

Je ne comprend pas ça fonctionne bien chez moi avec votre template.
Avez-vous bien placé le css dans votre feuille de style.

Code:
        .fond_cat{
          background-color: #f6f0d4;
          border-left: 10px solid #a39e8b;
          border-right: 10px solid #a39e8b;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
          padding: 10px;
            opacity : 0.50;
            -moz-opacity : 0.50; 
            -ms-filter: "alpha(opacity=10)"; /* IE 8 */
            filter : alpha(opacity=10); /* IE < 8 */
        }
       
        .fond_cat:hover{
            opacity : 0.95;
              -moz-opacity : 0.95;
              -ms-filter: "alpha(opacity=10)"; /* IE 8 */
              filter : alpha(opacity=10); /* IE < 8 */
        }
       
        .fond_descript{
          background-color: #dad3b9;
          border-left: 10px solid #bcb6a0;
          border-right: 10px solid #bcb6a0;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
        }
Si ça ne fonctionne toujours pas pourrais-je avoir le lien vers le forum en question svp?

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mar 4 Oct 2011 - 23:54

Ca marche ! cela venait du css, peut être que j'ai mal copier le code ^^''''
par contre, est-ce possible que l'image nouveau message soit à côté de la bordure? Sur le schéma que j'ai posté, c'est une image que je compte changer à chacune des catégories ><
Enfin je vous laisse faire à votre aise, le code avance bien et je comprends mieux en y allant de cette façon que de suivre un tuto :3


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mer 5 Oct 2011 - 2:48

Ok donc comme vous voulez une image par catégorie il faut reprendre le template comme il était au début et changer la façon de faire c'est a dire que la modification se fait dans la description de chaque catégorie et non dans le template.

Donc replacez ce template.

Spoiler:
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}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

  <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

<!-- 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><br />
</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><td class="row3 over" align="center" valign="middle" height="50">
<table class="case_stats" cellpadding="0" cellspacing="0">
<tr>
<td class="dernier_msg"><p>{catrow.forumrow.LAST_POST}</p></td>
</tr>
<tr>
<td class="stats_forum"><p> {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </p></td>
</tr>
</table>
</td>
</td>
</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 -->

Maintenant placer le code suivant dans chaque description de catégorie il faudra changer l'image pour chacune.

Code:
<table class="font_cat" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="http://hariboow.free.fr/upload/images/zxwsqa.jpg">
</td>
<td align="center" class="descript">
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte
</td></tr></table>
Pour finir la partie css

Code:

.font_cat{
    background-color: #f6f0d4;
    border-left: #a39e8b solid 20px;
    border-right: #a39e8b solid 20px;
    -moz-border-radius: 100px / 160px;
    -webkit-border-radius: 100px / 160px;
    border-radius: 100px / 160px;
    padding: 10px;
}
       
.descript{
    background-color: #dad3b9;
    border: 3px solid #bcb6a0;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    opacity : 0.50;
    -moz-opacity : 0.50;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
      filter : alpha(opacity=10); /* IE < 8 */
}

.descript:hover{
    opacity : 0.95;
    -moz-opacity : 0.95;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}
Pour placer une image a la place du titre catégorie placez-la dans ( Nom de la catégorie ) avec ce code.
Code:
<center><img src=" votre image ici "></center>

J'ai changé l'opacité je l'ai placé sur la description maintenant si vous la voulez sur toute la catégorie c'est faisable mais je trouve que le rendu n'est pas vraiment chouette donc dites-moi ce que vous souhaitez Wink

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mer 5 Oct 2011 - 14:21

Désolé de vous ennuyer autant ^^
Oui c'est bien comme ça que je souhaitais l'opacité, est-ce que c'est possible d'en avoir aussi en survolant l'image?
et pour mettre une image en fond de categorie, je dois rajouter une balise background? pour associer avec le fond si j'ai envie de changer ? xD


Edit: en fond de description, plutôt... à la place du jaune clair ^^"

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mer 5 Oct 2011 - 20:38

Bonsoir

Pour avoir aussi l'opacité sur les images remplacer il vous faut remplacer celle qui se trouve dans la description et la remplacer par ceci.

Code:
<img src=" votre image ici " class="opac_img_caté">
puis dans la feuille de style placer ce code.

Code:
.opac_img_caté{
    opacity : 0.50;
    -moz-opacity : 0.50;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
      filter : alpha(opacity=10); /* IE < 8 */
}
.opac_img_caté:hover{
    opacity : 0.95;
    -moz-opacity : 0.95;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}

Pour placer une image en fond de catégorie ça se passe dans le code suivant CSS en rajoutant effectivement un BACKGROUND URL comme ceci.
Code:

.font_cat{
      background: url(http://hariboow.free.fr/upload/images/zopmgdg.jpg);
    border-left: #a39e8b solid 20px;
    border-right: #a39e8b solid 20px;
    -moz-border-radius: 100px / 160px;
    -webkit-border-radius: 100px / 160px;
    border-radius: 100px / 160px;
    padding: 10px;
}
Si vous rajouté une image en fond elle se verra aussi visible sur l'image et sur la description a cause de l'opacité,faite l’essaie vous allez vous en rendre compte.
Pour remédier a ce problème il vous faut modifier votre image en laissant certaine zone celle de la description et de l'image d'une autre couleur et le reste de l'image avec son motif d'origine.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Mer 5 Oct 2011 - 21:02

merci, c'est bien ce que je voulais ^^
par contre, je n'ai pas trop compris ce que vous m'avez dis en dernier, concernant l'image de fond et les problèmes d'opacité ><

je voudrais aussi que les bords soient moins arrondis, un peu comme j'ai fais sur l'image ><
et j'ai un petit problème avec ma barre de navigation, malgré les nombreuses modifications que j'y apporte, le texte refuse de se centrer, même avec text-align


voilà le css :
Spoiler:

a.mainmenu:link, a.mainmenu:visited{
font-size: 10px;
font-style: italic;
font-family :Times New Roman;
color: #000000;
background-color: #dad3b9;border: 1px #dad3b9 solid;
-moz-border-radius: 11px 11px 0px 0px;
}


a.mainmenu{
text-decoration: none;
color : #000000;
}
a.mainmenu:hover{
text-decoration: none;
color : #B0ADA0;
background-color: #dad3b9
}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:hover{text-transform:uppercase;}

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Mer 5 Oct 2011 - 21:59

Pour les arrondis remplacer les 3 BORDER-RADIUS du code css ( fond_cat ) par ceux-la.

Code:
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;

En ce qui concerne l'opacité et l'image que vous souhaité placer en fond de catégorie je vous montre en image l'effet que ça fera.



Donc a vous de colorier ou de mettre en transparence votre image a l'aide d'un logiciel la partie texte et l'endroit ou est la photo pour ne pas voir l'image de fond lorsque l'opacité est activé j'espère que vous me comprenez.

Pour la barre de navigation remplacer ce code.

Code:
a.mainmenu:link, a.mainmenu:visited{
font-size: 10px;
font-style: italic;
font-family :Times New Roman;
color: #000000;
background-color: #dad3b9;border: 1px #dad3b9 solid;
-moz-border-radius: 11px 11px 0px 0px;
}
par celui-la j'ai juste rajouté un padding right
Code:

a.mainmenu:link, a.mainmenu:visited{
font-size: 10px;
font-style: italic;
font-family :Times New Roman;
color: #000000;
background-color: #dad3b9;
border: 1px #dad3b9 solid;
-moz-border-radius: 11px 11px 0px 0px;
-webkit-border-radius: 11px 11px 0px 0px;
border-radius: 11px 11px 0px 0px;
padding-right: 11px;
}
Code:

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Jeu 6 Oct 2011 - 0:00

Ah j'ai compris ^^ Oui en effet ça traverse l'image et la description, mais c'est ce que je voulais faire, puis je vais essayer d'assombrir l'image pour que la couleur colle mieux à la description

Ca doit pas être mon jour de chance, en remplaçant les border radius, je me retrouve avec l'image et la description collé ensemble... j'envoie mon css, j'ai du encore gaffé dans les codes x)

Spoiler:
.forumline{-moz-border-radius:15px;
border:2px solid #000000;
}


a.mainmenu:link, a.mainmenu:visited{
font-size: 10px;
font-style: italic;
font-family :Times New Roman;
color: #000000;
background-color: #dad3b9;
border: 1px #dad3b9 solid;
-moz-border-radius: 11px 11px 0px 0px;
-webkit-border-radius: 11px 11px 0px 0px;
border-radius: 11px 11px 0px 0px;
padding-right: 11px;
}

a.mainmenu{
text-decoration: none;
color : #000000;
}
a.mainmenu:hover{
text-decoration: none;
color : #B0ADA0;
background-color: #dad3b9
}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:hover{text-transform:uppercase;}




table.case_stats{
width:200px; /* largeur */
height:140px; /* La hauteur */
margin:auto; /* on centre */
}

table.case_stats td.dernier_msg{
background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/dernier_msg_01.png');
background-position: center top;
background-repeat:no-repeat;
padding-left:50px;
padding-right:60px; /* Je déclasse du bord droit de 60px à gauche de ma pate */
padding-top:10px;
height:75px; /* mon image fait 85px de haut, mais comme j'ajoute 10px de remplissage, j'impose à ma case une hauteur = hauteur de mon image - padding top */
}

table.case_stats td.stats_forum{
background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/dernier_msg_02.png');
background-position: center bottom;
background-repeat:no-repeat;
padding-left:4px;
padding-right:4px;
}

table.case_stats td.dernier_msg p{
color:#000000;
width:140px; /*la largeur de mon bloc moins la largeur de ma pate */
padding:0;
margin:0;
margin-left:10px; /* Je décalle un peu par rapport aux bords gauche pour éviter que mon texte ne soit en dehors de mon cadre */
font-size:13px;
}

table.case_stats td.dernier_msg p a{
text-decoration:none;
color:white;
}

table.case_stats td.dernier_msg p a:hover{
border-bottom:green 1px dashed;
color:green;
}

table.case_stats td.stats_forum p{
color:pink;
width:160px; /*la largeur de mon bloc moins quelques px */
margin-left:50px;
font-size:10px;
font-weight:bold;
text-align:center;
padding:0;
}
.font_cat{
background: url(http://i41.servimg.com/u/f41/16/11/26/50/3310.jpg);
border-left: #a39e8b solid 20px;
border-right: #a39e8b solid 20px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
padding: 10px;
}

.descript{
background-color: #dad3b9;
border: 3px solid #bcb6a0;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}

.descript:hover{
opacity : 0.95;
-moz-opacity : 0.95;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}

.opac_img_caté{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
.opac_img_caté:hover{
opacity : 0.95;
-moz-opacity : 0.95;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
Spoiler:


deux autres questions, est-il normal que ma bordure n'arrondisse pas totalement les catégories? et si c'est possible de rallonger legerement ma description ? car j'ai pas mal d'espace entre ça et le cadre des derniers messages >< si c'est pas possible, c'est pas très grave ^^

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Jeu 6 Oct 2011 - 0:52

Normalement le fait de changer les BORDERS n'auraient pas du influencer sur l'espace entre l'image et la description.
Avez-vous touché au code qui se trouve dans la description?
Si c'est le cas pouvez-vous me le donner svp.

Pour ce qui est du coin qui déborde du cadre placer le morceau ci-dessous dans le code ( forumline ) qui se trouve dans votre feuille de style.

Code:
padding: 2px;


tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Jeu 6 Oct 2011 - 0:57

j'ai juste rajouter deux balises <br> pour que ça ne colle pas au bord
Spoiler:

<br><br>
<table class="font_cat" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="http://s3.noelshack.com/uploads/images/9464297585589_2.png" class="opac_img_caté">
</td>
<td align="center" class="descript">
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte<br>
texte texte texte texte texte texte texte texte texte
</td></tr></table>

mais même sans, le problème ne change pas

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Jeu 6 Oct 2011 - 1:21

Voila ce que j’obtiens avec votre CSS et le code de votre description.

Puis-je avoir le lien vers le forum en question svp?

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Jeu 6 Oct 2011 - 1:27

vraiment étrange °_°

bien sûr ^^ http://hunterpolleur.forumgratuit.org/

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Jeu 6 Oct 2011 - 2:22

Étrange oui parce que voila ce que je vois chez vous.

Alors nous allons définir une largeur au tableau qui se trouve dans votre description.

Dans cette partie mettez width="700" a la place de width"100%"
Code:
<table class="font_cat" width="100%" cellpadding="0" cellspacing="0">

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Jeu 6 Oct 2011 - 2:33

mon ordi doit avoir un sérieux problème alors xD
Bon, bonne nouvelle ça a réglé le problème ^^ est-ce que je peux rajouter une bordure à l'image via le css ou c'est préférable de la faire sur un logiciel de retouche? *chiante*

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par tupac le Jeu 6 Oct 2011 - 2:42

J'ai trouvé d’où vient le problème il vient de ce code.

Code:
table.case_stats td.dernier_msg p{
color:#000000;
width:140px; /*la largeur de mon bloc moins la largeur de ma pate */
padding:0;
margin:0;
margin-left:10px; /* Je décalle un peu par rapport aux bords gauche pour éviter que mon texte ne soit en dehors de mon cadre */
font-size:13px;
}
Mais je comprend pas,vous avez 7 codes pour modifier la case ( dernier message ) c'est ce qui produit ce bug alors qu'avec un seul ou deux vous pourriez avoir la même chose.

Et pour mettre un cadre autour de chaque image placer ceci.
Code:
  border: 2px solid #000000;
Dans ce code.
Code:
.opac_img_caté{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Aii-Chan~~ le Jeu 6 Oct 2011 - 2:50

j'ai fais ça a partir d'un tuto, j'avoue que j'ai trouver ça long aussi ^^" (ou sinon j'ai encore fais n'importe quoi, ça ne m'étonnerait pas)
je devrais peut être chercher quelque chose de plus simple, de toute façon c'était surtout un test vu qu'il a encore besoin de changement

je vous remercie pour votre aide en tout cas, je vais fouiller un peu le forum pour ne pas poser des questions inutiles déjà posées ^^


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)

Message par Invité le Dim 16 Oct 2011 - 10:33

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Invité
Invité


Invité 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