Sujets similaires

Bonjour,

Déjà merci de prendre la peine de lire mon sujet I love you

J'essaye de mettre en place un nouveau style de catégories sur mon forum, mais je n'arrive pas à avoir exactement ce que je veux [résolu]Comment mettre en forme mes catégories ? 2077966078

[résolu]Comment mettre en forme mes catégories ? 2077966078

Une capture de ce que je voudrais avoir normalement :

Spoiler:

et une capture de ce que j'ai pu faire [résolu]Comment mettre en forme mes catégories ? 1779901633

:

Spoiler:

Je suis nulle en codage mais bon au moins j'ai réussi à mettre le cercle à droite x) Si quelqu'un pourrait m'aider à finir ces catégories je lui en serais très reconnaissante [résolu]Comment mettre en forme mes catégories ? 2176505670

[résolu]Comment mettre en forme mes catégories ? 2176505670

Je vous explique les chiffres sur l'image des catégories voulues :
> Au fait le cadre avec un fond bleu et des bordures blanches n'est pas le cadre de chaque catégorie, non c'est le cadre qui englobera toutes les catégories !

> la case n°1: ce sera une petite image 'Plus' par exemple, quand on survol les statistiques du forum s'affichent dans une infobulle "x message x sujet". (je sais faire des infobulles mais je ne sais pas comment placer l'image)

> la case n°2: c'est la case des derniers message que je voudrais personnaliser si possible via css.

> la case n°3: c'est juste un cercle en dessous de la case 2.

> la case n°4: une image aussi, quand on survol ca s'ouvre vers le bas pour montrer les sous forums , l'un en dessous de l'autre. (je n'ai trouvé aucun tuto pour m'aider à faire ça

)

> la case n°5: c'est l'image "new , no new, lock' .

Merci beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup lol!

Mon css :

Code:: .titrefora {
padding: 3px;
position: relative;
text-align: center;
width: 260px;
left: 130px;
font-family: 'Lovers Quarrel', cursive;
font-size: 40px;
top: 20px;
color: #2D87DA;
}
.iconefora{
height: 0px;
position: relative;
top: 30px;
left: 5px;}

.iconefora img {
width: 100px;
height: 100px;
}

.descrip {
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
height: 150px;
margin-left: 75px;
overflow-y: auto;
padding: 30px;
width: 70%;
background-color: #D7E8FF;
}

.stats {
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background: #B5E2F7;
border-radius: 90px;
left: 720px;
padding: 5px;
position: relative;
text-align: center;
top: -150px;
width: 150px;
height: 90px;
padding-top: 50px;
}

.forumlineacc{
border: 2px solid black;
padding: 5px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;}

Mon template :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><table class="forumline" width="900px" border="0" cellspacing="1" cellpadding="0">



<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

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


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<div class="titrefora"><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>
<div class="iconefora"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span><br />
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span></div>
<div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages.<br />
{catrow.forumrow.LAST_POST}</span></div>

</td>

</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" />

Bonjour !

Ta demande ressemble très fortement à une commande, mais on va supposer que tu souhaites juste avoir des indications sur comment obtenir ton résultat.

L'intégralité de tes demandes nécessite que tu apprennes les bases du positionnement relatif et absolu. Ca tombe bien, j'ai récemment fait une illustration pour expliquer comment ça marche :

[résolu]Comment mettre en forme mes catégories ? GlPDQ

[résolu]Comment mettre en forme mes catégories ? GlPDQ

A noter qu'à partir du moment où un bloc (je l'appellerai bloc alpha) est positionné en absolu (par rapport à un conteneur principal), si on met un autre bloc (bloc beta) à l'intérieur de celui ci, ce dernier se positionnera par rapport à son bloc parent (bloc alpha) et non par rapport au conteneur principal.

Si je récapitule :
• Ton conteneur principal, c'est le bloc qui contient tout un forum (titre, description, statistiques, etc)
• 1+2 constituent un bloc positionné en absolu par rapport au conteneur principal (et 3 sera positionné par rapport à 1+ 2). Tu peux faire un bloc dans un bloc dans un bloc pour faire l'effet 1+2 mais moi je partirais sur une image toute simple et je m'arrangerais pour que l'écriture ne dépasse pas les bords)

Pour 4 et 5, essaie déjà de faire juste la partie avec 1 et 2 (et 3), on verra le reste plus tard.

Bonjour 'Christa,

Merci encore de votre aide. Donc là si je comprends bien, tout se passera dans le css ? j'ajoute "position: absolute;" à 1 et 2 ? (même si je suis sûr que ce n'est pas ça xD) Je ne devrais pas poser le 2 dans le template déjà ?

Sinon j'ai bien compris le schéma que vous me montrez, vous dites que 1 doit être en absolu par rapport au bloc principal et 2 en absolu par rapport à 1 ? [résolu]Comment mettre en forme mes catégories ? 4205929361

[résolu]Comment mettre en forme mes catégories ? 4205929361

Au fait j'aimerais aussi savoir l'importance de l'absolu et relatif ?

Ben le positionnement relatif permet de fixer un bloc comme étant un point de référence (il y a moyen de décaler des blocs en relatif mais ça ne sert à rien la majorité du temps dans la mesure où l'espace qu'il "devrait" occuper est toujours là), et le positionnement absolu permet de positionner un bloc par rapport à un bloc relatif ou absolu.

Et bien sûr, pour que le CSS marche il faut évidemment que côté HTML il y ait les bonnes classes.

Tu trouveras des tas de cours en français sur le positionnement CSS si tu manques d'informations.

Un exemple de code pour voir comment marche le positionnement :

Code:: /* Le bloc parent*/
.Parent {
position:relative; /* élément relatif */
/* on fait deux trois réglages pour l'aperçu */
border:2px solid #000;
width:600px;
height:500px;
margin:auto;
}

/* Les blocs positionnés */
.Fils1, .Fils2, .PetitFils {
position:absolute; /* ils sont tous positionnés en absolu */
}

/* On positionne chacun des blocs */

.Fils1 {
top:10px;
left:10px;
width:300px;
height:100px;
background:rgba(255,255,0,0.5);
}

.Fils2 {
bottom:10px;
right:10px;
width:300px;
height:100px;
background:rgba(255,0,255,0.5);
}

.PetitFils {
top:-10px; /* soyons fous on positionne négativement */
left:100px;
width:50px;
height:50px;
background:rgba(0,255,255,0.5);
}

Code:: <div class="Parent">
<div class="Fils1">
   
   Fils1
</div>
<div class="Fils2">
   <div class="PetitFils">
      
      PetitFils
   </div>
   
   Fils2
</div>
//CONTENU du grand père (il doit se faire écrire sur le museau avec tous ces blocs en positionnement absolu)
</div>

B-A BA du bon codeur : avant de chercher à faire des trucs compliqués sur ton forum, essaie de les faire tout seul sur une page HTML toute simple.

Et sinon, comme ma signature l'indique, je ne veux pas qu'on me vouvoie, merci Wink

Coucou, donc j'ai essayé de comprendre au fait c'est compliqué [résolu]Comment mettre en forme mes catégories ? 1616978029

Bref, voilà ce que j'ai su faire en suivant ce que tu m'as expliqué.. c'est bourré de fautes c'est sûr, mais bon la forme est là x)

Voilà le rendu : http://pooop-s.forumgratuit.org/forum

Donc le premier problème c'est que le rond 3 (sur le schéma) ne se met pas en dessous du bloc 2.. je l'ai mis en transparent pour mieux voir, je ne sais pas comment le mettre derrière .. voilà mon template et css jusque là :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><table class="forumline" width="900px" border="0" cellspacing="1" cellpadding="0">



<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

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


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<div class="titrefora"><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>
<div class="tout">
<div class="partie1"></div>
<div class="iconefora"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="descrip">{catrow.forumrow.FORUM_DESC}<br /></div>


{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

<div class="sousfo"> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>

<div class="stats"><div class="partie3"></div><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages.<br />
{catrow.forumrow.LAST_POST}</span></div>
</div>
</td>

</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" />

Code:: .tout {
-khtml-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
-moz-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
-webkit-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
background-color: #FAF4D2;
border-bottom: 5px solid #6EB7E7;
border-left: 9px solid #6EB7E7;
border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
border-right: 9px solid #6EB7E7;
height: 138px;
margin: 10px;
padding-left: 20px;
padding-top: 50px;
position: relative;
width: 660px;
left: 50px;
}
.partie1, .stats, .partie3 {
position:absolute; /* ils sont tous positionnés en absolu */
}

.partie1 {
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
background-color: #0F4679;
border-radius: 70px;
height: 70px;
left: 690px;
width: 70px;
z-index: 30;
top: -30px;
}
.partie3 {
-moz-border-radius: 170px;
-webkit-border-radius: 170px;
background-color: rgba(0, 41, 255, 0.5);
border-radius: 170px;
height: 170px;
left: -30px;
top: -5px;
width: 190px;
}
.titrefora {
height: 0;
left: 190px;
padding: 3px;
position: relative;
z-index: 20;
}
.iconefora {
height: 0;
left: -75px;
position: relative;
}

.iconefora img {
width: 100px;
height: 100px;
}

.descrip {
background-color: #FAF3C8;
border-radius: 10px;
font-size: 10px;
height: 105px;
line-height: 10px;
margin-bottom: auto;
margin-left: 240px;
margin-right: auto;
overflow: auto;
padding: 5px;
width: 300px;
}

.stats {
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background: #B5E2F7;
border: 1px solid black;
border-radius: 90px;
height: 90px;
left: 580px;
padding: 50px 5px 5px;
position: relative;
text-align: center;
top: -180px;
width: 150px;
z-index: 10;
}

.forumlineacc{
border: 2px solid black;
padding: 5px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;}

Merci de me corriger les fautes (les nombreuses fautes plutôt) [résolu]Comment mettre en forme mes catégories ? 1779901633

Il est tard et je devrais dormir depuis un moment, donc je vais vite te répondre sans m'approfondir je verrai demain pour le reste.

Imagine tes blocs comme des feuilles de papier l'un sur l'autre. Dans mon exemple j'ai donné les noms "PArent", "Fils" et "Petit Fils" aux différents blocs, tu te souviens ?

En fait, celui qui "contient" est en dessous de celui qui "est contenu" :

Code:: <div class="Parent">
Couche la plus basse
<div class="Fils">
Couche du milieu
<div class="PetitFils">
Couche au dessus des autres
</div>
</div>
</div>

L'avantage de mettre des tabulations (des espaces) c'est qu'on voit un peu qu'est-ce qui contient quoi. Ici PetitFils est au dessus de Fils qui est au dessus de Parent.

Vu que je dors à moitié ça doit pas être clair mais tout ça pour dire qu'il faut que ton bloc "2" soit en dessous du bloc "3"

Donc du devrais coder quelque chose comme ça par exemple :

Code:: <div class="Bloc2">
<div class="Bloc3">
<div class="Bloc1">Code d'une infobulle</div>
Derniers messages
</div>
</div>

J'ai essayé de suivre votre exemple, et ca me donne ceci : http://pooop-s.forumgratuit.org/forum
Le fameux cercle bleu ne veut toujours pas se mettre en dessous [résolu]Comment mettre en forme mes catégories ? 3451650135

[résolu]Comment mettre en forme mes catégories ? 3451650135

pourtant j'ai fais comme dans l'exemple.

Code:: <div class="Bloc2"><br />
<div class="Bloc3">
<div class="Bloc1"><div class="bouton"><img style="width: 64px; height: 64px; border: none; box-shadow: 0px 0px 0px black; border-radius: 0px 0px 0px 0px; " src="http://icons.iconarchive.com/icons/diveandgo/diving/64/fish-icon.png" class="rotate">
<div class="cache"><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages.</span></div></img></div></div>
<div class="lasttext"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</div>
</div>

Code:: .tout {
-khtml-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
-moz-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
-webkit-border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
background-color: #FAF4D2;
border-bottom: 5px solid #6EB7E7;
border-left: 9px solid #6EB7E7;
border-radius: 200px 200px 200px 200px / 70px 70px 70px 70px;
border-right: 9px solid #6EB7E7;
height: 138px;
margin: 10px;
padding-left: 20px;
padding-top: 50px;
position: relative;
width: 660px;
left: 50px;
}
.Bloc2, .Bloc3, .Bloc1 {
position:absolute; /* ils sont tous positionnés en absolu */
}

.Bloc1 {
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
height: 70px;
left: 120px;
top: -30px;
width: 70px;
z-index: 30;
}

.Bloc3{-moz-border-radius: 170px;
-webkit-border-radius: 170px;
background-color: rgba(0, 41, 255, 0.5);
border-radius: 170px;
height: 170px;
left: -30px;
top: -5px;
width: 190px;
}
.Bloc2{
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background: #B5E2F7;
border: 1px solid black;
border-radius: 90px;
height: 90px;
left: 580px;
padding: 50px 5px 5px;
position: relative;
text-align: center;
top: -180px;
width: 150px;
z-index: 10;}

.titrefora {
height: 0;
left: 190px;
padding: 3px;
position: relative;
z-index: 20;
}
.iconefora {
height: 0;
left: -75px;
position: relative;
}

.iconefora img {
width: 100px;
height: 100px;
}

.descrip {
background-color: #FAF3C8;
border-radius: 10px;
font-size: 10px;
height: 105px;
line-height: 10px;
margin-bottom: auto;
margin-left: 240px;
margin-right: auto;
overflow: auto;
padding: 5px;
width: 300px;
}

.stats {
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background: #B5E2F7;
border: 1px solid black;
border-radius: 90px;
height: 90px;
left: 580px;
padding: 50px 5px 5px;
position: relative;
text-align: center;
top: -180px;
width: 150px;
z-index: 10;
}
.lasttext {
margin-top: 50px;
margin-left: 35px;
width: 150px;
height: 50px;
}
.bouton .cache {
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
-webkit-transition: All 1s ease;
height: 0;
overflow: hidden;
margin-top: -70px;
background-color: #B9E0F3;
border-radius: 30px;
border-left: 3px solid #133FAF;
border-right: 3px solid #133FAF;
}
.bouton:hover .cache {
height: 40px;
overflow: auto;
width: 150px;
}

Il y 'a aussi les infobulles qui ne s'ouvre pas quand on hover sur toute l'image du poisson, mais seulement quand on survol en haut du poisson [résolu]Comment mettre en forme mes catégories ? 40601244

[résolu]Comment mettre en forme mes catégories ? 40601244

Et j'ai une petite question, pourquoi ce n'est pas le bloc3 qui est placé au début (si c'est lui qui doit être en dessous) ? genre :

Code:: <div class="Bloc3">
<div class="Bloc2">
<div class="Bloc1">Code d'une infobulle</div>
Derniers messages
</div>
</div>

Encore merci pour l'aide I love you

et désolée si je suis trop conne lol!

Bah parce que je t'ai répondu à 4h du matin et que j'étais pas réveillée x) Après c'est à toi de faire des essais et de réaliser toute seule que je me plante. Moi je te donne la théorie, c'est à toi de la mettre en pratique. Je vois d'ailleurs que tu as compris que le bloc 3 était en dessous alors... qu'est-ce que t'attends pour mettre en pratique ton idée ? XD Le ciel ne te tombera pas sur la tête si tu dévies de mes indications. Si ça se trouve j'ai fait exprès de me planter pour voir si tu suivais @o@

Bon, et maintenant il se passe quoi si tu suis ta théorie ? (la question que tu m'as posée à la fin)

Mdr oui j'ai déjà essayé de mettre le bloc3 puis bloc2 puis bloc1 comme dans l'exemple à la fin, mais là le bloc3 est complétement à gauche, et quand je change le "left" ou "right" dans le css, bah y'a aussi le bloc2 et bloc1 qui se déplacent avec .. donc je me suis dit "c'est bon arrête avant de faire une gaffe" [résolu]Comment mettre en forme mes catégories ? 1779901633

Bah oui je t'avais dit de faire simple avant de vouloir faire compliqué, t'as fait compliqué pour commencer U^U

Essaie d'avoir ton affichage dans une page HTML à part avec JUSTE ce code là :

Code:: <div class="Bloc3">
<div class="Bloc2">
<div class="Bloc1">Code d'une infobulle</div>
Derniers messages
</div>
</div>

C'est bon j'ai mis le code .. après je fais quoi ? Very Happy

Ben montre moi déjà O_O L'objectif c'est de te pousser à avancer petit bout par petit bout sans vouloir faire trop de trucs à la fois (idéal pour se planter)

voilà http://pooop-s.forumgratuit.org/h3-blocss

Oui mais non XD Moi ce que je veux, c'est qu'avec juste ce code là, tu bidouilles du CSS de manière à avoir l'affichage exact des blocs 1-2-3 de ton aperçu au début du sujet x)

Je veux que tu me montres une page comme ça : https://i.imgur.com/k5p7D.png

(Mais non je ne suis pas chiante x) )

J'ai pas compris [résolu]Comment mettre en forme mes catégories ? 3451650135

Je dois mettre le code dans le template puis lui mettre du css ? Mais comment tu as fait ? [résolu]Comment mettre en forme mes catégories ? 2077966078

Ben pour le moment, avant d'intégrer aux templates, l'objectif est de réussir à obtenir la mise en page de ton schéma @_@ Tu tiens déjà le bon bout, il faut juste que tu te débarrasses de ce réflexe de "je modifie mon template je publie". Oublie le template. Il n'existe pas. Oublie ton forum 5 minutes, il n'existe plus. Regarde ta mise en page et dis toi "je veux coder un truc identique pour commencer".

Donc je fais juste des pages HTML de barbare, avec le code HTML et le CSS juste avant, entre balises <style> et </style>

Et dans le code source de ma page il y a donc juste ce HTML :

Code:: <style></style>

<div class="Bloc3">
<div class="Bloc2">
<div class="Bloc1"><div>Infobulle</div></div>
<div class="contenubloc">Derniers messages</div>
</div>
</div>

C'est super chiant à coder, je le conçois, mais... c'est toi qui l'as voulu o/

hihiiii comme ça ? http://pooop-s.forumgratuit.org/h3-blocss
Et oui moi je cherche toujours le plus compliqué ... [résolu]Comment mettre en forme mes catégories ? 1779901633

Hé bah voilà tu y arrives x)

Maintenant faut que tu continues à bidouiller (intelligemment) jusqu'à avoir un exemple de mise en forme pour un forum entier (je te préviens, j'ai fait des tests de mon côté et j'ai galéré pour avoir l'icone de catégorie en dessous U^U)

Mon code HTML actuel est le suivant :

Code:: <div class="LesCategories">
<div class="UnForum">
   <div class="IconeForum"></div>
   <div class="ConteneurForum">
      <div class="Bloc3">
         <div class="Bloc2">
            <div class="Bloc1"><div>Infobulle</div></div>
            <div class="contenubloc">Derniers messages</div>
         </div>
      </div>
   </div>
</div>
</div>

Au final c'est .UnForum le bloc référent d'origine.
Dedans j'ai positionné .IconeForum et .ConteneurForum
Dans ConteneurForum j'ai positionné le Bloc3 (etc...)

Reste encore à un mettre l'emplacement de la description et celui de l'image.

T'ai-je déjà dit que c'était compliqué ? @x@

wah c'est vraiment pas facile ce truc -_-

Donc là .LesCategories c'est la catégorie en tout, .UnForum c'est le corps au milieu du forum, .IconeForum c'est l'icone et .ConteneurForum c'est la partie qui englobe tout les blocs 1,2 et 3 ?

La forme est là, mais je ne sais pas si le code est juste .. regardez : http://pooop-s.forumgratuit.org/h3-blocss
[résolu]Comment mettre en forme mes catégories ? 40601244

Ah bah je t'avais prévenue que c'était pas de la tarte @_@ Mais une fois que c'est bien codé, c'est compatible tous navigateurs et ça change pas selon l'affichage de ton visiteur.

Sinon je n'ai pas codé identiquement personnellement. Techniquement le ConteneurForum que j'ai créé me permet(tra) de contenir la description+image et le bloc 1-2-3. C'est lui qui a le fond bleu ovale de ton schéma.

Essaie de placer une description et une image dans le bloc central maintenant et tu auras peu ou prou tous les éléments nécessaires pour te risquer à une intégration dans les templates. Pense à mettre des commentaires partout dans ton CSS pour t'y retrouver x)

Voilà j'ai mis la description : http://pooop-s.forumgratuit.org/h3-blocss

Au fait pourquoi "ajouter une image dans le bloc central" ? La partie 4 c'est un slide qui descend quand on survol, pour afficher les sous forums normalement Very Happy

Comment faire cela ?

J'ai essayé d'intégrer déjà ça dans le template, résultat .. une catastrophe [résolu]Comment mettre en forme mes catégories ? 4257895609

[résolu]Comment mettre en forme mes catégories ? 4257895609

peut être que je ne place pas les codes dans le bon endroit .. Merci de m’éclairer encore [résolu]Comment mettre en forme mes catégories ? 3517359236

EDIT : J'ai réussi à mettre les catégories dans le template haha [résolu]Comment mettre en forme mes catégories ? 1688815589

regardez : http://pooop-s.forumgratuit.org/forum

Il me reste les sous forums à mettre sous le slide. Rolling Eyes

Bon, ces margin de partout ne sont pas exactement ce que j'aurais fait (et fondamentalement c'est faux, ça ne sert à rien de faire du positionnement absolu si on triche ensuite à grands coups de marges - qui créeront des disparités selon les navigateurs - pour repositionner par derrière) mais on va dire que ça va, en tout cas le rendu est original (et tu l'as fait toute seule)

(et arrête de me vouvoyer !)

Le problème du "slide" c'est que tu n'auras pas une image différente par forum, tu le sais ça ? '_'

C'est vrai qu'avec les margin ça fait un peu brouillon.. mais je ne vois pas d'autres solutions [résolu]Comment mettre en forme mes catégories ? 40601244

(d'accord j'arrête de te vouvoyer xD)

Oui effectivement, j'aurais une image pareil sur tout les forums, c'est ce que je veux au fait Very Happy

Si tu as du mal à positionner un bloc par dessus un autre, mets lui un fond de couleur pour pouvoir voir où il est par rapport aux autres.

En l'occurence en regardant ton code j'aurais mis la partie centrale (ovale) comme bloc de référence, et à partir de là j'aurais positionné 3 parties : l'icone de forum, la section description+forum et la partie des statistiques.
[résolu]Comment mettre en forme mes catégories ? C6klp

[résolu]Comment mettre en forme mes catégories ? C6klp

Pour ton bloc glissant ma suggestion est d'utiliser un peu de CSS 3. J'avais fait une explication ailleurs pour obtenir un effet similaire aux avatars de CSSActif en CSS... faudrait que je la retrouve, là je dois aller me coucher.

Je t'explique rapidement la théorie pour le cas où tu bricolerais pendant que je dors.

En gros tu as un bloc (conteneur). Tu t'arranges pour ce qui dépasse de ce conteneur soit caché (un overflow:hidden). A l'intérieur de ce bloc, tu mets ton texte normal, mais aussi un autre bloc (que j'appellerai le cache), positionné en absolu, de la taille exacte du bloc conteneur (pour ne pas se faire chier avec les dimensions, tu le positionnes avec top, left, bottom et right à 0, il calculera tout seul sa taille par rapport au conteneur) Tu lui mets une image de fond (ou une couleur de fond) de manière à ce que, par défaut, il cache le contenu.

Ensuite en CSS tu t'arranges pour que, lorsqu'on survole le conteneur, le cache se prenne une marge (margin-top par exemple) de la taille du bloc conteneur (si ton bloc fait 250px de haut, tu fais un margin-top de 250px). Ca aura pour effet de "pousser" le cache en dehors des limites du conteneur, et donc de le faire disparaitre.

Si en plus tu rajoutes des transitions, tu peux t'arranger pour que ça se fasse lentement x)

Bref, ça se fait grosso modo comme ça :

Code:: <div class="conteneur">
<div class="cache"></div>
Le texte qui sera caché
</div>

.conteneur { bla bla hauteur largeur positionnement relatif ou absolu selon la nécessité + overflow hidden ou auto + margin = 0}
.conteneur:hover { moz-transition:all 1s ease }
.cache { positionnement absolu, top=0, left=0, right=0, bottom=0)
.conteneur:hover .cache {margin-top = taille du conteneur}

Comme je l'ai dit plus haut, l'idéal c'est d'essayer d'abord sur une page à part avant de le coder directement dans les templates.

Sur ce, je vais tenter de dormir @x@

Yo 'Christa,

J'ai lu ton message hier, mais j'ai trouvé ça encore plus compliqué, donc j'ai tenté de dormir moi aussi x)
Tu sais si c'est si compliqué que ça, je préfère laisser mes margin pour l'instant Rolling Eyes

Et effectivement j'ai bidouillé quelques petits trucs avant de dormir.. j'ai mis des tables autour des catégories [résolu]Comment mettre en forme mes catégories ? 3933776953

[résolu]Comment mettre en forme mes catégories ? 3933776953

Pour ce qui est du bloc glissant j'ai tenté d'en faire un, mais y'a un petit bug quand même , regarde : http://pooop-s.forumgratuit.org/h5-slide

Le texte ne se cache pas en dessous, il va et vient avec le bloc. Je me suis dis que peut être fallait le mettre entre

Code:: <div class="cache">Texte caché</div>

mais ça n'a pas marché non plus :/

Au fait déjà je me demandais s'il n'y a pas d'erreur dans l'exemple du code css que tu m'as montré ? Ce n'est pas plutôt le contraire ? (mais en même temps j'ai rien dis xD) J'ai fais le contraire dans le css et ça marche, sauf le texte qui bouge toujours avec le bloc [résolu]Comment mettre en forme mes catégories ? 40601244

[résolu]Comment mettre en forme mes catégories ?

[résolu]Comment mettre en forme mes catégories ?

Sujets similaires

Sujets similaires

Partenaires Or