Problème sur la fusion de deux Css

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

Résolu Problème sur la fusion de deux Css

Message par Nako Atori le Mer 20 Aoû 2014 - 16:23

Salut Smile

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://i166.photobucket.com/albums/u106/chidori-chan_01/onakiri.png" /></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 ^^.


Dernière édition par Nako Atori le Dim 24 Aoû 2014 - 13:18, édité 1 fois

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Jeu 21 Aoû 2014 - 19:13

Petit Up ! Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Sam 23 Aoû 2014 - 1:19

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Sam 23 Aoû 2014 - 10:25

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 Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Sam 23 Aoû 2014 - 10:37

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 : http://i.imgur.com/4zki63m.png

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Sam 23 Aoû 2014 - 13:04

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 Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Sam 23 Aoû 2014 - 14:56

Hum je comprends mieux Very Happy

Alors je crois qu'il te manque du CSS Smile
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 Wink

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Sam 23 Aoû 2014 - 18:47

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 Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Sam 23 Aoû 2014 - 19:30

@[Nihil] a écrit: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 Wink
Il faut y aller petit à petit plutôt que tout en même temps  Mr. Green . Avant de passer à l'effet de survol sur la description, il faut d'abord que la description soit bien placée Very Happy.
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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Sam 23 Aoû 2014 - 19:58

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 ! Razz
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 Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Sam 23 Aoû 2014 - 20:49

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

@Nako Atori a écrit: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  Mr. Green 

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

@Nako Atori a écrit:ll'absence de description ! Razz
En fait les descriptions sont là, il manque juste le bon CSS Wink

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  Very Happy 

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Sam 23 Aoû 2014 - 21:09

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

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 Razz 

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par [Nihil] le Dim 24 Aoû 2014 - 0:07

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  Mr. Green 

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème sur la fusion de deux Css

Message par Nako Atori le Dim 24 Aoû 2014 - 13:17

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é ! Razz

Nako Atori
Nouveau membre

Messages : 10
Inscrit(e) le : 20/08/2014

http://knm-rp.forumactif.org/ / http://pokemon-rtan.forumactif.o
Nako Atori 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