Problème sur la fusion de deux Css

[Nako Atori]

Salut

Voilà je comptais refaire le design d'un forum en Phpb 2 en utilisant les catégories en block 2 colonnes, soit ce tutos --> http://thehowlingwolf.forumactif.org/t17-coupler-forum-sur-2-colonnes-et-cate-en-bloc .

Tout fonctionne bien je n'ai plus qu'à modifier les images, le problème c'est qu'il ne souhaite pas fonctionner avec les image hide description ( vous voyez pas ce que c'est, normal je ne connais pas le nom x) )

Html :

Code:

<div class="cate"><div class="cate_img"><img src="http://illiweb.com/fa/pbucket.gif" /></div><div class="cate_description">Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.</div></div>
<div style="clear: both;"></div>

Css :

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

Le problème ne semble pas venir de la partie Template du premier tuto mais, plutôt de la cohabitation des deux, résultat le forum par en tout sens x) ( image :

Spoiler:

). Ce que je souhaite c'est que les deux fonctionnent, ainsi j'aurais des catégorie block en 2 colonnes avec des images qui cachent les descriptions. Voilà merci de m'avoir lu jusque là et j'espère que vous m'aideriez a résoudre ce problème dérangeant ^^.

[Nako Atori]

Petit Up !

[[Nihil]]

Pourrait on avoir le lien du forum concerné ? (avec le problème visible aussi pour les invités :p)

[Nako Atori]

Yop, voici le lien http://pokemon-rtan.forumactif.org/ c'est un test. J'ai essayé de résoudre le problème en réinitialisant les deux codes css. J'espère que vous pourrez m'aider

[[Nihil]]

Est ce que tu peux remettre le(s) code(s) qui posai(en)t problème s'il te plait :p ?
Par ce que là on simplement ça : https://i.imgur.com/4zki63m.png

[Nako Atori]

Salut, je up pour te dire que j'ai remis le code défaillant, en espérant que ça t'aide a voir mon problème

[[Nihil]]

Hum je comprends mieux

Alors je crois qu'il te manque du CSS
Dans le tuto il y a ceci à un moment :

Code:

.forum_description
{
  position: absolute;
  overflow: auto;
  width: 400px;
  height: 100px;
  background: yellow;
}

Or dans sur ton forum il n'y est pas :s

Il va falloir diminuer la largeur (width) et changer la hauteur.
Normalement à partir de là tu devrais déjà avoir un meilleur rendu en terme de placement des éléments.
Dis moi si déjà ceci fonctionne

[Nako Atori]

J'ai fait ce que tu m'a dit ^^ ! Alors certes c'est beaucoup mieux, les sous forums et tout le reste ne partent plus dans tout les sens. Cependant, maintenant la description à disparut et les images de description ne s'adapte pas automatiquement comme sur certain code ce qui est plutôt gênant puisqu'elle "s'impose" par dessus les autres partis du css ^^.
Je te passe le lien : http://pokemon-rtan.forumactif.org/
Et une image en plus :

Spoiler:

Et surtout merci de m'avoir aidée

[[Nihil]]

Il va falloir diminuer la largeur (width) et changer la hauteur.

Il faut que tu adaptes la largeur (width) et la hauteur (height) pour placer correctement ta description à l'endroit choisi
Il faut y aller petit à petit plutôt que tout en même temps   . Avant de passer à l'effet de survol sur la description, il faut d'abord que la description soit bien placée .
D'ailleurs pour le css de forum_description, tu peux aussi enlever le overflow: auto (c'est ce qui met les scrollbars)

Une fois que c'est fait, dans ton CSS précédent, il faut aussi changer les tailles :

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */
 
 
.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

Il faut remplacer tous les width: 400px; par width: 100%; dans cette partie là.

En fait, pour pouvoir mixer les 2 codes correctement, il faut d'abord que tu arrives à obtenir le rendu du tuto précédent (la description bien placée donc). On évite d'appliquer un nouveau code sur quelque chose qui a déjà quelques problèmes, sinon on ne sait plus d'où viennent les soucis n__n

[Nako Atori]

Voilà, j'ai mis le Width : 100% la ou tu me l'as indiqué et j'ai légèrement modifié mon Css et le résultat est déjà beaucoup mieux ! Pour deux Css en simultanées, je ne recommencerais plus jamais, jamais, jamais ^^. Donc pour le premier Css ( celui de la double catégorie block ) les derniers problèmes son l'absence de la couleur Jaune qui devrait se trouver sous la description et le dernier message et l'absence de description !
Je te redonne mon CSS pour que tu vois les modif' :

Code:

.forum_bloc
{
  width: 850px;
  margin: auto;
}

.forum
{
  width: 410px;
  float: left;
  height: 200px;
  margin: 5px;
  background: white;
}
.cate_head
{
  clear: both;
  width: 900px;
  margin: auto;
  height: 117px;
  background: url(http://img15.hostingpics.net/pics/684539cateimage01.png);
}
.cate_body
{
  width: 900px;
  margin: auto;
  background: url(http://img15.hostingpics.net/pics/772164cateimage02.png) repeat-y;
}
.cate_foot
{
  width: 900px;
  height: 49px;
  margin: auto;
  background: url(http://img15.hostingpics.net/pics/156768cateimage04.png);
}
.titre_cate
{
  position: absolute;
  width: 900px;
  text-align: center;
  margin-top: 35px;
}
.titre_cate h2
{
  font-size : 24px;
  text-transform: uppercase;
  font-family: arial;
  text-decoration: none !important;
  color: #308576;
}
.forum
{
  width: 415px;
  float: left;
  height: 200px;
  margin: 15px 5px;
  background: white;
}

.forumlink
{
  position: absolute;
  width: 415px;
  height: 20px;
  background: blue;
  margin-top: -20px;
}
.forum_icone
{
  position: absolute;
  width: 150px;
  height: 40px;
  background: red;
  margin-left: 257px;
  margin-top: 90px;
}
.forum_description
{
  position: absolute;
  width: 253px;
  height: 100px;
  background: yellow;
}
.forum_description img
{
  float: left;
  margin-right: 5px;
  width: 200px;
}

.sous_forum
{
  position: absolute;
  overflow: auto;
  width: 415px;
  height: 45px;
  background: purple;
  margin-top: 155px;
}
.forum_stats
{
  position: absolute;
  width: 150px;
  height: 10px;
  background: grey;
  margin-left: 257px;
  margin-top: 20px;
  font-size: 10px;
  text-align: center;
}
.dernier_mess
{
  position: absolute;
  overflow: auto;
  width: 150px;
  height: 60px;
  background: orange;
  text-align: center;
  font-size: 11px;
  margin-left: 257px;
  margin-top: 30px;
}
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */
 
 
.cate
{
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 100%;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

Le lien du Forum : http://pokemon-rtan.forumactif.org/

Voilà, voilà en tout cas merci pour l'aide ça va déjà beaucoup mieux

[[Nihil]]

En général avant d'installer les meubles dans la maison, on attends d'avoir fini les travaux , c'est un peu la même chose o/
Il faut d'abord être au point sur la structure ☺

l'absence de la couleur Jaune qui devrait se trouver sous la description et le dernier message

Alors, la couleur jaune ne s'affiche pas car dans ton CSS tu as ceci :

Code:

.cate
{
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}

background-color: #ffffff; donne un fond blanc. Il te suffit d'enlever cette ligne   

Par contre je n'ai pas compris le "et le dernier message" :s. Le fond est orange, mais c'est normal, c'est ce que tu as mis dans le CSS pour .dernier_mess

ll'absence de description !

En fait les descriptions sont là, il manque juste le bon CSS

Dans le CSS de .cate_description il va falloir :
- enlever margin-top: -120px;
- changer position: relative; en position: absolute;
- rajouter top: 0;

Ensuite ça devrait aller mieux   

[Nako Atori]

Yo, tout d'abord je tiens a te remercier, merci, merci, merci, merci   
Tu as tout résolu et grâce à toi j'ai mieux compris ce code

Cependant il me reste un problème, pourquoi les titres de catégories n'apparaissent pas ? ^^
Lien : http://pokemon-rtan.forumactif.org/

Après ça je pense que je pourrais mettre le sujet en résolu et me consacrer à ton culte  

[[Nihil]]

Pense à vérifier que tu as bien suivi les étapes du tutoriel :p

Si tu ne trouves pas ton erreur, copie / colle le code de ton template, on va chercher ça   

[Nako Atori]

Salut, juste pour te dire que j'ai résolu mon problème après avoir relu le code, j'avais mal placé :

Code:

<div class="titre_cate">{catrow.tablehead.L_FORUM}</div></div>

Voilà, voilà je place le topic en résolu et merci de m'avoir aidé !