avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 22 Mar 2018 - 0:35
Je crois que je savais déjà tout ça :3

Je connais la différence entre margin et padding ^^
margin c'est les marges extérieures et padding c'est les marges intérieures, genre si je met ça :
Code:
div {
margin: 20px;
padding: 5px; }
bah il y aura 20 px de marges autour de ma div, donc chaque bloc autour sera espacé de 20px, tandis que l'intérieure aura une marge de 5px, donc le texte que j'entrerais dans ma div ou un autre élément sans marge que je mettrais dedans se trouvera à 5px du bord de la div.

C'est pas clair, mais tu m'as compris, hein ? x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 22 Mar 2018 - 2:26
D'accord c'est bon tant mieux ^^

Alors pour le positionnement, tu pourrais me faire un petit récap de tout ce que tu connais ?


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Dim 8 Avr 2018 - 0:00
Coucou @Tigrlion,

Tout va bien ? As-tu vu mon message ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 8 Avr 2018 - 21:48
Oui, pardooooon ! J'avais vu ton message, je me suis dit je répondrais, puis après j'ai pas trop eu le temps de passer vraiment alors je me suis dit je viendrais prévenir rapidement et puis j'ai oublié, sorry ! >///<

Alooors, le positionnement... huhu, c'est le truc trop compliqué que j'ai abandonné en cours de route la dernière fois, non ?

Donc, euh, je connais juste les float:left et float:right, enfin c'est pas comme si je maitrisais mais c'est un truc que j'aime bien utilisé et que je trouve... facile ? Est-ce que ça compte dans le positionnement ?

Je sais que le positionnement se fait avec des position:absolute, position:relative ou je sais plus et je sais plus comment ça marche..., qu'on défini la distance et donc la position entre chaque "objet" avec juste des trucs style right:5px, top:10px ou des trucs comme ça ? Je crois ? x)

Et que bah en général, utiliser le positionnement, c'est mieux que les tableaux, parce qu'on est pas censé utiliser des tableaux pour de la mise en page, c'est pas bien. Et le positionnement, ça permet de faire plus de trucs en plus, je pense.

Je suis vraiment très perdue avec ça, faut qu'on reprenne tout depuis le début, pas à pas, je crois x)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 10 Avr 2018 - 0:45
Au risque que ton sujet sur les catégories soit archivé, je te réponds ici

PA > Affichage > Images et couleurs > images (avancé) > mini-icônes > masquer

On verra donc le positionnement pas à pas dès demain parce qu'il se fait tard là et ça risque de me prendre du temps.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 15 Avr 2018 - 20:19
Bah, j'avais déjà essayé cette option là, mais ça m'enlève pas les images, ça les remplace juste par une image vide, du coup ça m'affiche quand me^me le truc comme ça : https://screenshots.firefox.com/0DK98TcOsyAFdoAn/toraion.forumactif.org

Mais t'en préoccupe pas, je vais aller poster ça dans la catégorie adéquate x'3

I'm ready pour le positionnement !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 17 Avr 2018 - 23:00
D'accord :3

Excuse moi pour le retard, j'avais beaucoup de travail et j'essayais de faire le plus simple possible.

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 te parait le plus simple.
__________


Je te laisse donc examiner ces deux exemples et me dire si tu as du mal à comprendre quoique ce soit.

Exemple :



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 17 Avr 2018 - 23:16
J'ai eu un peu de mal à comprendre à quoi servait le clear, mais je crois que j'ai compris :3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 18 Avr 2018 - 19:38
D'accord, faisons un petit exo alors.

On va créer ce petit schéma en utilisant la propriété float.



avatar 1
avatar 2

Voici mon HTML :

Code:
<img src="http://nsm07.casimages.com/img/2018/02/05//18020506013312811115537392.png">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quasi quibusdam velit officiis soluta aliquam doloremque. Cupiditate quas tempore amet quae aliquid quaerat, sint quidem repellat molestiae. Velit, doloremque! Eaque.</div>
<img src="http://nsm07.casimages.com/img/2018/02/05//18020506012912811115537391.png">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quasi quibusdam velit officiis soluta aliquam doloremque. Cupiditate quas tempore amet quae aliquid quaerat, sint quidem repellat molestiae. Velit, doloremque! Eaque.</div>

<p>The most beautiful people we have know are those who have known defeat, known suffering, known struggle know loss and have found their way out of the depths. These persons have an appreciation, a sensitivity, and an understanding of life that fills them
  with compassion, gentlness and a deep loving concern. Beautiful people do not just happen. </p>

On va garder notre HTML dans cet ordre.

Je te laisse donc essayer ça.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 21 Avr 2018 - 19:35
J'ai fait ça : https://codepen.io/anon/pen/zjvqjo?editors=1100#

CSS
Code:
img {
 float:right;
}

div {
  float:right;
  width:150px;
  height:200px;
  overflow:auto;
  margin: 0px 5px 5px;
}

p {
  clear:right;
  width: 70%;
}

div, p {
  background-color:paleturquoise;
  font-family:Times;
}
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Sam 21 Avr 2018 - 21:13
C'est parfait !

Est-ce que tu as compris le principe de la propriété clear ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 22 Avr 2018 - 0:38
Je crois, oui.

En fait, je dirais que ça force un peu un retour à la ligne, en quelque sorte. Enfin, je veux dire que ça fait que les float ne se placent pas à côté de lui, quoi.

Je sais pas expliquer avec mes mots, mais je crois que j'ai compris x)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2058
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
Oui c'est ça qu'on appelle une réinitialisation du flux. L'élément auquel on applique un clear retourne à sa position initiale.

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



Exemple :



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
OK ! Jusque là, je comprends !
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum