AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Mission #6 - Explique moi... les positions!

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 9 Oct 2014 - 15:04

    Mission #6 - Explique moi... les positions!



    Bonjour à tous! Il est temps pour nous de débuter une nouvelle mission! Petit changement cette fois-ci, car il n'y a pas de code à écrire à proprement parler! En effet, cette mission consiste à expliquer, avec vos propres mots une fonction très utilisée en CSS: le position!
    Aucune contrainte donc dans cette mission: expliquez du mieux que vous le pouvez comment utiliser les position!

    Quelques pistes


    Si vous ne savez pas où commencer, voici quelques pistes! Vous devez bien sûr parler des différents TYPES de position (fixed, absolute et relative), mais vous pouvez aussi parler de top, bottom, left et right, et comment ils affectent votre objet. Vous pouvez aussi penser aux relations entre les différentes sortes de position (relative et absolute). Et si vous avez la foi, vous pouvez bien-sûr parler du z-index! Wink

    Bonne chance! =D

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !



    Sivmatt
    Sivmatt
    MasculinAge : 32Messages : 24

    Ven 10 Oct 2014 - 17:39

    Bonjour .
    euh ...
    et ben ...

    position : fixed déjà , bah c'est quand l'élément ( en général une image ) ne bouge pas
    par exemple si on scroll la page ( on descend ) l'image bouge pas
    donc si je met un trèèèèès grand texte et une image en fond quand on continuera a lire le texte l'image le bougera pas avec l'écran
    ( ça peut être perturbant , rendre un effet , etc , à vous de voir ce que vous voulez en faire )

    position : absolute , j'ai un peu du mal a l'expliquer , mais c'est par rapport à l'ensemble de la zone de texte qu'est placé votre élément .
    du coup , si on dit qu'on le veut décaler de 20 pixels à droite , et bah il sera décalé depuis le fin fond de la droite de la page

    contrairement au position : relative qui lui décalera de 20 pixels mais par rapport à là ou il aurait du être d'après là ou vous l'avez écrit .

    ensuite , position : top ...
    supposons que j'ai une image plus grande que le cadre dans laquelle j'aimerais la mettre et que je ne peux absolument pas changer ce cadre .
    et bien position : top placera l'image à partir du haut de l'image ( et donc tronquera le bas )
    de manière équivoque , position : bottom tronquera le haut en le plaçant par le bas et il en est de même pour left et right .
    position : center permet de moins tronquer mais de tronquer des deux cotés
    ainsi , une image avec position : top center ; sera affichée par son haut avec le bas tronqué et les cotés un peu tronqué .
    il vous faut choisir ceci par rapport à ce que vous voulez montrer de votre image .

    ( tout ceci n'est bien sûr valable que si vous n'avez pas envie de redimensionner votre image avec un quelconque logiciel , etc )
    j'espère avoir été explicite , désolé si j'ai oublié certains aspects de cet attribut :)

    Edit : j'avais oublié le z-index
    il s'agit d'un numéro qui indique la priorité du plan de l'element , c'est à dire que deux éléments avec z-index : 0 et l'autre 1 seront superposés mais le seront dans l'ordre croisant ( l'indice le plus grand en premier plan )
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 12 Oct 2014 - 12:21

    Coucou Sivmatt! ^^ Merci de ta participation! =D
    Je me permets juste de "corriger" quelques uns de tes dires, mais ne le prend pas mal, c'est surtout pour que tu apprennes de tes erreurs! ^^

    Le position: fixed n'est pas seulement pour une image. Tu as bien compris son utilisation, mais je voudrais surtout que tu ne penses pas que c'est réservé aux fonds ou aux images! ^^ N'importe quel élément peut être fixed! ^^

    Pour le position: absolute, ce n'est pas par rapport à l'ensemble de la zone de texte, mais par rapport à l'élément en position: relative le plus proche, ce qui par défaut est l'écran. Il faut faire attention à 4a, car si tu as effectivement un position absolute au sein d'une zone de texte, mais que cette dernière n'est pas en position: relative, ce n'est pas par rapport à elle que ton position: absolute va se placer! ^^

    Tu as cependant très bien exprimé comment marchaient ces trois choses, mis à part ces pettes confusions! ^^

    Quant au top, bottom, left et right, ne s'écrivent pas position: top; position: bottom; position: left; et position: right;, mais top: XX; bottom: XX; left: XX, et right: XX; le XX pouvant être une distance en px, em ou encore %. Par exemple: top: 40px;
    Il semblerait aussi que tu te sois trompé entre le background-position et le top, bottom, left et right, puisque ces derniers te permettent de placer l'élément en fonction de ce que tu as utilisé dans le position: ...; mais comme tu l'as exprimé, en fonction du haut, du bas, etc. Je pense que d'autres participants à la missions l'expliqueront très bien par la suite! ^^
    Du coup, il n'y a pas de position: center, vu que c'est utilisé dans background-position, plutôt! ^^

    Et je n'ai rien à redire par rapport à ton explication du z-index! ^^

    Merci encore de ta participation! :hug:



    Sivmatt
    Sivmatt
    MasculinAge : 32Messages : 24

    Dim 12 Oct 2014 - 22:06

    ah oui , j'ai confondu avec background-position en effet x)
    pour position : fixed , je sais que ce n'est pas uniquement pour les images , j'ai d’ailleurs dit " l'élément ( en général une image ) "

    et bien de rien , ça m'a fait plaisir ^^
    pis ça me fait pas de mal un rappel , je commençait à rouiller xD








    Dépêche toi de mourir:

    Ton sang m'apaise :


    Press
    Carnet
    Multi-compte
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Mer 22 Oct 2014 - 10:43

    Bonjour !
    Euh... Je vais essayer d'expliquer selon mes propores mots, je ne pense pas être très claire, c'est déjà si vague dans ma tête :s

    I/ L'application en CSS

    Alors, il y a plusieurs balises CSS qui permettent de déterminer la position d'un objet, d'un texte, d'un bloc etcetera...

    Pour pouvoir les placer, il faut connaître le nom anglais de la droite, gauche, haut, bas, qui sont respectivement en anglais : right, left, top, bottom. On peut également fixer cette position avec le CSS
    Code:
     position: fixed

    Il existe ensuite deux styles de position : la position absolue et la position relative.

    1) La position absolue

    Son code CSS est
    Code:
     {position: absolute}
    . Elle s'applique par rapport au coin supérieur gauche de la fenêtre. (top=0 left=0)

    Pour les balises top et left il y a trois options :
    -L'auto, qui applique la valeur par défaut
    -Les pixels, qui règlent manuellement avec un pourcentage en pixels (px)
    -Le pourcentage, qui règlent manuellement avec un pourcentage (%)

    Pour appliquer une position absolue à un texte vous pouvez utiliser les balises SPAN ou DIV.

    2) La position relative

    Son code CSS est
    Code:
     {position: relative}
    . Elle s'applique par rapport à d'autres éléments de la page, par exemple un codage Html.
    Cette propriété est valable pour tous les types de balises.

    II / Les attributs de ces positions

    Il existe plusieurs attrbuts à ajouter à ces positions de bases, comme :
    -Visibility : Il détermine si l'élément est visible ou pas.On peut choisir entre •Visible et Hidden.
    -Z-index : Il va définir l'empilement des objets des feuilles de style CSS, si l'un est par dessus l'autre (superposition).


    Je crois que c'est tout pour mon charabia. ^^
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 22 Oct 2014 - 12:01

    J'adore les positions :toto:

    N'alors en résumé ce que j'ai compris des positions c'est que :

    - la position relative : c'est la position la plus classique des éléments. Chaque élément se placera en fonction de ceux qui le précèdent et le contiennent. On peut facilement centrer un élément avec cette position, dans la mesure où on a indiqué sa dimension, en utilisant le "margin: auto".

    - la position absolute : c'est une position plus complexe en apparence mais dont je me sers beaucoup pour placer mes éléments sans problème d'interférence entre eux puisque un élément en absolute n'impose rien aux élément qui le suivent. Par contre, il respecte ceux qui le précède. Un bloc relatif de 200px de haut suivit d'un bloc absolute aura sa place et celui en absolute sera en dessous. Par contre, si un autre bloc relative ou absolute se trouve APRES, il se placera sans tenir compte de l'élément mit en absolute avant lui, et sera donc par dessus.
    On peut utiliser les "top : 0 / left: 0" sur un bloc en absolute mais ce "top" et ce "left" ne correspondent pas forcément aux extrémités de la page, ni même au bloc contenant immédiat. En fait, j'ai pas encore saisi exactement sur quel contenant il s'aligne :hum: Je crois qu'il va tenir compte du contenant ayant une position "relative" indiquée, donc ça peut être le contenant immédiat ou deux ou trois blocs au dessus, voire plus, tout dépend.
    On ne peut pas utiliser la valeur "auto" pour centrer un bloc en absolute, on est obligé d'utiliser une autre méthode pour le centrer à tout les coups pour les écrans (que j'ai expliquée dans un tuto de page d'accueil html), il faut faire un left: 50% puis un margin-left négatif équivalent à la moitié de la largeur totale de l'élément.

    - la position fixed : elle possède les mêmes propriétés que l'absolute, c'est à dire que les éléments suivants ne tiennent plus compte d'un élément fixed, mais en plus cet élément ne tient pas compte non plus des éléments avant lui. En gros un élément placé en fixed est seul dans sa bulle x). Il se place par rapport à l'écran et non par rapport à des blocs de page internes. De ce fait, il ne bouge pas, puisque seule compte pour lui la fenêtre totale de notre écran.
    Tout comme l'absolute, on peut lui indiquer les valeurs top / left / bottom / right, et il est d'ailleurs préférable de toujours placer cet élément fixed avec une valeur comme ça pour ensuite le décaler, ainsi on est sûr qu'il est au même endroit pour tout le monde, peu importe la taille d'écran. D'ailleurs, ça complique aussi son positionnement, puisque une marge en pixel ne le placera pas forcément au même endroit pour tout les visiteurs. C'est pourquoi il faut toujours se baser sur un placement commun à tous, un repère, comme le bord (donc valeur 0) ou le milieu (donc valeur 50%).

    Il est important de noter aussi que seul un élément ayant une position indiquée peut avoir une propriété de "z-index", ce qui permet de le placer au dessus ou en dessous des autres. Plus la valeur de z-index est haute plus l'élément est au dessus des autres.

    Valà en gros x)



    sign
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 22 Oct 2014 - 15:25

    Okhmhaka a écrit:On ne peut pas utiliser la valeur "auto" pour centrer un bloc en absolute, on est obligé d'utiliser une autre méthode pour le centrer à tout les coups pour les écrans (que j'ai expliquée dans un tuto de page d'accueil html), il faut faire un left: 50% puis un margin-left négatif équivalent à la moitié de la largeur totale de l'élément.

    J'en profite pour proposer très rapidement une petite astuce pour ceux qui ont la flemme de calculer la moitié de la largeur de l'élément (oui oui, les grosses feignasses quoi) et assez utile si on met une largeur en pourcentage.

    Quand on est en position absolute pour centrer on peut aussi :
    - définir la largeur de l'élément (width)
    - lui mettre margin: auto (comme pour un centrage de bloc normal)
    - mettre left: 0; et right: 0;

    Un petit exemple :



    Cela fonctionne aussi pour un centrage vertical (fixer une hauteur, et ensuite mettre margin auto ainsi que top: 0 et bottom: 0).
    Pour ceux qui veulent en savoir plus : Absolute Horizontal And Vertical Centering In CSS

    Exemple avec centrage vertical :

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 2 Nov 2014 - 22:06

    Ah pas mal, je savais pas ça, je calculais xD. Merci pour l'info' du coup !



    sign
    Scavenger
    Scavenger
    MasculinAge : 31Messages : 1501

    Mar 11 Nov 2014 - 11:33

    Pour infos, j'avais fait un mini tuto pour expliquer les positions. :siffle:

    https://www.never-utopia.com/t42996-partie-2-etape-7-les-positions-et-le-z-index



    Henrykiki
    Henrykiki
    MasculinAge : 31Messages : 576

    Jeu 18 Déc 2014 - 6:08

    Hello, je suis nouveau et je cherche un peu "où je dois aller" mais je me dirigeais donc vers cette petite zone qui m'a l'air bien sympathique...

    Je ne sais pas si je dois répéter ce que les autres ont si bien expliquer, mais en tout cas je remercie beaucoup Nihil Scar Winspeare pour son astuce sur le centrage vertical que je ne connaissais pas du tout! Et que je vais probablement plus cesser d'utiliser maintenant!



    Encore un grand merci, et je file lire tous les petits tutos utiles :)


    Dernière édition par Henrykiki le Ven 19 Déc 2014 - 14:48, édité 2 fois
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Jeu 5 Mar 2015 - 21:42

    Ho je connaissais pas non plus la technique de Nihil ! (ni celle d'Okhmaka) Ca risque d'être très très utile... Very Happy
    Et sinon récemment je me suis confrontée à une petite colle:
    centrer horizontalement un bloc dont la largeur est en pourcentages de la largeur de l'écran (20%) contenant une image dont la largeur est 100% de celle du bloc, et que cette image dépasse du bloc en question... ha, j'ajouterais qu'elle soit cliquable !
    J'ai fini par trouver une astuce... Mais si vous avez un peu de temps à perdre je veux bien savoir comment vous auriez fait !



    Alumine
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 7 Mar 2015 - 3:44

    Il y a d'autres techniques dans le même genre si tu cherches un peu... Je ne les ai pas toutes en tête, mais c'est quand même bien pratique tout ça. *-*
    Les positions c'est quand même bien pratique :toto:

    Par contre je n'ai pas très bien compris ta petite colle >-<... Enfin, je ne dois pas bien saisir l'idée car je ne vois pas le problème qu'on pourrait rencontrer ;___;

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 7 Mar 2015 - 16:38

    Wouaaah je vais chercher dans ce cas ! ^^

    et quant au problème... hum, bonne question, qu'est-ce qui a bien pu me poser problème ?! Je vais chercher ça x)

    Edit: le problème c'est moi. effectivement je me suis pas mal compliqué la vie pour rien ! Enfin la colle persiste, reformulée !
    L'image en question doit être en position:absolute... C'est là que ça devient galère ^^'



    Alumine
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 8 Mar 2015 - 13:24

    Je... Comprends toujours pas ;____;

    Tiens, je met sous hide une réponse, j'ai peut-être mal compris x)

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 19 Mar 2015 - 17:37

    Hello.

    Bon alors j'ai mis… 2 mois pour venir poster ici. C'est pour dire à quel point les positions et moi c'est une grande histoire d'amour u_u. Mais en dehors de ça, je me devais de participer ! Ne serait-ce que pour dire comment je comprends le tout.

    Tout d'abord la position « fixed » ma préférée :3, la plus facile à comprendre et utiliser surtout. En fait c'est dernière c'est pour afficher un élément sur la page qui ne bouge pas. C'est souvent le cas pour la barre de navigation par exemple. On a pas à chercher midi à quatorze heures c'est comme ça. C'est en ça que je la trouve 'simple'.

    Après on a la position « relative », c'est la position 'bien pratique' qui me permet d'utiliser le z-index et pour positionner mes éléments. Enfin c'est la position qui pour moi ne change pas grand-chose au « sans position » mais qui permet quand même de déplacer les éléments comme on veut et surtout de les superposer.

    Et enfin la position « absolute », c'est la grande question. Pas compris, je sais pas m'en servir et difficile.

    Mais, parce qu'il y a un mais. Jaja (par un concours de circonstance) m'a fait un bref descriptif de la position absolute. Et depuis j'ai tout compris *-* Je l'aime, j'en use, je la trouve pratique, utile et surtout très très facile d'utilisation. Comme quoi il suffisait d'une explication en coin de CB pour me faire comprendre cette petite résistante. Finalement, je m'en sers à toutes les sauces ou presque maintenant et je suis contente d'enfin la comprendre ! Du moins en partie x). La véritable chose qu'il y a à savoir c'est que la position absolute ne prend pas en compte les blocs qu'il y a avant elle. Donc pour positionner on le fait manuellement mais on a pas de mauvaise surprise à l'arrivée. C'est son grooooos point positif *-*

    Bref voilà. Maigre participation mais ce n'est que mon ressenti :3

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:28