Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Restructuration de l'index_Box

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

Restructuration de l'index_Box Empty Restructuration de l'index_Box

Message par BiKinou le Ven 31 Juil 2020 - 17:28

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 31/07/2020
Lien du forum : https://bikinoutest.forumactif.com/

Description du problème

Bonjour à tous,

Grâce à l'aide Kheino, j'ai réussi à créer un index_Box qui tient un peu près la route et maintenant ce que j'aimerai c'est qu'il soit bien solide sur ses bases

1° Vérifier que mon template est un peu près correct. Template complet.

Code:
<table width="100%" 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>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cadrage caté">
<div class="caté">
<div class="titrecaté">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
          <table class="forum" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="99%"><div class="forumgauche">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>
                    <td valign="middle">
                      <div class="descforum">
                        {catrow.forumrow.FORUM_DESC}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              </td>
              <td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg">
<img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" />
</div>
</div>
</div>
</td>
</tr></table>
</td>           
          <tr>
              <td align="left" valign="middle">
                <div class="ssforum">
        <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <span class="ovssforum">Voir les sous-forum</span>
 </div>
</td>
<td></td>
</tr><td></td></tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

Le CSS
Code:
/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/ 
/**CATÉGORIES**/
/*Cadrage*/
.cadrecaté {
border: 2px solid #402203;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
margin-bottom: 15px;
padding: 2px 4px 0px 3px;
}
.caté {
margin: 15px;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecaté h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 0px;
margin-right: 5%;
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color:  #402203 ; 
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecaté h2:first-letter{
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecaté h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Cadrage1*/
.forum{
margin: 50px 0px 30px 0px;
}
/* Messages et sujets*/
.Trait {
height: 2px;
background-color: #38263e;
width: 500px;
margin: 0 auto;
position: relative;
top: 5px;
}
.dermess {
padding: 10px;
text-transform: uppercase;
text-align: center;
width: 230px;
font-size: 10px;
height:55px;
}
.dermess a:hover {
color: #312516;
font: bold 15px papyrus;
text-align: center;
}
.forummess {
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
padding: 10px;
color: white;
width: 200px;
margin-left: 250px;
margin-top: -60px;
text-align: center;
font: 12px Papyrus;
}
/*Image NouveAnVer*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #0d5938;
padding: 5px;
}
/*Titre de forum*/
a.forumlink {
display: block;
text-align: left;
color: #402203!important;
font: bold 20px papyrus;
text-shadow: 2px 2px 1px #0d5938;
text-decoration: none!important;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00!important;
letter-spacing: 5px;
}
a.forumlink:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 26px papyrus;
}
/*Description*/
.descforum {
position: relative;
float: left;
width: 400px;
height: 206px;
border: 2px solid #747253;
margin: 0px -10px 0px -10px;
overflow: hidden;
}
.forum_desc {
position: absolute;
width: 396px;
height: 205px;
background-color: #000000;
color: #0d5938;
opacity: 0;
overflow: auto;
padding: 2px;
overflow: auto;
text-align: justify;
top: 0px;
left: 0px;
transition: 0.5s;
}
/*Apparition&image de la description de forum*/
.descforum:hover .forum_desc {
opacity: 0.8;
}
.descforum_img {
position: absolute;
width: 400px;
height: 206px;
top: 0px;
left: 0px;

/**FIN FORUM**/

/**SOUS FORUM**/
.sforum {
position: relative;
z-index: 3;
display: block;
height: 0;
margin-bottom: -1px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
color: #b5b5b5;
overflow: hidden;
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; 
}
.ovssforum {
position: relative;
z-index: 3;
display: block;
float: right;
width: 140px; 
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
margin: 0px 30px -1px 0px;
padding: 2px 0px 6px 0px;
font: bold 13px papyrus;
color: #402203;
border-radius: 0px 0px 10px 10px #0d5938;
box-shadow: 0px 0px 5px 2px #0d5938;
font: bold 13px papyrus;
text-align: center; 
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-o-border-radius: 0px 0px 10px 10px;
}
.ssforum:hover  .sforum {
height: 60px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
color: #402203;
margin-bottom: -1px;
overflow: auto;
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;
border-radius: 15px 15px 15px 15px #0d5938;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-o-border-radius: 0px 0px 15px 15px;
}
.ssforum a {
color: #402203 !important;
font: bold 13px papyrus;
margin-left: 5px;
}
.ssforum a:hover {
color: #402203 !important;
}
/**FIN SOUS FORUM**/

/**ELEMENTS IMPORTANTS**/
/* index losange-img right */
/* losange-overall parent fantome */
.indexloright {
height: 150px;
width: 150ox;
display: block;
position: absolute;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 15px;
margin-left: 100px; 
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 150px;
width: 150px;
display: block;
position: absolute;
background: darkgrey;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
width: 150px;
height: 150px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 130px;
height: 130px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* fin index losange-img right */

/**FIN DERNIER MESSAGE**/
/*_____ FIN INDEX BOX_____*/


2 ° M'aider à restructurer la partie "forum" C'est elle qui me pose vraiment problème car n'est mise en place correctement (icônes des images du forum (nouveau, verrouillé ...), mon losange ... etc
Code:
<!-- BEGIN forumrow -->
          <table class="forum" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="99%"><div class="forumgauche">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>
                    <td valign="middle">
                      <div class="descforum">
                        {catrow.forumrow.FORUM_DESC}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              </td>
              <td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg">
<img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" />
</div>
</div>
</div>
</td>
</tr></table>
</td>           
          <tr>
              <td align="left" valign="middle">
                <div class="ssforum">
        <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <span class="ovssforum">Voir les sous-forum</span>
 </div>
</td>
<td></td>
</tr><td></td></tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
Merci pour vôtre aide

BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par kheino le Sam 1 Aoû 2020 - 12:27

Bonjour BiKinou,

Le html est un peu mieux sructuré, mais,
normalement, si tu fermes une ligne, tu ne peux pas en html balancer des 'div' entre les balises '/tr' et 'tr', si tes blocs-div doivent se mettre sur une autre ligne, dans la logique dûn tableau-html elle doivent aussi entrer dans une nouvelle colonne, ref:
Code:
</tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>
De plus, vois la dernière dic qui est mal éditée avec un espace du dernier guillement ", ainsi que, évite les majuscules dans les noms de sélecteur.

Ici tu fermes une colonne 'td' sans fermer la ligne 'tr':
Code:
</td>            
          <tr>
              <td align="left" valign="middle">
                 <div class="ssforum">
Bref, c'est rédhibitoire à une bonne structure et donc pas étonnant que tu aies des incohérences, de plus ce n'est QUE ce qui m'a sauté aux yeux, je n'ai pas cherché dans le détail.

Si tu fais déjà un tableau-parent, le plus juste est d'incorporer des tableaux-enfants qui peuvent aussi être parents de sous-tableaux. C'est ce qui est le plus stable en matière d'architecture, il faut alors juste bien suivre.
Un tip : fais un schéma de ta structure comme un plan d'architecture (avec les étages, les fenêtres, etc).

Bref, html à corriger (comme tu m'as dit que tu voulais recoder comme il y a 4 ans).

Quant au css, c'est comme s'il y avait un autre CSS parce que je n'ai pas le même rendu que sur ton forum-test:
- Les icônes de gauche (9h sur une montre, celles de nouveaux, pas et verrouillés messages) sont sur TON forum sont en dehors du cadre de la description (colonne 'td' du milieu sur 2 lignes 'tr') alors que chez moi elles sont dedans.
- Le losange est mal placé, mais chez toi il est carrément hors cadre DU forum.
Quelle largeur de forum as-tu?
Y a-t-il des feuilles de style-css hébergées ? (tes précédents code comportaient au début des balises 'link')
kheino

kheino
Membre habitué

Féminin
Messages : 1667
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 13:06

bonjour Kheino,
J'ai viré hier soir 'link' car c'était pour la police que je ne mets pas, celui que je mets actuellement c'est le Papyrus et le times New roman

Actuellement je suis au début avec mes icônes de forums car j'aimerai qu'elles soient indépendantes du cadre de description.

Et réfléchit en même temps à comment remettre le nowrap pour aligner mon dernier message; sujets (calligraphie et écrits)

Mon idée serait

table forum
en-dessous
table icône/description forum
avoir une colonne pour l’icône
Une autre pour la description

table description ou tr description
le cadre coulissant
les messages, sujets/nbre de message




BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par kheino le Sam 1 Aoû 2020 - 13:39

Corrige ton code et fais comme je te l'ai suggéré, procède sur la base d'un schéma d'architecture.
(Ne viens pas à nouveau avec tout à la fois).

Si tu veux les icônes hors-cadre de la description, c'est qu'il faut un autre tableau dans la colonne-td parent, donc le 1er tableau (table).

2) Ne parle pas de tr, tr est une balise-ligne qui implique une colonne (qui elle peut contenir un tableau complet (table, tr, td et leur fermeture respective):
Code:
<table> tabeau-parent principal
<tr>
<td>

<table> tableau-enfant + -parent
<tr><td>
contenu
</tr></td>
<tr><td>
<table><tr><td> tableau-enfant
contenu
</td></tr></table> fermeture  tableau-enfant
</td></tr>
</table> fermeture tableau enfant-parent

ETC

</td>
</tr>
</table> fermeture tableau-parent principal

Ne t'occupe que de ça dans un premier temps !
Les coulissants etc, ce sont des effets-css que tu peux travailler ensuite, une fois que ta structure est posée et stable.
C'est parce que tu fais tout en même temps que tu mélanges tout et que rien ne fonctionne.

EDIT : QUELLE LARGEUR DU FORUM AS-TU ???
QUEL AUTRE CSS AD-TU COMME POUR LES IMAGES ET LE FOND DES DESCRIPTIONS EN NOIR???
Comment t'aider si on n'a pas tout les éléments ? Si des codes css de ces éléments sont mal fichus, nous n'aurons jamais le même rendu. Ce que tu mets dans la description du forum en code influe aussi sur le reste!
bigre! et dire que la patiences est absente de l'équation de mes qualités!
là je ne vais pas m'éterniser si c'est pour en arriver au même point que les 2 précédents sujets.


Voici ce que ça donne chez moi juste avec le " bien placé, ainsi: le class="trait" (<--en miniscule corrigé aussi dans le css)
Spoiler:
Restructuration de l'index_Box Captur10
kheino

kheino
Membre habitué

Féminin
Messages : 1667
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 14:15

C'est que je te dis je suis entrain de refaire ce passage là
Code:
<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
  

Le début de mon  template que j'ai vérifié pour m'assurer son bon fonctionnement
Code:
<table width="100%" 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>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->

Pour le passage où je suis, j'essaie de faire un tableau ensuite une fois que celui-ci sera en place, je poursuivrais avec  sur ma description.

1er tableau : icone
2éme tableau : nom forum
3ème tableau : messages, sujets/messages

Là c'est mon CSS où j'en suis actuellement
Code:
/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
border: #402203 2px solid ;
background: #b8a27f url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
margin-bottom: 50px;
padding: 5px 15px 5px 14px;
}
.cat {
margin: 15px;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 10px 0px 20px 10px;  
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color:  #402203 ;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter{
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Fond forum*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow:  #0d5938 0px 0px 5px 2px;
padding: 10px;
margin: 15px 0px 20px 10px;  
}

EDIT : 850 largeur forum
EDIT : Je n'ai qu'un seul CSS que je ne touche pas tant que je n'ai pas corrigé la partie où je suis rendue dans le template c'est sans doute pour ça que sur mon forum c'est pas correctement mis
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par kheino le Sam 1 Aoû 2020 - 14:29

Oui un seul css, mais tu as du html dans les descriptions, si?
Sinon., d'où viennent ce fond noir de la description et les images au-dessus?
Si c'est codé comme le template... c'est un TOUT, surtout avec autant de css pour l'un et l'autre.
kheino

kheino
Membre habitué

Féminin
Messages : 1667
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 16:48

Ah , oui, ça y est je comprends ce que tu me dis, tu parles bien de là où il y le champs de blé , la fille aux escarpins ? Désolé, j'avais occulté ce passage pour me concentrer sur la transformation du tableau
Oui, il y a un code qui doit être mis à chaque fois dans la description du forum, mais j'aimerai virer ce système là pour mettre mon coulissement de porte comme les sous-forum. bon pour le moment j'en suis pas là., je n'arrive à créer mon foutu tableau ... Zen ... Zen
EDIT : Voilà je pense que cette partie est OK niveau structurage (Oui, c'est vachement français :p)
Code:
<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" align="center" valign="middle">
<div class="iconeforum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div></td>
<td align="left" valign="middle">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>   
</td>
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>

Code:
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>

Cette partie là, me pose toujours problème. Je n'arrive pas à l'aligner
Code:
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>


Dernière édition par BiKinou le Sam 1 Aoû 2020 - 17:25, édité 1 fois
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par kheino le Sam 1 Aoû 2020 - 17:14

Oui je parle de ceci. et je ne vois pas pour où d'autre tu pourrais passer puisque chaque description est différente, il n'y a que ces champs pour le faire, les effets dessus c'est du css, mais d'abord ce sont les codes html tels quels qui m'intéressent.

J'ai regardé un peu plus en détail ton code...
ABSOLUMENT NORMAL QUE RIEN NE VA !

- Tu as mis dans une class des plus importante "cadrage café" au lieu de "cadrecafé" comme dans le css (à ce propos, à éviter aussi l’accentuation, certains navigateurs ne digèrent pas ou mal)
- Des tr sont ouvertes sans avoir été refermées ou sans avoir refermer des td, etc...
- Deux div qui englobent tout l'index avec des tableaux mal fait dedans (pourquoi ne pas faire un tableau-parent pour tout l'index, avec son CSS au lieu du css des catégories? des raccourcis simplistes et très très instables)...

Bref, le codage demande de la rigueur, c'est un mécanisme d'horloge suisse et on ne fait pas du n'importe quoi.
Je pensais que ça tu l'avais compris et que tu avais vraiment corrigé ton template!
De plus je crains le css, car là aussi beaucoup d'erreurs vues auparavant, mais comme tu ne corriges pas au fur et à mesure, tout est borderline (pas bon en codage).

Je te dis d'y aller étape par étape sur les deux plan, html et css.
Ce que je fais, c'est que dans le template je suis sur le forum dans une fenêtre rapetissée et à côté dans l'éditeur de texte, j'ai le css, ainsi je peux suivre ensemble ma construction.
La seule chose que je laisse pour la fin, ce sont les effets (hover, shadow, etc).

Essaie de BIEN lire mes explications, je me donne vraiment de la peine de m'exprimer le plus clairement possible (et en français, qui n'est pas forcément ma 1ère langue).
kheino

kheino
Membre habitué

Féminin
Messages : 1667
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 17:31

Euh, j'ai viré mon cadrecaté. Et comme toi, j'ai deux fenêtres côte à côte pour retravailler
Code:
<table width="100%" 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>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>

Ca c'est mon  Catégorie
Du coup, je pause partie forum, je vais revoir mes catégories


Dernière édition par BiKinou le Sam 1 Aoû 2020 - 17:53, édité 1 fois
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par kheino le Sam 1 Aoû 2020 - 17:39

Ah méééheuuu ! tu remets exactement la même FAUTE que décrite plus haut :

Code:
<div class="Trait "></div>

Tu ne vois pas que les guillemets de droite ne sont pas collés ?
Je t'ai dit de proscrire les majuscules en nom de sélecteur comme ton Trais (et dis aussi, à corriger direct dans le css).
Non non non, je suis juste sidérée par ce que tu fais, même si tu y mets de la bonne foi, j'ai l'impression de perdre mon temps!

Je vais te laisser continuer, peut-être qu'à un moment tu reprendras tout ce que j'ai essayé de t'expliquer et que tu pourras enfin avancer.

(Il y a plein de sites pour apprendre à coder et je les fréquente sans arrêt aussi, faut arrêter de faire du n'importe quoi, ou alors demande un forum clés en main, parce que je suis certaine que c'est le cas pour tous les templates, vu que l'index_box est un des plus simples à manier).
kheino

kheino
Membre habitué

Féminin
Messages : 1667
Inscrit(e) le : 09/05/2010

Voir le profil de l'utilisateur http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 17:55

sorry, c'est l'automatisme ça, et j'ai corrigé.

Partie Catégorie : Revue et corrigée
Code:
<!-- BEGIN tablehead -->
<div class="cadrecat">
<div class="titrecat">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->

J'ai viré le "cat" pour le regrouper avec cadrecat et le span me servant à rien après vérification sur le forum

Code:
/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
background: #b8a27f url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat; 
border: #402203 2px solid;
border-radius: 15px; 
margin: 15px 14px 50px 16px;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
border-radius: 5px;
background: #0d5938 url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
box-shadow: #0d5938 2px 2px 1px;
margin: 10px 0px 20px 10px; 
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color: #402203;
text-shadow: #fefdb1 0 2px 2px;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter {
color: #c40606;
text-shadow: #c0a583 2px 2px 2px;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 19:16

Les catégories étant finies, je continue sur mon la forum
J'ai modifié ma structure que j'avais faite pour avoir ceci
table forum (englobant tout mes forums)
Table englobant  mon nom de forum, mes icônes et dernier message, sujets/messages

Code:
<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0">
<tr><div class="icone">
<td rowspan="2" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td></div>
<td align="left" valign="middle">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME} </a>
</span>
</td>
</tr>
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="trait"></div>
</table>
</div></td></tr>
</table>
<!-- END forumrow -->

Et j'ai toujours mon souci de la partie dernier message qui n'est pas alignée. J'ai retiré ma balise td car pour le moment, je n'arrive pas à mettre le nowrap, je connais son fonctionnement mais je n'ai jamais réussi à bien l'utiliser

Code:
/**FORUM**/
/*Fond forum*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: #0d5938 0px 0px 5px 2px;
padding: 10px;
margin: 15px 0px 20px 10px;  
}
/* Messages et sujets*/
.dermess {
padding: 10px;
text-transform: uppercase;
font: 12px papyrus;
text-align: center;
color:  #402203;
width: 230px;
height:55px;
}
.dermess a:hover {
color: #312516;
font: bold 15px papyrus;
text-align: center;
}
.forummess {
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
padding: 10px;
color: #312516;
width: 200px;
text-align: center;
font: 12px Papyrus;
}
.trait {
height: 2px;
background-color: #38263e;
width: 500px;
margin: 0 auto;
position: relative;
top: 5px;
}
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou a été remercié(e) par l'auteur de ce sujet.

Restructuration de l'index_Box Empty Re: Restructuration de l'index_Box

Message par BiKinou le Sam 1 Aoû 2020 - 20:51

@kheino a écrit:Bonjour BiKinou,
De plus, vois la dernière dic qui est mal éditée avec un espace du dernier guillement ", ainsi que, évite les majuscules dans les noms de sélecteur.
Depuis le début que tu as écrit ce post, je lis un espèce et je comprenais rien. T'inquiète, il y a beaucoup de mot que je ne capte pas correctement. Là, mon mari m'a dit lessivé et j'ai compris décidé du coup , je lui ai dit , tu veux que je décide quoi ? et quand j'ai vu sa tête, je lui ai demandé de répéter ce qu'il avait dit Laughing
BiKinou

BiKinou
**

Féminin
Messages : 51
Inscrit(e) le : 13/07/2020

Voir le profil de l'utilisateur https://bikinoutest.forumactif.com/
BiKinou 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