Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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 !)
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.
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:
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 - 9:46, édité 1 fois
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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.
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.
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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 ^^
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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.
Donc repérer la partie suivante.
Pour finir la partie css a placer dans votre feuille de style.
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>
- Code:
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
- Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
- Code:
<table class="fond_cat" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Donc repérer la partie suivante.
- Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
- Code:
<div class="fond_descript">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
- Code:
</td><td class="row3 over" align="center" valign="middle" height="50">
<table class="case_stats" cellpadding="0" cellspacing="0">
- 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;
}
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
ç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
Cependant je ne vois pas encore l'opacité lors du survol, c'est moi ou c'est normal? xD
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
Bonsoir
Normalement si vous avez bien suivi mes instruction l'opacité devrait fonctionner.
Puis avoir le template svp.
Normalement si vous avez bien suivi mes instruction l'opacité devrait fonctionner.
Puis avoir le template svp.
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
Je ne comprend pas ça fonctionne bien chez moi avec votre template.
Avez-vous bien placé le css dans votre feuille de style.
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;
}
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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.
Maintenant placer le code suivant dans chaque description de catégorie il faudra changer l'image pour chacune.
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
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>
- 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 */
}
- 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
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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 ^^"
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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.
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.
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.
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é">
- 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;
}
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.
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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 :
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
Pour les arrondis remplacer les 3 BORDER-RADIUS du code css ( fond_cat ) par ceux-la.
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:
-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;
}
- 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:
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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)
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('https://2img.net/h/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('https://2img.net/h/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(https://i.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:
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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.
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;
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
j'ai juste rajouter deux balises <br> pour que ça ne colle pas au bord
mais même sans, le problème ne change pas
- Spoiler:
<br><br>
<table class="font_cat" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="https://2img.net/image.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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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?
Puis-je avoir le lien vers le forum en question svp?
Aii-Chan~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
É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%"
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">
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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*
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
J'ai trouvé d’où vient le problème il vient de ce code.
Et pour mettre un cadre autour de chaque image placer ceci.
- 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;
}
Et pour mettre un cadre autour de chaque image placer ceci.
- Code:
border: 2px solid #000000;
- Code:
.opac_img_caté{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
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 ^^
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~~- ***
-
Messages : 109
Inscrit(e) le : 03/10/2011
Re: Besoin d'aide pour description avec Html et css (j'espere que je me suis bien exprimé...)
Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
Invité- Invité
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum