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,

Page 2 sur 4 Précédent  1, 2, 3, 4  Suivant
Aller en bas
# Re: Classe N°8 | Pizi - le Jeu 7 Fév 2019 - 17:38
Coucou,

Alors voici le petit padding :



Concernant le positionnement, je sais que chaque balise div représente un bloc qui automatiquement se placent les uns sous les autres (au contraire des balises linéaires qui se placent les unes à côté des autres).
On peut modifier le positionnement en utilisant le float.
On peut également superpositionner les div les unes sur les autres en jouant avec le positionnement (absolu pour les blocs fixes et relative pour les blocs à supperpositionner) et le z-index (le 1 étant la coche inférieure et le 3 et plus étant les couches supérieures).
Ce que je ne savais pas en revanche, mais que j'ai pu expérimenter avec l'exercice c'est qu'il ne faut pas créer ses div dans n'importe quel sens. Par exemple initialement j'avais codé la div du surlignage du texte "Pizi the vampire" avant de coder le texte. En galérant du coup pour le positionnement, je me suis rendue compte qu'il était beaucoup plus facile de faire en premier la div pour le texte et ensuite le surlignage.

Avec la fatigue du boulot je me perds un peu dans les explications, j'espère en tout cas faire preuve d'un minimum de clarté dans tout ce bordel Classe N°8 | Pizi - Page 2 514879035
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Jeu 7 Fév 2019 - 18:23
hm, je ne suis pas sûre d'avoir détecter le padding dans ton code. Le titre "Pizi the vampire" est toujours collé au bord à gauche.

J'ai aussi remarqué qu'il y a deux div qui entourent la partie du gros texte. Pourquoi deux div alors qu'une seule peut très bien faire le travail ?

Concernant le positionnement, ce que tu as dit au début est bien sauf pour cette partie

@Pizi a écrit:On peut également superpositionner les div les unes sur les autres en jouant avec le positionnement (absolu pour les blocs fixes et relative pour les blocs à supperpositionner) et le z-index (le 1 étant la coche inférieure et le 3 et plus étant les couches supérieures).

Je comprends enfin la logique par laquelle tu places des positionnement absolus un peu partout.
Je te fais confiance pour ajouter le padding au bon endroit et enlever une des deux div du texte et je passe sans attendre au début de notre petit cours.

Voici le sommaire de ce qu'on va voir dans ce chapitre :

Le positionnement

- Le flux
- Position (relative, absolu et fixe)
- z-index
- Le float / clear
- Display


Donc commençons par ce qui est le plus simple.
__________


Il est important de rappeler qu'on ne sort un élément du flux que quand c'est nécessaire.
Donc par exemple notre fiche rp sera mise dans un message du forum, elle prendra toute la ligne normalement donc son bloc parent pizibox est dans le flux, il n'a pas besoin d'être positionné.

Est-ce que c'est clair pour l'instant ? Si tu as des questions n'hésitent pas :3
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 12:07
Coucou,

Alors en fait, c'est normal que le padding tu ne le vois pas dans le titre, tout simplement parce que je ne l'ai pas fait Happyness En fait, j'avais mal compris, je l'ai mis dans le texte au lieu des margin Classe N°8 | Pizi - Page 2 514879035 mais je ne pense pas que c'était faux de le faire de toute façon, tu me l'aurais demandé Dance 2

Du coup j'ai corrigé :



Concernant le flux, non pour le moment c'est clair, c'est ce que l'on a vu un peu plus haut donc ça va Lovely
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 14:51
OK là c'est parfait ! A ce stade on ne va rien changer.

On va voir maintenant la propriété position en détails.



Bon tout ça peut sembler difficile à comprendre avec des mots donc voici un exemple :



Remarque que quand j'ai déplacé le bloc bleu en relatif, le bloc qui le suit n'a pas bougé.

Est-ce que tu as des questions ?
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 16:17
Non aucune, c'est tout clair ! Coeur 2
Donc au lieu d'avoir fait mes margin négatives, j'aurais très bien pu obtenir le même résultat avec le bottom en fait Classe N°8 | Pizi - Page 2 514879035
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 18:11
De quelle marge négative tu parles ?

Attention les propriétés de déplacement avec positionnement relatif ne donne pas exactement le même effet qu'une marge.

En déplaçant un élément à qui on a attribué un positionnement relatif, on fait en sorte de le décaler de sa position initiale sans affecter les autres éléments. Donc si tu regardes l'exemple au dessus, on a décalé le bloc 2 de 20px vers le bas et de 100px vers la gauche. Les bloc 1 et 3 n'ont pas bougé.
Résultat > Mon bloc bleu s'est retrouvé superposé au bloc 3.

Une marge (margin) n'est pas un outil de positionnement. Par définition, les marges servent à faire en sorte que mon bloc ne touche pas les blocs voisins.
Quand tu appliques une marge à un élément, ça va s'ajouter/se retirer et éloigner/rapprocher les autres éléments selon si c'est une marge positive ou négative.

Voici un exemple pour illustrer la différence :
Margin vs Relative

Remarque que la marge agrandit la taille du bloc total et va pousser l'élément 3 en bas. Si tu changes 50px par -50px tu verras que ça va réduire la taille totale et l'élément 3 va bouger vers le haut.
Avec le positionnement relatif seul le bloc positionné se déplace.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 18:24
Ah oui d'accord, je vois la différence ^^
Ton exemple est super pour comprendre, merci beaucoup d'y avoir mis du temps Coeur 2
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 18:51
Bien, on enchaîne alors avec le positionnement absolu.


Remarque que dans mon HTML le texte est avant l'image, mais une fois le titre en absolu (je te laisse supprimer les /* pour voir l'effet) l'image vient combler sa position initiale et le titre se met absolument en haut et gauche. Après avec top/left on le positionne là où on veut.

On utilise le positionnement absolu également pour les éléments qui apparaissent au hover comme les informations du profil derrière l'avatar. Ici on ne veut pas que notre avatar et les informations derrières se placent bêtement en haut du navigateur, alors on utilise position: relative sur le conteneur pour le définir comme référence.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 19:19
Ah d'accord, je pensais que l'absolute était un fixateur.
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Ven 8 Fév 2019 - 20:59
Absolute ne fixe pas l'élément, c'est plutôt le travail de la valeur fixed.

Donc, voyons la dernière valeur possible pour la propriété position :



Si on passe un header de fond en position : fixed au lieu d'absolute, le header deviendra fixe et en défilant le forum va passer au dessus ou en dessous du header. Dans le premier cas, ce dernier deviendra comme une sorte de background. Voici un exemple : Fixed
Dans l'exemple tu peux changer fixed par absolute pour voir la différence.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Sam 9 Fév 2019 - 0:22
Ah oui d'accord.
En absolute, ça devient blanc en bas quand on déroule.
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Sam 9 Fév 2019 - 12:24
Oui c'est blanc parce que le bloc est plus grand que l'image (en hauteur).

Faisons un petit exo. Je peux voir ton forum test ?
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Lun 11 Fév 2019 - 15:46
Coucou,

Oui bien sûr : Pizi Test

*se demande à quelle sauce elle va être mangée Panique *
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Mar 12 Fév 2019 - 1:56
sauce bolognaise ?

Tu as oublié des guillemets dans ton lien et ton message a disparu x)

Alors, je vois que tu as déjà une div au tour de la barre de navigation. Y a même deux div, pourquoi deux ?
Pas très visible ta barre de navigation d'ailleurs.
On va refaire la navigation. Donc déjà on ne va garder d'une seule div sauf si tu as une raison particulière pour avoir les deux.
Supprime tout le CSS de #navig et #navigation
(on garde celui des liens #navig a parce que ça n'a rien avoir avec le positionnement, attention juste à mettre le nom d'id selon la div que tu gardes).
Assure-toi que ton .bodylinewidth, classe qui correspond au bloc de la largeur du forum, n'ait pas de marges verticales et soit centré.

Alors, l'exercice est de positionner avec le CSS la barre de navigation en haut (avec position), de façon à ce que la barre reste sur l'écran même si je scrolle un peu comme la barre d'Epicode.

Spoiler:
Classe N°8 | Pizi - Page 2 Captur13
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Sam 16 Fév 2019 - 18:42
Plutôt carbonara ?

Alors pour les div oui il y avait de base une raison c'est que sur le tuto que j'ai pris, ils distinguent en CSS entre navigation et navig.
Je laisse ainsi du coup ou on en garde seulement un ? Si oui, quel nom on lui donne ?

Pour le CSS j'ai tout retiré du coup.

Voici le bodylinewith:


Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Sam 16 Fév 2019 - 19:11
Coucou,

Alors justement, il n'y a aucun raison apparente pour distinguer navig et navigation. On garde une seule div le nom importe peu. Tu peux même le changer si tu veux, l'essentiel est de bien retenir le nom que tu as mis comme ça tu ne te trompes pas dans le CSS. D'ailleurs tu peux même changer l'id par class si tu préfères.

Dans ton CSS tu as la mise en forme des liens par :
Code:
#navig a {...}
Donc si tu changes le nom de la div, il faut changer ici aussi. Si tu ne veux pas changer garde simplement la div avec l'id navig.

Pour la largeur du forum, on va enlever les marges négatives parce que ça cache le test, on ne voit presque plus la barre de navigation. Et on va centrer notre forum avec auto. On aura donc :

Code:
.bodylinewidth {
 width: 950px;
 margin: 0 auto;
}
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Lun 25 Fév 2019 - 11:21
Hello,

Pardon pour mon absence ^^
Alors j'ai gardé seulement "navig" (ce sera plus simple eheheheheh).

J'ai également modifié le bodylinewidth :)
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Mar 26 Fév 2019 - 10:42
Coucou :3
Pas de soucis pour l'absence, n'oublie pas de prévenir si tu prévois une absence de plus d'une semaine.

Alors c'est parfait pour la réinitialisation du code. On a restauré les paramètres d'origine de la barre (ou presque).
Je mets un rappel de l'exo :

Reine a écrit:Alors, l'exercice est de positionner avec le CSS la barre de navigation en haut (avec position), de façon à ce que la barre reste sur l'écran même si je scrolle un peu comme la barre d'Epicode.

Spoiler:
Classe N°8 | Pizi - Page 2 Captur13

Alors pour mettre la barre en haut et faire en sorte qu'elle reste fixe sur l'écran même au scroll, quel est le type de positionnement qu'on doit utiliser à ton avis ?
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Mar 26 Fév 2019 - 16:37
Coucou,

J'ai mis la barre de navigation en position fixed comme ceci :



Par contre je n'ai pas su le mettre dans une police en majuscule comme tu l'as fait (ce que je trouve plus joli d'ailleurs), j'ai donc agrandi un peu le texte.
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Mar 26 Fév 2019 - 22:26
Pour changer l'écriture en majuscules/minuscules on utilise la propriété text-transform.

text-transform a trois valeurs distinctes

lowercase : (minuscule) est la valeur par défaut, qui va évidemment mettre le texte en minuscule.
uppercase : (majuscule) va transformer tout le texte en majuscules.
capitalize : (première lettre en majuscule) va transformer la première lettre le chaque mot en majuscule.

Nous avons également une autre propriété qui met en majuscules mais différemment, cette propriété est appelée font-variant.
font-variant a quand à elle deux valeurs :
normal : affiche le texte comme il a été écrit en HTML, normalement et sans transformation.
small-caps : va tout mettre en majuscule mais les lettres qui étaient initialement en majuscules dans le HTML seront de plus grand taille.

exemple pour voir la différence

Retournons maintenant à notre exercice.
Le bon positionnement est en effet fixed, bravo.

Par contre le texte n'est pas bien centré, ici on a deux façons de faire selon le design.
- Soit on va mettre le bleu de l'arrière-plan sur toute la largeur (exemple l'image que j'ai mis dans l'exo). Dans ce cas on aura besoin du width: 100% pour que la barre s'adapte à la largeur de l'écran. alors ce qu'il faut centrer ce n'est plus tout le bloc vu qu'il prend toute la largeur mais son contenu qui est du texte (les liens), pour ce faire on va simplement ajouter un text-align: center à notre bloc; vu que son contenu (les liens) sont des éléments inline.
- Soit on va mettre le fond uniquement au centre (exemple ce que tu as fait). Là la largeur est fixée à 950px. En cas normal, c'est à dire si le bloc était dans le flux, on l'aurait centré avec margin : auto. Le problème ici est que le bloc n'est plus dans le flux, vu qu'il est positionné avec fixed.
On sait qu'un bloc positionné avec fixed ou absolute peut être déplacé horizontalement avec left ou right.
Le souci encore une fois est que si tu décales ton bloc avec par exemple (left: 400px), tu peux le centrer par rapport à ton écran mais sur un écran de différente taille 400px ne va pas donner exactement le centre. J'espère que jusque là tu suis.
Pour être 100% sûre que la valeur que je vais mettre est le centre de l'écran quelque soit sa taille, je vais décaler mon bloc d'abord de 50% ce qui va placer le bord gauche de mon bloc au centre de l'écran.
Ensuite on va recaler ce bord d'exactement la moitié de la largeur totale du bloc vers la gauche avec margin-left. Donc pour une largeur de 950px, on aura margin-left: -475px;
C'est un des cas d'utilisation des marges négatives (oui si elles existent c'est bien pour une raison :p).

Je ne sais pas du tout si c'est bien expliqué, sinon n'hésite pas à me poser des questions si tu en as :3
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Mer 27 Fév 2019 - 9:09
Coucou,

Comme ceci ?


Finalement j'ai opté pour ta solution qui était plus jolie Classe N°8 | Pizi - Page 2 3775839356
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Mer 27 Fév 2019 - 12:04
C'est parfait :3
Peu importe la solution pour laquelle tu optes, l'essentiel pour moi est que tu comprends les deux cas :3

Alors, il me semble qu'on a pas parlé du z-index.



Exemple | z-index
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Mer 27 Fév 2019 - 14:00
Coucou,

Ah oui d'accord, il faut d'abord le positionner puis éventuellement superpositionner. Je comprends mieux la logique. Classe N°8 | Pizi - Page 2 1066248963



Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
# Re: Classe N°8 | Pizi - le Mer 27 Fév 2019 - 23:44
Super.
Reprenons notre exercice de Pizi la vampire :p
Veux-tu essayer de corriger les petits soucis de positionnement ?
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: Classe N°8 | Pizi - le Jeu 28 Fév 2019 - 10:34
Coucou,

J'ai essayé de corriger les positions :



Qu'est-ce que tu en penses ?
Pizi
Conseiller.e
Date d'inscription : 06/07/2018
Messages : 121


Classe N°8 | Pizi - Page 2 Nsrw

Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Contenu sponsorisé
Revenir en haut
Page 2 sur 4 Précédent  1, 2, 3, 4  Suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum