Les techniques avancées pour définir la position de vos blocs div partie 2

Allez encore plus loin avec le positionnement avancé des blocs div, paragraphes… toujours avec CSS3.

Découvrez comme gérer la profondeur, la partie visible d’un bloc…

Regardez la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Les techniques avancées pour définir la position de vos blocs div partie 2

Bonjour à tous et bienvenu sur Développement Facile.

J’ai reçu de nombreuses questions par mail sur les blocs div en CSS, je vous ai déjà proposé plusieurs cours toujours très courts de 10 minutes, sur les blocs div, et il s’avère qu’il est nécessaire de vous donner, de vous offrir un cours supplémentaire, donc sur le positionnement des blocs, c’est la partie 2, consacrée à la position des blocs avec CSS, vous allez tout savoir.

La superposition de blocs

Pour superposer des blocs, vous l’avez vu sur des sites Internet, maintenant il y en a de plus en plus, c’est des pop-up intérieurs, vous consultez votre document HTML, il y a un pop-up qui arrive mais pas une nouvelle fenêtre, ou un nouvel onglet non, un pop-up à l’intérieur de la page.
Bien comment ils font ? Ils utilisent la propriété Z-index, ça ajoute, vous avez les axes X et Y, Z-index ça ajoute un axe de profondeur, comme la 3D finalement, et donc ça permet d’ordonner les blocs entres eux en définissant un Z-index.

Je vous ai mis un exemple de code source avec plusieurs blocs et avec des Z-index différents, en les positionnant vous pouvez voir qu’ils se chevauchent plus ou moins en fonction du Z-index que vous avez donné, donc le bloc1 il sera en bas, le bloc2 au-dessus et le bloc3 encore au-dessus car il a un Z-index de 3, à vous de vous amuser avec cette nouvelle valeur Z-index pour positionner ces blocs, vous pouvez faire des pop-up par-dessus tous les autres blocs, des chevauchements, à vous de voir et de vous amuser.

Le dépassement de la taille d’un bloc

Vous avez également la propriété overflow qui détermine ce que le navigateur doit faire lorsqu’un bloc est plus grand que l’élément qu’il contient, vous avez un div, et le div à l’intérieur, son contenu le fait dépasser du div, là vous pouvez définit avec CSS ce qu’il se passe, vous avez la propriété overflow avec différentes valeurs.
Auto, c’est le navigateur qui décide,
visible la partie qui dépasse est affichée donc on ignore totalement les propriétés CSS du bloc parent,
scroll la partie qui dépasse c’est caché mais accessible avec une barre de défilement,
hidden la partie dépasse est cachée sans possibilité de la voir ou d’y accéder.
Pensez à cette propriété overflow qui peut s’avérer très pratique.

Je vous ai mis un exemple de code source, avec une propriété overflow :auto, pensez à utiliser hidden, scroll, visible, sur cet exemple de code source, comme ça vous verrez les différents types d’affichage possible en scroll, en cachant la partie, en la rendant visible, à ce que la partie dépasse du bloc, je vous ai mis une couleur de fond donc vous verrez quand le texte dépasse du bloc.
Amusez-vous avec cet exemple de code source, il est très bien pour comprendre la propriété overflow.

La visibilité du contenu d’un bloc

Vous avez également la propriété clip qui détermine la partie visible du bloc, donc souvent une image, l’image entière est bien présente dans la page Web, mais on peut choisir d’afficher seulement une partie de celle-ci, vous avez une image complète, par exemple, une personne et vous pouvez souhaiter d’afficher que son visage, vous définissez un clip rectangle avec des valeurs, donc les coordonnées du rectangle sont découpées, sont données par les sommets supérieurs gauches, supérieurs droits, inférieurs droits, et inférieurs gauche, on fait gauche, droite, droite, gauche, tout simplement, les valeurs en pixel. Il est recommandé d’inclure l’élément découpé dans une balise div, ce sera beaucoup plus simple pour gérer l’affichage et le positionnement de l’élément dans vos pages HTML. Il faut savoir cette propriété ne fonctionne qu’avec un positionnement absolu de l’élément, si vous ne savez pas ce que ça veut dire position absolue, je vous renvoie au cours précédent tout est expliqué en détails avec des exemples de code source.

Voici un exemple pour afficher une image, en définissant un clip rectangle 0-50, 100-0, ça va afficher une partie du logo, amusez-vous, vous aussi à afficher des parties d’images, des parties div, grâce à cette propriété clip.

Contrôler l’affichage d’un bloc

Vous avez display :bloc, je vous ai déjà expliqué comment fonctionne la propriété display, vous avez des valeurs, donc ça permet de contrôler l’affichage des éléments sur une page. Bloc c’est un élément bloc div, inline c’est l’inverse, et none c’est un élément masqué de la page.

Je vous ai mis un exemple de code source, il y a du texte, une image logo.png, et du texte, deux paragraphes bloc div avec une image, et donc avec display et none, et les valeurs inline bloc, vous pouvez vous amuser sur l’affichage de ce code source, de cette page HTML, reprenez le code source, faites les exercices que je vous donne dans ce cours vidéo et croyez-moi, vous allez progresser à la vitesse grand V en HTML 5 et CSS 3.

Contrôler la visibilité du contenu d’un bloc

Vous avez la propriété CSS visibility qui détermine si un élément est visible ou caché. Ça, ça va vous être très utile lorsque les utilisateurs cliquent sur un bouton de la page, pour afficher ou masquer certains éléments de votre page HTML, il y a deux valeur possibles, visible l’élément visible, hidden l’élément est masqué. Il faut savoir qu’avec la valeur hidden, l’élément occupe toujours sa place dans le document, l’élément occupe la place dans le document, par contre il est remplacé par un rectangle blanc vu qu’il est hidden, et ça permet de conserver la mise en page que vous avez définie dans votre page Web. C’est la principale différence avec les display none ou votre image, ou votre div complètement enlevée, votre mise en page peut changer, alors qu’avec visibilité hidden vous avez un rectangle blanc à la place, donc votre mise en page est conservée.

Je vous ai mis un exemple de code source, à vous de le réutiliser, jouez justement avec display, none, tout ça, avec visibility, visible, hidden pour bien voir les différences d’affichage, et bien appréhender la différence entre display et visibilité des propriétés CSS 3, très importantes.

Modifier le curseur de la souris

Vous avez le curseur donc la propriété CSS cursor, ça va vous permettre de définir le curseur de la souris, je vous ai listé un peu des valeurs différentes du curseur, curseur :help, ça va afficher le petit point d’interrogation avec la petite souris que vous voyez souvent sous Windows,
pointer c’est un doigt qui indique un lien, donc le pointeur comme ça,
move, ça permet d’indiquer qu’on déplace un objet donc c’est la croix comme ça,
Après je vous les aie mis sur la vidéo, vous faites pause et vous pourrez les réutiliser dans vos documents HTML, dans vos codes sources, tout est expliqué en français, parce ce que vous avez les curseurs de redimensionnement avec les doubles flèches, quand vous déplacez, redimensionnez une image comme ça, comme ça, ou en diagonale, vous avez tous les types de curseurs avec des orientations différentes à chaque fois.

Je vous ai mis, il y en a plein, text que l’on peut sélectionner le texte, c’est la barre oblique qui clignote,
Wait c’est une progression, une attente avec une montre ou un sablier,
Default c’est le curseur par défaut, c’est la flèche,
Crosshair c’est une croix,
Progress en forme de flèche avec un sablier,
Vous avez toute la liste complète ici, mettez pause, vous pouvez récupérer les différentes valeurs des curseurs, les propriétés cursor CSS, ici vous faites pause, vous pourrez définir les différentes valeurs de la propriété cursor, vous pouvez même spécifier un fichier image pour votre curseur, donc avec la propriété URL, vous renseignez l’URL de l’image et cette image deviendra votre curseur, très pratique.

Je vous ai mis un exemple de code source, en dehors du bloc div sur toutes vos pages HTML ce sera la flèche windows que vous connaissez bien, dès que vous allez passer au-dessus du bloc div avec la souris, le curseur va se transformer en help avec le point d’interrogation et la petite flèche. Cette propriété curseur est magique un peu pour mettre des mains sur certains liens, des images, mettre des interactions très spécifiques avec des éléments de vos pages Web, donc testez la propriété cursor pour mieux appréhender son fonctionnement.

Votre plan d’actions !

Retrouvez un exemple de code source sous cette vidéo, vous pouvez télécharger le code source c’est fait pour, et positionnez bien vos blocs maintenant en respectant le design défini par le graphiste dans votre agence web, ou si c’est vous qui définissez le graphisme, maintenant vous pouvez le respecter à la lettre. Si vous avez des questions, posez-les directement sous le cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple CSS3

Voici un exemple de code source pour positionner des éléments avec CSS3.

Partagez votre code CSS3 pour positionner vos éléments HTML

Utilisez la zone commentaires pour partager votre code CSS3 pour définir facilement la position de vos blocs HTML.