[Intermédiaire] Exercice 7 - Catégories bleues

Milou
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3704
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
Maxi-graphiste
Maxi-graphiste
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é)
[Intermédiaire] Exercice 7 - Catégories bleues Y3zf


[Intermédiaire] Exercice 7 - Catégories bleues 7epl
Batty
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3514
Voir le profil de l'utilisateur
Ex-admin gangsta du Québec
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)
Artemis
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 2020
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
Designer
Designer
Coucou !
Tout d'abord, très joli schéma. *-*

Voici mon résultat :
[Intermédiaire] Exercice 7 - Catégories bleues Eo76

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


[Intermédiaire] Exercice 7 - Catégories bleues Nng7
Spoiler:
[Intermédiaire] Exercice 7 - Catégories bleues 51Nr7
Merci Sygea ! **Merci Shigurai !
[Intermédiaire] Exercice 7 - Catégories bleues J3lo
[Intermédiaire] Exercice 7 - Catégories bleues Dn89
[Intermédiaire] Exercice 7 - Catégories bleues Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Intermédiaire] Exercice 7 - Catégories bleues Ly4jFos
Merci xMia et Alek !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues Essai_Cadeau
[Intermédiaire] Exercice 7 - Catégories bleues Qz09
Merci Funeral !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues 1no3
Merci Naütilus. ! :'D
[Intermédiaire] Exercice 7 - Catégories bleues Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Intermédiaire] Exercice 7 - Catégories bleues 18041502233812811115668294
Merci Eskimo. !  Coeur

[Intermédiaire] Exercice 7 - Catégories bleues 447717kdoartemis
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3165
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
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 :
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;
Ceci n'a pas d'impact sur le résultat du code mais ça l'aura pour des propriétés plus complexes qui présentent des différences entre l'affichage de la propriété et de son nom préfixé selon les différents navigateurs.
En tout cas bravo [Intermédiaire] Exercice 7 - Catégories bleues 3775839356

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




Spoiler:

Codée par Sun d'amour  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
Artemis
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 2020
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
Designer
Designer
Coucou !
Merci pour tes conseils ! Je comprends mieux l'utilisation du z-index à présent Super héro
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. plz
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. Coeur 2

Merci d'avoir pris le temps de commenter mon code ! c:


[Intermédiaire] Exercice 7 - Catégories bleues Nng7
Spoiler:
[Intermédiaire] Exercice 7 - Catégories bleues 51Nr7
Merci Sygea ! **Merci Shigurai !
[Intermédiaire] Exercice 7 - Catégories bleues J3lo
[Intermédiaire] Exercice 7 - Catégories bleues Dn89
[Intermédiaire] Exercice 7 - Catégories bleues Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Intermédiaire] Exercice 7 - Catégories bleues Ly4jFos
Merci xMia et Alek !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues Essai_Cadeau
[Intermédiaire] Exercice 7 - Catégories bleues Qz09
Merci Funeral !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues 1no3
Merci Naütilus. ! :'D
[Intermédiaire] Exercice 7 - Catégories bleues Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Intermédiaire] Exercice 7 - Catégories bleues 18041502233812811115668294
Merci Eskimo. !  Coeur

[Intermédiaire] Exercice 7 - Catégories bleues 447717kdoartemis
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3165
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
C'est un plaisir @Artemis
Au fait j'ai oublié de le mentionner mais il vaut mieux mettre le script directement après la partie concerné par celui-ci.




Spoiler:

Codée par Sun d'amour  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
Artemis
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 2020
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
Designer
Designer
Coucou ! C'est noté, merci pour la précision. *-*


[Intermédiaire] Exercice 7 - Catégories bleues Nng7
Spoiler:
[Intermédiaire] Exercice 7 - Catégories bleues 51Nr7
Merci Sygea ! **Merci Shigurai !
[Intermédiaire] Exercice 7 - Catégories bleues J3lo
[Intermédiaire] Exercice 7 - Catégories bleues Dn89
[Intermédiaire] Exercice 7 - Catégories bleues Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[Intermédiaire] Exercice 7 - Catégories bleues Ly4jFos
Merci xMia et Alek !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues Essai_Cadeau
[Intermédiaire] Exercice 7 - Catégories bleues Qz09
Merci Funeral !  [Intermédiaire] Exercice 7 - Catégories bleues 3775839356
[Intermédiaire] Exercice 7 - Catégories bleues 1no3
Merci Naütilus. ! :'D
[Intermédiaire] Exercice 7 - Catégories bleues Signaa10
Merci Reine des Ténèbres !  Coeur 2
[Intermédiaire] Exercice 7 - Catégories bleues 18041502233812811115668294
Merci Eskimo. !  Coeur

[Intermédiaire] Exercice 7 - Catégories bleues 447717kdoartemis
Contenu sponsorisé
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum