TD : 9 Empilement

Nous continuons à explorer de nouvelle possibilité pour notre projet Menu.

De la position absolue (code) à l'empilement 3D (code).

TD empilement

Plus d'infos »

EDGE : 3D ++

Edge possède un outil de visualisation des couches z-index !

On voit les positions relative et absolue de notre menu

Les mots !

La puissance du CSS

text-overflow: ellipsis;

overflow: hidden;

See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

Liste de CC/examen en 2020

Apprendre avec Mozilla

Révision

Contrôle Continu

Examens

Code d'un simulateur

https://output.jsbin.com/rozulep

lecture

Il suffit de lire la documentation https://pages.github.com/

Et en particulier le point 1 : le nom doit être username.github.io

Test

Votre code permet il d'avoir des sous sous menus ?

Testez vous même votre code

Mettez votre code à la place du

See the Pen menu absolute by dupont (@dupontcodepen) on CodePen.

TD 8 : flex à la loupe

voir TD En action

Le comportement prend en compte la taille du navigateur !

Solved by Flexbox

Cleaner, hack-free CSS

CC flex-simu

Donner le code CSS à écrire dans le simulateur (donner en dessous) pour obtenir les cinq figures suivantes.

Par exemple pour la figure suivante :

on pourrait écrire :

.flex-conteneur { display :flex; padding : 10px 0; } .flex-conteneur *{ flex : 100%; }

Utiliser le simulateur !

FLEX / ITEM

See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

flex : en action

Voici un truc pour réaliser un effet.

fichier 🔺

Observez tout d'abord l'effet du hover !

p:hover, p:hover ~ p {
content : "\002605";
color : red;
}

Idée

Inverser l'ordre des éléments peut s’avérer fort utile !

Inversons donc l'ordre des éléments !

section {
display : flex;
flex-direction : row-reverse;
justify-content : flex-end;
}

fichier 🔁

Version avancée :

fichier 🔂

Le coin des bidouilleurs !

Dans le simulateur http://dupontcss.blogspot.com/p/test-grill.html écrire le CSS

.conteneur { display:flex; flex-wrap:wrap; } .conteneur> *{ flex:0 0 33.333333%}

👍Jusque là tout va bien ! Les trois blocs se partagent les 100% de largeur avec chacun une taille de 33.3333%.

La galère des bordures

Ajouter une bordure de 1px à un des blocs. La largeur va donc passer à 33.3333%+2px.

#it1 { border:1px solid; }

👎 l'ajout de la bordure a une conséquence évidente.

Il est hors de question de diminuer la largeur des blocs à 30% pour corriger ce débordement.

La solution consiste à écrire la règle box-sizing: border-box;

.conteneur> *{ 👍 box-sizing: border-box; flex:0 0 33.333333%}

La bordure fait maintenant partie de la boite et ne s'ajoute pas aux 33.3333%.

Autre galère la Marge !

Nous voulons simplement espacer nos blocs. Pour cela nous ajoutons une marge.

.conteneur> *{ box-sizing: border-box; margin-left:10px; flex:0 0 33.333333%}

👎Si on ajoute une marge pour espacer les boîtes il y a augmentation de la largeur.

Le problème de la marge est plus délicat. C'est un problème devenu classique et traité dans la littérature. La solution consiste à intégrer une gouttière.

Les gouttières

X-gap !

https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap#flex_layout

https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#flex_layout

Tester ces solutions avec des %

Correction ++

Flex

Inspecter le fil rouge

Inspecter le code https://microsoftedge.github.io/DevToolsSamples/a11y-testing/page-with-errors.html

Position absolue : centrer

Centrer un bloc : absolute

See the Pen centrer by dupont (@dupontcodepen) on CodePen.

Centrer : flex

See the Pen centrer by dupont (@dupontcodepen) on CodePen.

Centrer exercice

Modifier le code pour obtenir !

See the Pen centrer : Flex by dupont (@dupontcodepen) on CodePen.

Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
<h1>h1</h1>
<ul id="tmpPlants" class="tmpExample">
<li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
<li class="A tmpExample" id="b">li : class =A id=b</li>
<li class="B tmpExample" id="c">li : class =B id=c</li>
</ul>
<footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple :

Selecteurs ('h1')

------------- Auto correction

div : class top

h1

li : class =A et B id=item.A
li : class =A id=b
li : class =B id=c

Encadrez la selection ('ul, li')
Encadrez la selection ('li:not(#b)')
Encadrez la selection ( "#item.A" )
Encadrez la selection ( ".A.B" )
Encadrez la selection ( ".top :first-child" )
Encadrez la selection ( "ul:first-child" )
Encadrez la selection ( "li:not(:hover)" )
Encadrez la selection ( "li.B + *" )
Encadrez la selection (".top :nth-child(2)")
Encadrez la selection (".top :nth-of-type(1)")
Encadrez la selection $(".top :not(:last-child)")

TD : 6 Création d'un menu ( à rendre )

Travail à réaliser avec uniquement du CSS !

A déposer ici avant le 21 Mars

Plus d'infos »

Simulateur du chef !

Simuler les exemples du cours flex (⇇) en utilisant un des outils

off-line

in-line2 ou in-line4

Comprenez bien la distinction des propriétés sur le parent et sur les enfants du conteneur.

Travaillez pour l'instant uniquement sur les propriétés du conteneur :

Les sélecteurs de bases

Nous allons revenir sur plusieurs sélecteurs.

Création de la liste dans la liste	ul>li
Déplacement de la liste interne	position:relative
Déplacement de la liste interne : absolue	position:absolue
Effet 1 : Disparition	display:none
Effet 2 : Apparition	::hover

Pages