avatar
Sexe : Féminin
Date d'inscription : 12/03/2018
Messages : 47
Newbie
Voir le profil de l'utilisateur

Quelle structure est concernée par votre problème ? L'afichage des sous forums
Qu'elle est l'adresse du forum concerné (sous hide si cela vous dérange) ?
Un screen du problème :
Spoiler:
Expliquez précisément votre problème : Bonjour à tous!  
C'est en forgeant que l'on deviens forgeron, n'est-ce pas ? Débutant en codage,
j'avance donc pas à pas et essaye de comprendre les choses par moi-même. C'est la première fois que je code entièrement des catégories, alors forcément : il fallait bien que je tombe sur un Os à un moment donné.

Comme sur beaucoup d'autres forums, je souhaite mettre mes sous-forums sous une petite image, avec un petit hover des familles bien sympa. Seulement voilà : je ne comprend pas comment procéder. J'ai fouillé sur internet, afin de comprendre le fonctionnement de cette chose en particulier et essayer de le reproduire par moi-même. Mais... malheureusement, je n'ai pas trouvé de véritable "tuto", (ce serait peut-être d'ailleurs pas mal, d'en proposer un sur epicode! c'est assez à la mode, ce genre de mise en page ;)) j'ai donc bricolé comme j'ai pu et le résultat n'est pas au rendez-vous.

vous connaissez les bricoleurs du dimanche ? C'est un peu pareil pour moi, codeuse du dimanche ->

-L'image se retrouve au dessus des liens des sous-forums au lieu d'être superposée
-Cela créé donc un scroll, qui décale également le "body" (image de fond) de mes catégories (du moins, je suppose que ça viens de là.)
-Le hover ne fonctionne pas non plus.

C'est donc la grosse cata ! Je pense que mon problème viens peut-être d'un template mal organisé, mais malheureusement, je ne comprend pas où est-ce que j'ai fait une bêtise. J'aimerai donc qu'une bonne âme vienne si possible éclairer ma lanterne afin que je puisses apprendre de mes erreurs    

merci d'avance à ceux qui se pencherons sur mon problème et pourrons m'expliquer :)
Les codes : la partie HTML des sous-forums dans mon template:
Spoiler:

Code:
   <div class="sous_forum"><div class="retvirg"><div class="sous_forums_img"><img src="https://nsa39.casimages.com/img/2018/11/06/181106022807663742.png" class="sous_forums_img" />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}  </div>
<script type="text/javascript">$('.retvirg').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div>
  
  </div>
    
    </div>

Le CSS des sous-forums :
Spoiler:

Code:

.sous_forum_img
{z_index:2;
    overflow: auto;
  float: right;
  margin-top : 60px;
  width: 150px;
  height: 100px;
    margin-left: 5px;
    margin-right: 5px;
 opacity: .9;
 transition: opacity 1s ease 0s;}
  
.sous_forum_img:hover
{
  opacity:1;}

.sous_forum
{z_index:1;
  float: right;
    overflow: auto;
  margin-top : 30px ;
  width: 150px;
  height: 100px;
  font-size: 11px;
  text-align: justify;
  font-size: 20px;
    text-align: center;
font-color: black;
  margin-left: 5px;
    margin-right: 5px;
a{
display: block;
font-size: 10px;
}}

Le template entier :
Spoiler:

Le CSS entier :
Spoiler:
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3806
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Bonjour,

En effet sur epicode il n'existe pas de tuto explicitement sur cette effet de sous-forum. PAr contre c'est exactement le même principe qu'un info-bulle. Voici un tutoriel sur les infos-bulle.

Il suffit de faire exactement la même chose sauf que ton info bulle sera positionner au dessus de ton image et non décaler.

Pour que ça fonctionne bien et que tes lien soit cliquable, tu doit mettre ton image dans la première div et tes lien dans la deuxième. En fait c'est tes lien qui doivent disparaître (visuellement ça donne le même effet. On dirais vraiment que c'est limage qui laisse place au lien alors que ses l’inverse. )

Si tu place ton image au dessus de tes lien, même à opacity:0; l'image est toujours là (mais invisible) donc elle t'empêchera de cliquer sur les liens.

Si tu n'y arrive pas avec le tuto on regarder ensemble ce qui cloche.



avatar
Sexe : Féminin
Date d'inscription : 12/03/2018
Messages : 47
Newbie
Voir le profil de l'utilisateur
Bonsoir Batty et merci de ta réponse !

J'ai essayé de suivre ton tutoriel sur les infobulles. Sans grand succès malheureusement, c'est la cata aussi :/
Les sous forums ne sont même plus affichés, et je bidouille depuis un peu plus d'une heure et demie
La liste des sous forums s'affiche (seulement en dessous, à la suite avec un scroll comme tout à l'heure) seulement si je n'ai pas le hover (qui ne fonctionne pas non plus) dans le CSS.

C'est à n'y rien comprendre

Voici donc ce qui a été modifié suite à ta première intervention :

CSS
Spoiler:

Code:
.infobulle{
display:inline-block;
  position: relative;
 float: right;
   overflow: auto;
 margin-top : 30px ;
  z-index:2;
 width: 150px;
 height: 100px;
 margin-left: 5px;
   margin-right: 5px;

}

.infobulle div{
position:absolute;
top:0px;
left:50px;
z-index:2;
width:70px;
height:70px;
opacity:0;
visibility: hidden;
transition: all 1s;
}

.infobulle: hover div{
opacity:1;
visibility: visible;
}

.sous_forum
{z_index:1;
 float: right;
  position: absolute;
   overflow: auto;
 font-size: 11px;
 text-align: center;
 font-size: 20px;
   text-align: center;
font-color: black;
   margin-top : 30px ;
 width: 150px;
 height: 100px;
 margin-left: 5px;
   margin-right: 5px;
a{
display: block;
font-size: 10px;
}}

et le Template:
Spoiler:

Code:
 <!-- sous forum -->
    <div class="infobulle"><img src="https://nsa39.casimages.com/img/2018/11/06/181106022807663742.png" class="infobulle" /><div class="sous_forum"><div class="retvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}  </div></div>
<script type="text/javascript">$('.retvirg').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div>
  
      
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3806
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Hello !

Alors la première chose que je voie c'est que tu à deux DIV qui encadre tes liens ce qui cause une interférence avec notre déclaration ".infobulle div" puisque celle-ci stipule "Toutes les DIV à l'intérieur de celle nommé infobulle aurons c'est valeur".

Du coup ta première div est décalé de 50px (left:50px; dans .infobulle div) puis la seconde est aussi décaler de 50px par rapport à la précédente. Le résultat est que nos lien sont décaler de 100px vers là droite... or ce n'est pas ce que nous souhaitons.

Du coup il faudrais supprimer une DIV. Tu ne le sais peut-être pas, mais je te l'apprend, il est possible d'atribuer plusieurs class à une même div. Il suffi seulement de metre un espace entre chaque nom de class comme ceci :

Code:
<div class="sous_forum retvirg"></div>

On évite ainsi de faire du suremballage ;) Mais pour aller plus loin, puisque ta class nommé retvirg à comme seul utilité désigné dans quelle DIV le script doit être apliquer on aurais tout simplement pus changer retvirg pas sous_forum dans le JS ce qui nous donnerais un code plus propre et simple :

Code:

<div class="infobulle">
   <img src="https://nsa39.casimages.com/img/2018/11/06/181106022807663742.png" class="infobulle" />
   <div class="sous_forum">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} 
   </div>
   <script type="text/javascript">$('.sous_forum').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script>
</div>

Maintenant qu'on à nettoyer ton HTML il faut nettoyer ton CSS.

La première chose que je remarque c'est ceci :

Code:

.sous_forum{
DU CSS
a{
display: block;
font-size: 10px;
}}

On ne peux pas metre une déclaration CSS à l'intérieur d'une autre. Si tu souhaite que les liens qui ce trouve à l'intérieur du la div nommé sous_forum est un style particulier il faut l'inscrire ainsi :

Code:

.sous_forum {
TON CSS POUR LES SOUS_FORUMS
}
.sous_forum a{
TON CSS POUR LES LIENS DANS LES SOUS_FORUM
}

Ensuite, dans le cas présent .infobulle div{CSS} et .sous_forum{CSS} veulent dire la même chose puisque la DIV nommé "sous_forum" ce retrouve à l'intérieur de la balise nommé "infobulle".

Rappelle-toi plus haut ce que j'ai dit : .infobulle div signifie "Toutes les DIV à l'intérieur de celle nommé infobulle aurons c'est valeur". Qu'est-ce qu'il y as à l'intérieur de notre div nommé infobulle ? Celle nommé sous_forum ! J’espère être claire '^' Si jamais tu ne comprend pas dit le je l'expliquerais autrement.

Tout ça pour dire qu'il est inutile dans ton CSS d'ajouté ceci :

Code:

.sous_forum
{z_index:1;
 float: right;
  position: absolute;
  overflow: auto;
 font-size: 11px;
 text-align: center;
 font-size: 20px;
  text-align: center;
font-color: black;
  margin-top : 30px ;
 width: 150px;
 height: 100px;
 margin-left: 5px;
  margin-right: 5px;
a{
display: block;
font-size: 10px;
}}

Si tu veux ajouté du style à la DIV nommé sous_forum (comme une couleur de fond, un couleur de typo ou des dimension X/Y) ajoute le à l'intérieur de .infobulle div.

Si tu veux stylé les lien ajoute ce bour de CSS :

Code:

.infobulle div a {
TON CSS
}

Qui signifie "Tout les lien qui ce retrouve dans les DIV à l'intérieur des DIV nommé infobulle serons comme ceci : "

J'espère avoir été claire ! C'est beaucoup d'information donc n'hésite pas à me dire si tu n'a pas compris ._.



avatar
Sexe : Féminin
Date d'inscription : 12/03/2018
Messages : 47
Newbie
Voir le profil de l'utilisateur
Bonjour Batty, et merci :)

je reviens quelques jours après vers toi, je viens enfin de trouver un peu de temps pour m'y mettre.

Malheureusement, le problème n'est toujours pas réglé. Mes blocs ne se positionnent plus du tout à droite, et les liens des sous forums n’apparaissent toujours pas ?

De ce que j'ai compris, la baslie sous_forums ne sert plus à rien, puisque tout est dans la partie "infobulle". Voilà donc le nouveau CSS, nettoyé après avoir suivi ce que tu m'as dit :
Spoiler:

Code:
.infobulle div a{
  position: absolute;
  float: right;
 width: 55px;
 height: 100px;
  display: block;
font-size: 10px;}

.infobulle div{

  position: absolute;
  float: right;
  overflow: auto;
 font-size: 11px;
 text-align: center;
 font-size: 20px;
  text-align: center;
font-color: black;
  margin-top : 30px ;
 width: 150px;
 height: 100px;
 margin-left: 5px;
  margin-right: 5px;
opacity:0;
visibility: hidden;
transition: all 1s;
}

.infobulle: hover div{
opacity:1;
visibility: visible;
}

concernant le HTML, j'ai donc copié/collé pour retirer la balise "sous_forum retvirg", qui comme tu l'as dit est désormais inutile.
Spoiler:

Code:
<div class="infobulle">
   <img src="https://nsa39.casimages.com/img/2018/11/06/181106022807663742.png" class="infobulle" />
   <div class="sous_forum">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}  
   </div>
   <script type="text/javascript">$('.sous_forum').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script>
</div>
    </div>
  </div>
  

puisque j'ai simplement recopié ce que j'avais dans mon ancienne balise .sous_forums pour le positionnement, comment est-ce que ça se fait qu'ils sont désormais à gauche, au lieu d'être à droite comme l'indique pourtant le float : right; ? et pourquoi les liens menant vers les sous forums ne s'affichent plus non plus ?  :/
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3806
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Ok reprenons du début =)

Le html pour une info bulle c'est :

Code:
<div class="infobulle">
Contenue visible
<div> Contenue de l'info-bulle</div>
</div>

C'est ce que nous avons présentement. (il faudrais retiré la class="infobulle" de ton image par contre).

Nous avons donc un première div appeler "infobulle" qui contiens notre image et une deuxième div (ainsi qu'un script, mais ça na peut d'importance). La div infobulle est notre conteneur (aussi appeler parent). On peut également voir ça comme notre "araine de jeu" . On doit donc lui donner des dimensions pour l'imité notre araine de jeu :

Code:

.infobulle{
 width: 150px;
 height: 100px;
}


Ensuite à cette même div on va lui ajouter "position:relative;". Visuellement ce bout de code n'ajoute rien, mais il viens déclaré que c'est cette div qui est notre conteneur/parent/araine de jeu. Même si c'était claire pour nous, les navigateurs sont con parfois il faut donc bien leur expliquer xD.

Comme cette div est notre conteneur c'est elle qui doit recevoir les autre valeur pour le positionnement comme ton float. Tout ce qui ce trouve à l'intérieur sera déplacer avec elle. Comme une boite qui contient notre image et une autre boite plus petite.

Ensuite, c'est bien beau tout ça, mais tes lien sont actuellement sous ton image et non au dessus... c'est à ce moment là qu'arrive ceci :

Code:
.infobulle div{

}

Nous allons donner les instructions à notre petite boite qui ce trouve à l'intérieur de notre grande boite. La première chose à faire c'est là positionner :

Code:
.infobulle div{
position:absolute;
top:0px;
left:0px;
}

Pourquoi cette fois-ci on utilise absolute ? La position absolute sert à placer une balise là où on le souhaite à l'intérieur de sont parent. Si sont parent n'est pas spécifier (comme nous l'avons fait en ajoutent position:relative; à la div nommé infobulle) la balise sera positionner à l'intérieur de la fenêtre web. Il s'agit de sont parent par défaut.

Du coup nous avons dit "je veux positionner mon bloc" avec la variable absolute, mais il faut lui donner une position avec top,right,bottom,left (on en utilise un ou plusieurs). Lorsqu'on veux que notre éllément soit positionner à un endroit bien précis on va donner les coordonné pour un coin. Moi j'ai décider de positionner le coin en haut à gauche (top/left)



Je veux donc que mes deux boite ce chevauche parfaitement donc je vais positionner ce coin là à la même place que celui de ma boite infobulle



Notre petite boite est donc bien positionner ! Ce que nous voulon ensuite c'Est qu'elle fait la même taille que notre conteneur pour caché complètement sont contenue. On va donc lui ajouté une taille et une couleur de fond :

Code:
.infobulle div{
position:absolute;
top:0px;
left:0px;
width:150px;
height:100px;
background: #ccc;
}

Rendu à cette étape nos sous-forum sont au dessus de notre image et la cache. Or nous ce que nous souhaitons ses que l'image soit visible et au passage de la sourie que ce soit les lien qui soit visible.

Nous allons donc rendre invisible nos sous-forum en ajoutent une opacité et un état de visibilité :

Code:
.infobulle div{
position:absolute;
top:0px;
left:0px;
width:150px;
height:100px;
background: #ccc;
opacity:0;
visibility: hidden;
}


Nos sous-forum sont invisible, mais au passage de la souris il ne ce passe rien. Il faut ajouté un hover et inversé les information d'opacité et de visibilité comme tu la fait :

Code:
.infobulle:hover div{
opacity:1;
visibility: visible;
}

attention le mot "hover" doit toujours être coller à ses ":"

Et voilà on a crée la section des sous-forum ! Il ne reste plus qu'à mettre ça joli =)

J'espère que c'est plus claire =/



avatar
Sexe : Féminin
Date d'inscription : 12/03/2018
Messages : 47
Newbie
Voir le profil de l'utilisateur
C'est parfait ! Merci énormément pour ton aide batty, tout fonctionne désormais :)

j'aurais quand même appris quelques trucs avec toi, notamment à ne pas sur emballer comme je l'avais fait, l'utilité des absolute et relative est plus claire mise en pratique, et le fait que le "hover" doit toujours être collé à ses ":" !

Le problème est donc résolu, et encore un grand merci à toi
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3806
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Génial !

je suis heureuse que ton problème soit résolut et de t'avoir appris un peux plus =)

j'archive le problème ^^



Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum