/* On ajoute un coeur avant les liens */
a::before {
content: "♥";
}
1
2
Révision
Le menu
revoir http://dupontl1.blogspot.com/2021/03/correction-menu-deroulant.html
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
Les cartes
http://dupontl1.blogspot.com/2021/04/challenge-du-we.html
Les anneaux olympiques
http://dupontcss.blogspot.com/2016/11/ameioration.html
voir cours :Sélecteurs [attribut]
Les sélecteurs
QCM
La répons est NON !
Pour vous en convaincre tapez
.flex-conteneur {
display:flex
;}
.flex-conteneur *{
flex:auto;
}
#it1:before {content: attr(data-blabla);}
#it2:before {content: attr(data-blabla);}
semaine 12+13
HELP
A) Donner le résultat du code Simulateur
.conteneur { display:flex; flex-wrap:wrap; } .conteneur> *{ flex:0 0 25%}
#it1 { border:1px solid; }
Avez vous compris pourquoi nous n'avons pas 4 blocs en ligne (4*25%+2px > 100%) !
Help : box-sizing
B) Nous avons vu en cours en inspectant le menu de bootstrap qu'il y a du flex dans du flex dans du flex ...
Dans le test : http://dupontl1.blogspot.com/2021/04/quizz-flex.html
La dernière question est surprenante !
Relisez comment centrer les blocs
https://docs.google.com/document/d/1sDsYJA5do3jRYDyGDD_mSSjqjTg3Zx__mzhkYeIEzeY/edit?usp=sharing
Code https://github.com/mdn/css-examples/tree/master/flexbox/use-cases allez dans center.html
Bilan :
La solution n'est pas !
.flex-conteneur { display: flex; align-items: center; justify-content: center; }
👍 Flex dans du Flex ...
Il faut centrer le texte à l'intérieur du bloc 1 et 2.
Ecrirez pour simuler le bloc rouge #it1 carré :
#it1 {
height: 200px;
width: 200px !important;
}
Et considérez maintenant que le bloc #it1 est un bloc conteneur de son texte. Autrement dit, appliquez lui les règles que l'on a appliquées précédemment au bloc .flex-conteneur (you got it !).
Les deux plaies de flex !
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 !
Tester ces solutions avec des %
Correction ++
Chalenge
Cloner https://github.com/dupontdenis/teamFlex
Votre équipe de foot a un comportement intéressant en redimensionnant le média.
Adapter votre CSS (on ne touche pas au HTML) pour prendre en compte l'arrivée de SUPERDUPONT dans le fichier superDUPONT.html
Quizz : flex
QCM
Pour révision du QCM du 31
La question suivante est inspirée des exemples de Mozilla.
Pour télécharger ces exemples : vidéo
@Sans modifier le HTML :
| <ul> | ||
| <li><a href="">Home</a></li> | ||
| <li><a href="">Category</a></li> | ||
| <li><a href="">Sub-Category</a></li> | ||
| <li><span aria-current="page">Product</span></li> | ||
|
Pour comprendre la différence entre inline et inline-block, je vous propose d'écrire :
li {
display:inline;
border:1px solid;
width:200px;
}
et ensuite
li {
display:inline-block;
border:1px solid;
width:200px;
}
Nous verrons l'intérêt de donner, comme sur l'exemple de Mozilla, au conteneur ul la propriété display:flex.
@Qui sélectionne le dernier p
- .Y.Z
- p ~ p + p ~ p
- p.YZ
- p
- #last.Z
- div ~ article :nth-of-type(4)
- article > p#last\.Z
- p.last-child
Bonnes réponses :
1. sélectionne les balises de classe Y et Z donc le dernier p
2. le dernier p a un précédent p qui a un précédent immédiat p qui a un précédent p
6. le dernier p est en 4 position dans un article qui a un div comme précédent.
7. recherche du dernier p par son identifiant last.Z (attention au .)
Pour
3. il faudrait que la classe du dernier p soit class="YZ"
5) cela sélectionnerait un id de nom #last avec la classe Z, la bonne écriture est #last\.Z. Il faut éviter des noms d’identifiant avec un point, sinon, il faut les echapper par l'utilisation de \.
8) la bonne réponse serait p:last-child et non p de classe last-child.
@<li>Item 1</li>
<li data-code="codeA">Item 2</li>
<li data-code="codeA codeB">Item 3</li>
<li data-code="codeAB">Item 4</li>
Quel sélecteur d'attribut permet de sélectionner les items possédant l'attribut data-code="codeA" ( à savoir les Item = 2 et 3)
La réponse est [data-code~="codeA"]
si vous mettez [data-code*="codeA"], nous aurions également item4.
li[data-code="codeA"] ne sélectionne que Item2.
Entrainement :Auto-revision
GitHub
🆒How to : Après avoir cloné https://github.com/mdn/css-examples.git .
🔩Lancez le server sur /learn/selectors/attribute.html.
Vous testerez, par exemple, votre compréhension des sélecteurs d'attribut.
Correction : menu déroulant
Correction
Voici un exemple de code pour le projet : menu déroulant.
💥Travail personnel
Modifier le CSS pour afficher des menus doublement imbriqués puis modifiez le CSS.
https://codepen.io/dupontcodepen/pen/oNYGGWB
first-chid : how to
En cours, j'ai insisté sur le fait que les sélecteurs doivent répondre à une problématique précise.
Nous allons découvrir l'intérêt de disposer du sélecteur first-child
L'utilisation des speudo-classes first est particulièrement efficace dans la construction de menu. Elle permet de distinguer le premier élément de la liste et de lui affecter un style particulier.La figure ci-dessus montre le résultat de l'application d'un bord arrondi au premier <a> de la liste du menu.
nav li:first-child a { border-bottom-left-radius: 10px; border-bottom-right-radius: 0; border-top-left-radius: 10px; border-top-right-radius: 0;}
Semaine 7
Un point sur le TD menu :
Nous avons mis l'accent la semaine dernière sur les prérequis indispensables au projet.
Nous devons être capable d'analyser la problématique et de déterminer les techniques utiles au projet.
Nous devrions être capable d'implémenter le code HTML et CSS.
Centrer avec position absolue
See the Pen centrer by dupont (@dupontcodepen) on CodePen.
Autre exemple d’utilisation de position absolue : https://codepen.io/dupontcodepen/pen/VwmMXEg
Inscription à :
Articles (Atom)