Image sous les catégories qui se dédouble
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
Image sous les catégories qui se dédouble
Bonjour à tous ^^
J'ai un petit problème et je n'arrive pas à en venir à bout. En fait, sur mon forum test, j'ai mis mes catégories en onglets. Comme on voit souvent sur les forums, j'ai installé une image sur le haut et le bas des catégories. Là sont mes problèmes. Pour le haut, j'ai des espaces incolore au bout de mes boutons de catégories. J'ai bien essayé d'élargir mes boutons, mais ces espaces persistent et mes boutons tombent sur deux lignes. Du coup, j'aimerais retirer ses espaces, mais je ne sais pas comment m'y prendre.
Mon second problème, qui est nettement plus embêtant, se situe sur l'image du bas. Dans ma template, j'ai mis le code pour l'image une seule fois, mais malheureusement, elle apparait deux fois. De plus, lorsque l'on va sur le second onglet, elle se déplace étrangement vers le haut. Comment arranger ce désagrément?
Voici mes codes CSS et template!
Merci beaucoup d'avoir pris le temps de lire mon problème, et un gros merci à ceux qui tenteront de me venir en aide!
Bonne Journée,
Meblang
EDIT : Quand je retir l'image, ça ne bug plus, mais j'aimerais grandement la garder
J'ai un petit problème et je n'arrive pas à en venir à bout. En fait, sur mon forum test, j'ai mis mes catégories en onglets. Comme on voit souvent sur les forums, j'ai installé une image sur le haut et le bas des catégories. Là sont mes problèmes. Pour le haut, j'ai des espaces incolore au bout de mes boutons de catégories. J'ai bien essayé d'élargir mes boutons, mais ces espaces persistent et mes boutons tombent sur deux lignes. Du coup, j'aimerais retirer ses espaces, mais je ne sais pas comment m'y prendre.
Mon second problème, qui est nettement plus embêtant, se situe sur l'image du bas. Dans ma template, j'ai mis le code pour l'image une seule fois, mais malheureusement, elle apparait deux fois. De plus, lorsque l'on va sur le second onglet, elle se déplace étrangement vers le haut. Comment arranger ce désagrément?
Voici mes codes CSS et template!
- Spoiler:
- Code:
/*CATÉGORIES ONGLETS ---------------------------------------------------------*/
/* --- categories ---*/
.cat_forum {
-moz-border-radius: 10px;
background-color: #F7B379;
margin: auto;
margin-bottom:30px;
}
/* *** liste *** */
.onglet {
display:inline-block;
height:30px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-top:-10px;
margin-bottom:-10px;
}
/* --- configuration de l'élément de liste --- */
.onglet li {
float:left;
width: 130px;
height: 30px;
line-height: 30px;
text-align: center;
vertical-align: middle;
list-style-type:none;
}
/* *** liens *** */
.onglet li a {
display:block;
text-decoration:none;
margin-left:5px;
font-size: 20px ;
font-style: italic;
letter-spacing: 0px ;
text-align:center ;
font-family: Antiqua, serif;
text-transform: lowercase;
color: #FFFFFF;
text-shadow:2px 2px 2px #FFFFFF;
}
/* --- liens au survol --- */
.onglet li a:hover {
color:#FC244F;
}
/* --- onglet actif --- */
.onglet_actif {
background-color: #F7B379;
width:130px;
height:30px;
cursor:pointer;
}
/* --- onglet non actif --- */
.onglet_nactif {
background-color: #F7B379;
width:130px;
height:30px;
cursor:pointer;
}
/* --- ici vos NOM DE CATEGORIE sauf un : il sera afficher en premier --- */
#Hampton, #Grecs, #Atlanta, #Relaxation {
display : none;
}
- Spoiler:
- Code:
<table width="70%" 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>
<img src="http://i46.tinypic.com/2cdxqtl.png"/><!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript">
//<![CDATA[
var i = 0;
document.write('<div align="center">
<ul class="onglet">
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Acceuil</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Collège</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Greeks Avenue</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Atlanta</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Relaxation</li>
</ul>
</div>
');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4');
function change_cat(numero)
{
document.getElementById(nom_cat[anc_cat]).style.display = 'none';
document.getElementById(nom_cat[numero]).style.display = 'block';
document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
anc_cat = numero;
}
function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}
//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript">
<!--
capture_cat();
//]]>
</script>
<!-- FIN MODIF ONGLETS -->
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="70%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="70%">
<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"><div style="width:150px;">
<div class="tourne"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="boxcatego"><div style="width:150px;"><span class="gensmall">{catrow.forumrow.LAST_POST}</span><br>....................<br>
<span class="gensmall">{catrow.forumrow.TOPICS} rumeurs △ {catrow.forumrow.POSTS} secrets</span></div></div></div>
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="70%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<table width="70%"><td align="right"></td><tr><td align="right"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="titre_categorie"><span class="gradualfader">{catrow.forumrow.FORUM_NAME}</span></div></a></td></tr></table>
</span>
</h{catrow.forumrow.LEVEL}>
<div class="categorie_description"><div class="categoriedescription"><div align="center">............................</div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div></div>
</td>
</tr>
<!-- END forumrow -->
<!-- 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 -->
<!-- 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="http://i47.tinypic.com/25qxao9.png"/><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Merci beaucoup d'avoir pris le temps de lire mon problème, et un gros merci à ceux qui tenteront de me venir en aide!
Bonne Journée,
Meblang
EDIT : Quand je retir l'image, ça ne bug plus, mais j'aimerais grandement la garder
Dernière édition par Meblang le Sam 16 Mar 2013 - 23:44, édité 1 fois
Re: Image sous les catégories qui se dédouble
UP j'ai vraiment besoin d'aide !
Re: Image sous les catégories qui se dédouble
Salut,
J'ai regardé vite fait, a voir si cela fonctionne
Déjà supprimer line-height dans le css, sur .onglet li { line-height: 30px;
Ensuite rajouter une class a la div dans le template.
Puis dans le css, mettre un fond et une taille a cette partie de votre couleur
Ensuite quand on ouvre sur accueil, le forum dépasse a droite, donc je mettrais comme ceci.
A tester et voir si c'est mieux.
J'ai regardé vite fait, a voir si cela fonctionne
Déjà supprimer line-height dans le css, sur .onglet li { line-height: 30px;
Ensuite rajouter une class a la div dans le template.
- Code:
document.write('<div class="ma_pa" align="center">
Puis dans le css, mettre un fond et une taille a cette partie de votre couleur
- Code:
div.ma_pa{background-color: #F7B379;width:750px;}
Ensuite quand on ouvre sur accueil, le forum dépasse a droite, donc je mettrais comme ceci.
- Code:
.cat_forum {
-moz-border-radius: 10px;
background-color: #F7B379;
margin: auto;
margin-bottom:30px;
}
A tester et voir si c'est mieux.
Re: Image sous les catégories qui se dédouble
Génial ^^ Ça règle mon problème d'espacement !! Merci beaucoup !!
Tu aurais une idée pour régler le dédoublement de mon image sous les catégories ? Quand on va sur l'onglet « Collège », la seconde image se déplace au-dessus de ma catégorie, juste sous mes onglets. Je ne sais pas pourquoi elle est en double, et j'ignore comme m'en débarasser
Tu aurais une idée pour régler le dédoublement de mon image sous les catégories ? Quand on va sur l'onglet « Collège », la seconde image se déplace au-dessus de ma catégorie, juste sous mes onglets. Je ne sais pas pourquoi elle est en double, et j'ignore comme m'en débarasser
Re: Image sous les catégories qui se dédouble
coucou,
Je suis arrivée a quelque chose en plaçant l'image hors de la table et entre une div après
.img-bas{margin-top:-50px;}
Je suis arrivée a quelque chose en plaçant l'image hors de la table et entre une div après
- Code:
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --><div class="img-bas"><img src="http://i47.tinypic.com/25qxao9.png"/></div>
.img-bas{margin-top:-50px;}
Re: Image sous les catégories qui se dédouble
WOW!!!!!!!! Ça fonctionneeeeeeeeeeeeeeeee!!!!!!!!!!!
MERCIIIIIIIIIIIIIIIII
Il me reste encore une petite chose, quand je vais sur mon onglet « Collège », le problème de barre blanche est toujours là. Où dois-je ajouter une div pour le régler? De plus, ma catégorie est passablement trop large, mais je n'arrive pas à l'ajuste. Avant j'y allais via la ligne où il était écrit forumline, mais l'ayant supprimé pour instaurer mes onglets, je ne sais plus comment m'y prendre. J'ai essayer avec une div, mais sans succès. Je ne savais pas trop où la placer.
Encore merci pour ton aide !
MERCIIIIIIIIIIIIIIIII
Il me reste encore une petite chose, quand je vais sur mon onglet « Collège », le problème de barre blanche est toujours là. Où dois-je ajouter une div pour le régler? De plus, ma catégorie est passablement trop large, mais je n'arrive pas à l'ajuste. Avant j'y allais via la ligne où il était écrit forumline, mais l'ayant supprimé pour instaurer mes onglets, je ne sais plus comment m'y prendre. J'ai essayer avec une div, mais sans succès. Je ne savais pas trop où la placer.
Encore merci pour ton aide !
Re: Image sous les catégories qui se dédouble
Coucou,
Essaye avec ses modif css.
.cat_forum {
- a supprimer margin: auto auto 30px;
- a rajouter width: 750px;
.onglet li {
- mettre height: 20px;
.cat_forum {
- mettre margin-top: -5px;
.img-bas
- mettre margin-top: -5px;
Tu peux descendre le titre de la catégorie
.secondarytitle, .secondarytitle h2 {
padding: 10px;
}
Essaye avec ses modif css.
.cat_forum {
- a supprimer margin: auto auto 30px;
- a rajouter width: 750px;
.onglet li {
- mettre height: 20px;
.cat_forum {
- mettre margin-top: -5px;
.img-bas
- mettre margin-top: -5px;
Tu peux descendre le titre de la catégorie
.secondarytitle, .secondarytitle h2 {
padding: 10px;
}
Re: Image sous les catégories qui se dédouble
Merci pour ton aide, mais le code que tu m,a donné ne fonctionne pas. Même en arrangeant les { manquant, çca ne fonctionne pas...
Re: Image sous les catégories qui se dédouble
Salut,
Donne moi ton css complet (celui que tu as actuellement) merci
Donne moi ton css complet (celui que tu as actuellement) merci
Re: Image sous les catégories qui se dédouble
Voilà mon CSS complet !!
Re: Image sous les catégories qui se dédouble
Tu effaces tout ton css et tu remplaces par celui ci.
- Code:
/*CATÉGORIES ONGLETS ---------------------------------------------------------*/
.onglet {
display:inline-block;
height:30px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-top:-10px;
margin-bottom:-10px;
}
/* --- configuration de l'élément de liste --- */
.onglet li {
float:left;
width: 130px;
margin-top: -10px;
text-align: center;
vertical-align: middle;
list-style-type:none;
height: 20px;
}
/* *** liens *** */
.onglet li a {
display:block;
text-decoration:none;
margin-left:5px;
font-size: 20px ;
font-style: italic;
letter-spacing: 0px ;
text-align:center ;
font-family: Antiqua, serif;
text-transform: lowercase;
color: #FFFFFF;
text-shadow:2px 2px 2px #FFFFFF;
}
/* --- liens au survol --- */
.onglet li a:hover {
color:#FC244F;
}
/* --- onglet actif --- */
.onglet_actif {
background-color: #F7B379;
width:130px;
height:30px;
cursor:pointer;
}
/* --- onglet non actif --- */
.onglet_nactif {
background-color: #F7B379;
width:130px;
height:30px;
cursor:pointer;
}
div.ma_pa{
background-color: #F7B379;width:750px;}
.cat_forum {
-moz-border-radius: 10px;
background-color: #F7B379;
margin-top: -10px;
margin-bottom:30px;
width: 750px;
margin-left: -0px;
}
.img-bas{
margin-top:-40px;}
.secondarytitle, .secondarytitle h2 {
padding: 10px;
}
a.mainmenu{
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
a.mainmenu:hover{
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
.postdetails.poster-profile img {
width:200px;
display:block;
}
body {
background-repeat: repeat;
background-position: none;
}
/* ESPACE HAUT ET BAS DU FORUM + LIENS SOULIGNES
------------------------------------------------*/
body{
margin-top: -10px;
margin-bottom: -38px;
}
a:link {text-decoration: none;
text-transform: uppercase;}
a:hover{text-decoration: none !important;
text-transform:uppercase ;}
a { text-decoration: none;}
a:link {text-decoration: none;
text-transform: ;}
a:hover{text-decoration: none !important;
text-transform: ;}
/* CODES ET SPOILERS
------------------------------------------------*/
.postbody {
display: block;
padding-left: 16px;
padding-right: 16px;
text-align:justify;}
.cadre{
width: autopx;
border: 0px solid # ;
margin: auto;
background-color: #FEFEF5;
}
.cadre2{
width: autopx;
border: 0px solid ;
border-opacity: 0.7;
margin: auto;
background-color: #FBFAD7;
}
/* CATEGORIES
------------------------------------------------*/
a.forumlink
{display:inline-block;
font-size: 20px ;
font-style: italic;
letter-spacing: 0px ;
text-align:center ;
font-family: Antiqua, serif;
text-transform: lowercase;
color: #FFFFFF;
text-shadow:2px 2px 2px #FFFFFF;
margin-bottom: -18px;}
a.forumlink:hover
{display:inline-block;
font-size: 20px ;
font-style: italic;
letter-spacing: 2px ;
text-align:center ;
font-family: Antiqua, serif;
text-transform: lowercase;
text-shadow:0px 0px 0px #FCDE87;
margin-bottom: -18px;}
.boxcatego{
width: autopx;
border: 0px solid # ;
margin: auto;
background-color: #fbcea8;
}
.boxsousfow{
width: autopx;
Height: 120px ;
border: 10px solid #e6e89d ;
margin: auto;
background-color: #fbcea8;}
.categoriedescription{
width: autopx;
Height: 120px ;
border: 10px solid #FCF3D8 ;
margin: auto;
background-color: #fbcea8;}
.textedescrip {
padding-left: 6px;
padding-right: 4px;
}
/* MESSAGES IMPORTANTS --------------------------------------------------------------------------------------- */
.reglement fieldset {
-webkit-border-radius: 20px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius: 20px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomleft: 50px;
border-radius: 20px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
text-align: justify;
border: 3px solid #81B6D1;
padding: 0px;
}
.reglement fieldset p {
padding: 10px;
}
.reglement fieldset legend {
font-size: 25px;
padding: 10px;
color: #81B6D1;
font-family: Georgia;
font-style: italic;
text-transform: uppercase;
text-shadow: 1px 1px 0px white;
align: center;
}
.soustitre {
display: block;
-webkit-border-radius: 20px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius: 20px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomleft: 50px;
border-radius: 20px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
margin-left: -3px;
background-color: #81B6D1;
text-align: center;
color: white;
}
.important {
background: #fbcea8;
padding: 10px;
width: 420px;
border-radius: 100px;
border-right: 6px solid #F4F0C6;
border-left: 6px solid #F4F0C6;
border-top: 12px solid #F4F0C6;
text-align: justify;
}
/* copyright --------------------------------------------------------------------------------*/
.aver {width: 200px;
height: auto;
text-align:justify;
margin-left:auto;
margin-right:auto;
padding:8px;
margin-top: 20px; }
/*RETIRER SOULIGNEMENT LIENS*/
a:link,a:active,a:visited,a:hover,a:focus
{
text-decoration: none;}
/*LISTER AUTOMATIQUEMENT*/
.postbody { display: block; padding-left: 30px; }
/*JUSTIFIER AUTOMATIQUEMENT*/
.postbody {
display: block;
text-align:justify;
}
/*sous catégories*/
#slides div {
background: #F7B379;
height: 90px; /* Égal à la hauteur de l\'image */
margin: 10px;
overflow: hidden;
position: relative;
width: 140px; /* Égal à la largeur de l\'image */
}
#slides div img {
left: 0;
position: absolute;
top: 0;
}
#slides div:hover img {
transform: translateY(103px); /* Valeur négative égale à la hauteur de l\'image */
-moz-transform: translateY(103px);
-o-transform: translateY(103px);
-webkit-transform: translateY(103px);}
#slides div img {
left: 0;
position: absolute;
top: 0;
transition: transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
/*image rotation*/
.tourne {
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}
.tourne:hover {
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
/* --- ici vos NOM DE CATEGORIE sauf un : il sera afficher en premier --- */
#Hampton, #Grecs, #Atlanta, #Relaxation {
display : none;
}
/*header--------------------------------------------------------------*/
body {
background-image : url(http://i48.tinypic.com/316afd3.png), url(http://i47.tinypic.com/5b1bp1.jpg) ;
background-attachment: scroll, fixed ;
background-repeat: no-repeat, repeat ;
background-position: top center;}
/*PAGE D'ACCEUIL------------------------------------------------------------*/
/*PROFIL---------------------------------------------------------------------*/
.pseudo {width: 205px;
height: auto;
text-align:center;
letter-spacing: 2px;
margin-left:auto;
margin-right:auto;
padding:5px;
background-color: #FCF3D8;
border: 1px #F27F41 solid;
border-radius: 30px;
margin-top: 20px; }
Re: Image sous les catégories qui se dédouble
HAN!!!!!!!!!!!!! Ça fonctionne!!!!!!!!!!!! MERCI BEAUCOUP!!!!!!!!!!!!!!
Sujets similaires
» Impossible de changer l'image des barres (déco) catégories et sous catégories
» sous categories en dessous de l'image
» problème insérer une image sous chaque catégories
» catégories et sous categories disparus sous internet explorer
» Adapter les catégories et sous-foruma à la taille de leur icône sous PHPBB3
» sous categories en dessous de l'image
» problème insérer une image sous chaque catégories
» catégories et sous categories disparus sous internet explorer
» Adapter les catégories et sous-foruma à la taille de leur icône sous PHPBB3
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