Milou
Ancien.ne du staff
- Date d'inscription : 12/10/2013
- Messages : 4207
Hola :3 Je viens proposer un petit schéma de catégorie. Vous trouverez toutes les informations sur l'image ;) Amusez-vous bien :P L'idée, c'est que la couleur du fond du bandeau sur lequel est écrit le nom du forum change en fonction des nouveaux messages (ex : bandeau bleu pour pas de news, vert pour un nouveau message et rouge pour un forum verrouillé)
_______________
Mar 13 Mar 2018 - 19:03
Batty
Ancien.ne du staff
- Date d'inscription : 05/06/2014
- Messages : 3514
Merci du partage j'ajoute ton schémas a la liste =)
Voici une liste de tuto qui pourrais vous aider :
Le positionnement
Template index_box (catégorie)
Voici une liste de tuto qui pourrais vous aider :
Le positionnement
Template index_box (catégorie)
_______________
Jeu 15 Mar 2018 - 17:03
Artemis
Admin & serial codeuse - 0% de méchanceté
- Date d'inscription : 14/01/2017
- Messages : 3571
Coucou !
Tout d'abord, très joli schéma. *-*
Voici mon résultat :
Le CSS :
Template index_box
- Le block bleu - qui change quand il y a un nouveau message - est bêtement une image, c'est une solution simple et efficace. c':
- J'ai mis des position:relative aux éléments présents dans le block bleu pour remplacer le z-index qui ne fonctionne pas sur codepen (je ne sais pas du tout si c'est juste par contre donc j'attends vivement vos avis... >///<), puisque l'image en position: absolute se mettait systématiquement au-dessus des autres éléments.
Voilà voilà ! J'espère que mon code n'est pas trop fouillis haha. c':
Tout d'abord, très joli schéma. *-*
Voici mon résultat :
Le CSS :
Template index_box
- Le block bleu - qui change quand il y a un nouveau message - est bêtement une image, c'est une solution simple et efficace. c':
- J'ai mis des position:relative aux éléments présents dans le block bleu pour remplacer le z-index qui ne fonctionne pas sur codepen (je ne sais pas du tout si c'est juste par contre donc j'attends vivement vos avis... >///<), puisque l'image en position: absolute se mettait systématiquement au-dessus des autres éléments.
Voilà voilà ! J'espère que mon code n'est pas trop fouillis haha. c':
_______________
Jeu 15 Mar 2018 - 18:56
Reine des Ténèbres
Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Coucou :3
Je vois que tu passes déjà aux templates, tu progresses rapidement, bravo.
Ton code me semble bon en général.
Je trouve que l'idée d'utiliser une image pour les stats des forums est bien pensée.
Pour le z-index, au fait ça n'a rien à voir avec Codepen. Cette plateforme te permet simplement d'avoir un aperçu objectif en temps réel de ton code. La propriété z-index est exclusive aux éléments dont le positionnement n'est pas statique. C'est à dire qu'elle doit toujours être utilisée en compagnie de la propriété "position". Un élément positionné en absolu sort complètement du flux et donc logiquement il passe en dessus des éléments non positionnés.
plus d'infos sur le z-index
Un petit conseil au sujet des préfixes vendeurs. D'abord, pour la propriété box-sizing, le prefixe webkit est toujours d'actualité, tu auras donc :
Ceci m'amène donc au petit conseil concernant l'ordre des propriétés, sache que par convention, la propriété est mise après les propriétés préfixées. Donc il sera plus conventionnel de mettre
En tout cas bravo
La prochaine fois que tu codes un templates (parce qu'on espère te revoir dans la section) pense à mettre l'aperçu du résultat sur un forum test plutôt qu'un screen.
A bientôt :3
Je vois que tu passes déjà aux templates, tu progresses rapidement, bravo.
Ton code me semble bon en général.
Je trouve que l'idée d'utiliser une image pour les stats des forums est bien pensée.
Pour le z-index, au fait ça n'a rien à voir avec Codepen. Cette plateforme te permet simplement d'avoir un aperçu objectif en temps réel de ton code. La propriété z-index est exclusive aux éléments dont le positionnement n'est pas statique. C'est à dire qu'elle doit toujours être utilisée en compagnie de la propriété "position". Un élément positionné en absolu sort complètement du flux et donc logiquement il passe en dessus des éléments non positionnés.
plus d'infos sur le z-index
Un petit conseil au sujet des préfixes vendeurs. D'abord, pour la propriété box-sizing, le prefixe webkit est toujours d'actualité, tu auras donc :
- Code:
-webkit-box-sizing: border-box;
box-sizing: border-box;
Ceci m'amène donc au petit conseil concernant l'ordre des propriétés, sache que par convention, la propriété est mise après les propriétés préfixées. Donc il sera plus conventionnel de mettre
- Code:
-o-object-fit: cover;
object-fit: cover;
En tout cas bravo
La prochaine fois que tu codes un templates (parce qu'on espère te revoir dans la section) pense à mettre l'aperçu du résultat sur un forum test plutôt qu'un screen.
A bientôt :3
_______________
Mer 28 Mar 2018 - 0:42
Artemis
Admin & serial codeuse - 0% de méchanceté
- Date d'inscription : 14/01/2017
- Messages : 3571
Coucou !
Merci pour tes conseils ! Je comprends mieux l'utilisation du z-index à présent
Je ne savais pas du tout qu'il fallait mettre les propriétés préfixées avant ses homologues, je m'en souviendrai pour les prochaines fois.
D'ailleurs le résultat est toujours visible sur mon petit forum test http://artemis-test.forumactif.com/ ; je me passerai des screens à l'avenir.
Merci d'avoir pris le temps de commenter mon code ! c:
Merci pour tes conseils ! Je comprends mieux l'utilisation du z-index à présent
Je ne savais pas du tout qu'il fallait mettre les propriétés préfixées avant ses homologues, je m'en souviendrai pour les prochaines fois.
D'ailleurs le résultat est toujours visible sur mon petit forum test http://artemis-test.forumactif.com/ ; je me passerai des screens à l'avenir.
Merci d'avoir pris le temps de commenter mon code ! c:
_______________
Sam 31 Mar 2018 - 10:03
Reine des Ténèbres
Ancien.ne du staff
- Date d'inscription : 15/08/2017
- Messages : 3183
Artemis
Admin & serial codeuse - 0% de méchanceté
- Date d'inscription : 14/01/2017
- Messages : 3571
Mar 3 Avr 2018 - 14:26
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum