epicode
Epicode, c'est sept ans d'entraide dans la création de forums. Vous y trouverez une gamme complète de libre-service, allant du simple avatar jusqu'à l'index codé intégralement. Venez fouiller pour trouver votre bonheur ! Si jamais vous n'y parvenez pas, vous pourrez toujours commander ! Nos graphistes et codeurs sont là pour vous, pour répondre à vos demandes et vous aider dans la conception de vos forums.

Epicode, c'est une offre complète allant jusqu'au conseil sur forum. Envie d'avis sur votre contexte, d'une relecture ? Nos conseillers se feront une joie de vous aider dans ces tâches difficiles, vous permettant d'avoir un forum parfait jusqu'à la virgule près.

Pour finir, Epicode c'est aussi des animations, des jeux, des concours, des défis, avec des animateurs haut en couleurs prêt à vous embarquer dans de folles aventures. Mais surtout, Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif ! Rejoignez-nous !
entre donc,

Aller en bas
Ancien.ne du staff
Reine des Ténèbres
Bonjour,

Voici donc une maquette catégorie pour ceux qui voudraient s'entraîner.

exo

Tutoriel à voir :

Template index_box

Images utilisées :

Spoiler:
[Intermédiaire] #5 Catégories | Reine' Avatar11
[Intermédiaire] #5 Catégories | Reine' Brush10
[Intermédiaire] #5 Catégories | Reine' Bubles10
[Intermédiaire] #5 Catégories | Reine' Descri10
[Intermédiaire] #5 Catégories | Reine' No10
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Invité
Chalut <3
j'ai fais une tentative et voici ce que cela donne **
https://i.servimg.com/u/f62/18/92/57/02/screen11.png

( j'ai retiré l'adresse du forum car je vais m'exercer sur une page d'acceuil made in shota :) )
voili voili **
Anonymous
Invité
Ancien.ne du staff
Reine des Ténèbres
Coucou :3

Bravo, le résultat est très joli :3

N'hésite pas à mettre ton code en hide si tu veux qu'on le corrige :3
En tout cas visuellement c'est parfait, chapeau !
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Invité
chalut <3
Code mis à jour avec plus de clarté
adresse du forum


Template


et le css



et dans les sections des catégories j'ai placé le code de la transition pour poster différentes images **



voilà voili **
merci d'avance pour la correction :)
Anonymous
Invité
Ancien.ne du staff
Reine des Ténèbres
Coucou :3

Alors on va commencer par le HTML.
Quand on code un template on sépare forcément le CSS du HTML. Tu as utilisé des class ce qui est très bien mais je vois l'attribut style se balader ici et là, pourtant il ne devrait pas. Il vaut mieux mettre tout le CSS dans la feuille de style, c'est plus propre et ça facilite la gestion du CSS si jamais on voudrait modifier des choses.

Code:
<div class="grandtitre"><img src="https://www.zupimages.net/up/18/22/k8ct.png" style="float:left;">{catrow.tablehead.L_FORUM}</div>

Donc là comme je l'ai dit on va enlever le style et on va mettre le float dans le CSS.
Il suffit de choisir le bon sélecteur. Ici c'est l'image qui est à l'intérieur de la div dont le nom de class est grandtitre. On aura donc

Code:
.grandtitre img {
float: left;
}

D'autre part, ce que tu as fait n'est pas faux mais une image décorative ne donne aucun sens au code donc autant l'introduire grâce au CSS avec la propriété background ou content.

Code:
<div class="postmess"><br> {catrow.forumrow.TOPICS}
 <hr style="width:100px;"> sujets <br><br> <br> {catrow.forumrow.POSTS}

 <hr style="width:100px;"> Messages </div>
Dans cette partie on a une sur utilisation des br.
Déjà tu as mis un br au tout début alors qu'un padding-top aurait permis de générer cet espace là.
Tu aurais pu simplement mettre la partie sujets et la partie messages chacune dans un bloc et là encore tu peux mettre de l'espace entre les deux avec margin et padding.
Pour la ligne tu peux faire ça avec une bordure mais bon c'est pas faux non plus, il suffit de retirer le style et mettre le width dans le CSS avec le bon sélecteur (.postmess hr)

Code:
<div class="mess">
 <div style="padding-top:50px !important;"> {catrow.forumrow.LAST_POST}</div>

 </div>
Ici une seule div suffit, tu peux mettre le padding directement à la div .mess, dans la feuille du style bien sûr et je me demande pourquoi tu as mis "important" à mon avis ça ne sert à rien de forcer le padding, ton sélecteur est assez puissant.

Pour rester dans la partie HTML, passe à la description. Donc tu peux éviter de charger la description des forums avec tout ce code. Imagine que tu veux partager ton code en LS ou que tu as d'autres admins sur ton forum qui ne connaissent rien au codage. Une mauvaise manip en écrivant la description et tout est chamboulé.
Dans le template on a donc cette variable qui gère la description :
Code:
{catrow.forumrow.FORUM_DESC}
On va la mettre dans une div
Code:
<div class="description">{catrow.forumrow.FORUM_DESC}</div>
Dans le CSS tu auras .description pour mettre en forme ton texte comme tu veux mais il faut surtout mettre la hauteur et la largeur et mettre le bloc en "position: relative"
Ce qu'on va faire alors c'est mettre l'image en absolu et la faire disparaître au hover

Code:
.description img {
  position: absolute;
}

.description:hover img {
  display: none;
}

Après tu peux ajouter la transition et l'effet que tu veux dans ces mêmes sélecteurs.
Dans les descriptions des forums, tu va rien mettre à part le texte et l'image.
Pour en savoir plus sur le positionnement

Alors pour le CSS.

Comme je t'ai dit on peut placer l'image décorative via le CSS de cette façon :
Code:
.grandtitre {
    background-color: #fff;
    background-image: url('https://www.zupimages.net/up/18/22/k8ct.png');
    background-repeat: no-repeat;
}

sinon ici tu as mis background sans valeur, donc autant l'enlever
Code:
.postmess {
    background: #;
}

Pour .logonc comme j'ai dit il vaut mieux de gérer ça avec le positionnement. Sinon dans ton code telquel, le float ne sert pas à grand chose il me semble.

Tu n'as aucun CSS lié à la class .avatarus donc autant l'enlever du template.

Voilà voilà, je crois que je n'ai rien oublié. En espérant que mes corrections te soient utiles pour avancer :3
Et en tout cas bravo, tu as réussi un schéma relativement difficile et tu peux même utiliser le flex-box c'est super !
Au plaisir de te revoir dans cette section [Intermédiaire] #5 Catégories | Reine' 1066248963
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Invité
Reuh **
Déjà je te remercie d'avoir pris le temps de me détailler et de m'expliquer la correction **
Grâce à toi j'ai beaucoup appris et notamment sur la description :)

voici le code que j'ai utilisé
dans le template j'ai fais comme Tu m'as appris :)

Code:
<div class="description">{catrow.forumrow.FORUM_DESC}</div>

et j'ai retravaillé mon css en utilisant qu'une seule class



Merciiiiiiiiii beaucoup [Intermédiaire] #5 Catégories | Reine' 1840524174

Anonymous
Invité
Ancien.ne du staff
Reine des Ténèbres
Coucou :3

Alors c'est bien tout ça bravo :3

Dans description le z-index est inutile. z-index est au fait une propriété qui gère le niveau de chaque élément quand on a plusieurs éléments superposés. Là ton bloc est tout seul donc pas besoin de z-index.

Pour l'image tu n'as pas besoin du display: block; la balise img accepte les propriétés width et height même si elle est de type inline.

Et essaie d'éviter la mention !important. Elle est très difficile à outrepasser, on ne l'utilise quand dans des cas extrêmes.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Invité
merciiiiiiii o/
j'ai corrigé et je note tout ça dans ma tête **
Anonymous
Invité
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum