Et voici un cours très important avec CSS3, une des bases essentielles !
Découvrez comment positionner facilement vos blocs div, paragraphes… avec CSS3.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment définir la position de vos blocs div avec CSS3
Bonjour à tous et bienvenu sur Développement Facile.
Rappelez-vous, vous avez eu plusieurs cours sur les blocs div car c’est très important, c’est fondamental avec HTML 5 et CSS3, dans ce nouveau cours vous allez apprendre à positionner vos blocs dans l’endroit de la page HTML, de la page web, que vous souhaitez.
Le positionnement statique
Il existe plusieurs propriétés CSS 3, pour positionner vos blocs. Le positionnement d’un bloc par défaut, vous utilisez la balise position static, avec cette valeur le bloc ne peut pas être positionné, repositionner et sa visibilité ne peut pas être modifiée. En position static il est statique.
Le positionnement relatif
Codes sources pouvant VOUS intéresser :
Par contre vous avez le positionnement relatif avec la balise suivante, positionnement relative, la position est définie par les coordonnées, X, Y, donc X c’est par rapport au bord gauche de l’élément parent avec left et right, donc gauche et droite Y c’est par rapport au bord supérieur de l’élément toujours ici, avec top, la distance entre le bord supérieur ici, et bottom avec le bord inférieur.
Un exemple pour positionner un bloc top à 30 pixels en haut, left 60 pixels, 30 60 avec une bordure et un texte aligné ensemble. Bien évidemment position relative, pour déplacer le bloc, je vous remontre ici, position relative ou on peut déplacer le bloc, position statique le bloc reste fixe, on ne peut pas le modifier, il faut donner les coordonnées X Y avec left et right, top, bottom.
Je vous ai mis un exemple de code source, le mieux c’est de tester par vous-même, comme je vous l’ai dit dans les cours précédents faites les exercices, reprenez les codes sources que je vous donne, et testez-les chez vous en créant des pages HTML et en vous amusant avec top, left, bottom, right, etc. pour positionner vos blocs avec une position relative.
Le positionnement absolu
Vous avez également la position absolue, donc ça créé un bloc complètement indépendant du reste du document, et il se positionne pile poil à l’emplacement définit par vous, par le développeur aux propositions X et Y.
Un exemple de code source, vous aussi entrainez-vous, position absolue, position relative, position statique, avec top, left, bottom, right, justement pour déplacer vos blocs et voir vraiment ce que ça donne au niveau de positionnement.
Le positionnement fixe
Vous avez la position fixed, donc là ça fixe, ça créé un bloc indépendant, le développeur, vous, vous définissez sa position et le bloc reste fixe même lorsque le document défile. Ça permet de créer des blocs fixe, rappelez-vous les cours sur les backgrounds image, des images fixes d’arrière-plan qui ne bougeaient pas quand l’utilisateur défile, vous pouvez faire exactement la même chose avec les blocs en les définissant en position pixels, vous donnez leurs coordonnées XY de la même façon.
Je vous ai mis un exemple de code source, vous avez 2 blocs, un qui est fixed à une position prédéfinie, et un qui est en mode statique, dès que vous allez défiler il va se déplacer.
La propriété float
Vous avez la propriété float, vous allez la voir très souvent en CSS 3 car elle est également souvent utilisée, donc la propriété float elle retire un bloc de l’affichage HTML pour le placer le plus à droite ou le plus à gauche de son élément parent, dans ce conteneur. Donc float right ça va placer le bloc à droite, vous avez un container un div principal, un autre div à l’intérieur, float right ça le place là, float left ça le place là, à gauche. Et none pas de spécifications, c’est le navigateur qui décide. La propriété float ne peut s’appliquer que pour un positionnement absolu, ça ne marche pas en statique, ça ne marche pas en relatif.
Un exemple de code source avec une div en style float, qui est un logo, vous aurez le logo et le texte juste à côté, donc le paragraphe, tout ça, vous avez un div principal, avec un div héritage style float right donc à droite, et un paragraphe de texte, donc votre texte ici, le logo sur la droite.
La propriété clear
Vous avez la propriété clear qui permet d’annuler le flottement si vous avez utilisé la propriété float à un moment ou un autre, vous pouvez utiliser la balise float clear avec des valeurs right, ça annule le flottement à droite, left, ça annule le flottement à gauche, both ça annule le flottement des deux côtés, et none ça annule toutes les propriétés de flottement.
Je vous ai mis un exemple de code source, avec clear right une annulation des propriétés de flottement à droite. A vous de tester, reprenez ce code source, mettez la vidéo sur pause, reprenez le code source et faites des tests avec les différentes propriétés de CSS que je vous donne, comme ça vous verrez visuellement ce que ça donne.
Votre plan d’actions !
Bien évidemment, vous pourrez télécharger un exemple de code source sous ce cours vidéo, maintenant vous savez positionner les blocs, qu’on respecte le design définit par le site Internet, si vous avez des questions, posez-les directement sous ce cours, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple CSS3
Retrouvez le code commenté CSS3 pour positionner vos blocs.
Téléchargement du code source Positionnement des blocs div avec CSS3
Cliquez ici pour télécharger le code source Positionnement des blocs div avec CSS3
Et vous, quelle technique utilisez-vous pour donner une position à vos blocs ?
Partagez dans les commentaires, votre code pour positionner vos blocs div, paragraphes, images…