merci bacasable
je voulais pas ouvrir une autre ligne, je pensais que celle là permettrais de rassembler les infos.
merci beaucoup pour l'info sur Safari
et oui je me sers de caniuse pour travailler et grid normalement est compatible avec ces navigateur, même, dixit Raphaël Goetter qui dit dans son livre page 5 que cela n'est pas implémenté par defaut dans Safari.
par contre IE10 devrais le prendre.
maintenant est ce mon code qui n'est pas bon, mais je m'y suis repris plusieurs fois et "je pense" être bon là.
mon code html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Acceuil</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!-- colonne 1 -->
<header id="header">
<img src="./img/site/logoFPD2019.png" alt="logo"/>
</header>
<!-- colonne 2 -->
<div id="menuHeader">
<ul>
<li><a href="#">Votre compte</a></li>
<li><a href="#">Panier</a></li>
</ul>
</div>
<!-- colonne 3 -->
<nav id="navPrincipal">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="./pages/films.html">Films</a></li>
<li><a href="./pages/realisation.html">Production</a></li>
<li><a href="./pages/association.html">Association</a></li>
</ul>
</nav>
<!-- colonne 4 -->
<main id="main">
<aside id="aside"></aside>
<div id="blocArticle">
<img id="jacquetteAccueil" src="./img/jaquettes/5.jpg" alt="jaquette"/>
<article id="article">
<h2>Résumé</h2>
<p>
Lorsque l’enfant est opposant, lorsque l’adulte souhaite faire preuve d’autorité, lorsque parfois l’adulte est débordé par ses propres pulsions de colère, il n’est pas toujours aisé de trouver le juste ton, la juste place face à l’enfant. Parents, éducateurs, professeurs, nous sommes tous confrontés à cette réalité qui est notre aptitude à gérer les relations conflictuelles avec un enfant. Reliée à notre propre histoire, reliée à un contexte de situation mais également à une pression sociale, cette aptitude va être différente pour chacun et va générer des relations différentes à l’enfant. Pour illustrer les propos d’intervenants professionnels ou de témoignages de parents, une compagnie de théatre a travaillé pendant 6 mois avec des jeunes de 6 à 19 ans, sur des saynètes recréant des conflits adultes/enfants. Dans le but d’accompagner et non pas de culpabiliser, le film alternera les saynètes aux propos des adultes et proposera ainsi des pistes de réflexion autour de ce thème essentiel, structurant pour l’enfant mais souvent tabou…</p>
</article>
</div>
</main>
<!-- colonne 5 -->
<footer id="footer">
<!--debut de la liste des partenaires-->
<div id="partenaires">
<ul id="listePartenaire">
<li class="titreListe">Partenaire</li>
<li>
<ul>
<li class="logoPartenaire">
<a href="http://www.caf.fr/allocataires/caf-du-finistere/accueil"
target="_blank">
<img
src="img/site/caf-finistere.png"
alt="Logo lien de la CAF du Finistére"
title="Lien vers la CAF du Finistére"
class="logoPartenaire"/>
</a>
<hr/>
</li>
<li class="logoPartenaire">
<a href="http://galipette-asso.fr/index.php/l-association"
target="_blank">
<img
src="img/site/galipette.png"
alt="Logo lien vers le site de l'association Galipette, association pour enfants"
title="Lien vers le site de l'association Galipette"
class="logoPartenaire"/>
</a>
<hr/>
</li>
<li class="logoPartenaire">
<a href="http://www.poher.bzh/accueil_poher" target="_blank">
<img
src="img/site/logo-poher.png"
alt="Logo lien vers Poher-Communauté"
title="Lien vers le site du Poher-Communauté"
class="logoPartenaire"/>
</a>
<hr/>
</li>
<li class="logoPartenaire">
<a href="https://www.finistere.fr/" target="_blank">
<img
src="img/site/logo-Finistere-1.png"
alt="Logo lien vers le site régional du Finistére"
title="Lien vers le site régional du Finistére"
class="logoPartenaire"/>
</a>
<hr/>
</li>
<li class="logoPartenaire">
<a href="http://www.infoparent29.fr/spip.php?rubrique48" target="_blank">
<img
src="img/site/reapp-finistere.png"
alt="Logo lien vers l'association REAPP du Finistére"
title="Lien vers l'association REAPP du Finistére"
class="logoPartenaire"/>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!--fin de la liste des partenaires-->
<!--debut adresse de contact-->
<div id="blocAdresse">
<ul id="contact">
<li class="titreListe">Contact</li>
<li>
<ul>
<li class="adresse">Maison de l'enfance</li>
<li class="adresse">7 route de Kerniguez</li>
<li class="adresse">29270 Carhaix-Plouguer</li>
<li class="adresse">tél: 06 76 69 18 93</li>
</ul>
</li>
</ul>
</div>
<!--fin adresse de contact-->
<!--debut information connexes-->
<div id="asideInfo">
<ul id="infoAnnexe">
<li class="titreListeInfo">Condition général de ventes</li>
<li class="titreListeInfo">Mentions légales</li>
<li>
<ul id="iconeResauxSociaux">
<li class="reseauxSociaux">
<a href="https://fr-fr.facebook.com/preparonsdemain" target="_blank">
<img
src="img/site/facebook.png"
alt="Icone lien vers le site Facebook de l'association Films Preparons Demain"
title="Site Facebook de Films Preparon Demain" class="logoReseaux"/>
</a>
</li>
<li class="reseauxSociaux">
<a href="https://www.youtube.com/user/PreparonsDemain" target="_blank">
<img
src="img/site/youtube.png"
alt="Icone lien vers la chaine YouTube de l'association Films Préparons Demain"
title="Chaine YouTube de l'association Films Préparon Demain" class="logoReseaux"/>
</a>
</li>
<li class="reseauxSociaux">
<a href="mailto:filmspreparonsdemain@gmail.com" target="_blank">
<img
src="img/site/courrier.png"
alt="Icone lien pour envoyer un courrier via votre messagerie par défaut"
title="Nous écrire"
class="logoReseaux"/>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!--fin informations connexes-->
</footer>
</body>
</html>
mon code css une fois passé à la moulinette de SASS
#blocArticle {
display: -ms-grid;
display: grid;
-ms-grid-columns: 40% 60%;
grid-template-columns: 40% 60%;
-ms-grid-rows: 5% 85% 5% 5%;
grid-template-rows: 5% 85% 5% 5%
}
#blocArticle #jacquetteAccueil {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1 / 2;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2 / 3;
max-width: 100%;
max-height: 100%;
-ms-grid-column-align: center;
justify-self: center
}
#blocArticle #article {
grid-column: 2 / -1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2 / 3
}
#blocArticle #article h2 {
padding: 0 0 15px 0
}
#blocArticle #article p {
padding: 0 50px 50px 50px;
max-width: 100%;
max-height: 100%
}
#blocArticle>*:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1
}
#blocArticle>*:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2
}
#blocArticle>*:nth-child(3) {
-ms-grid-row: 2;
-ms-grid-column: 1
}
#blocArticle>*:nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 2
}
#blocArticle>*:nth-child(5) {
-ms-grid-row: 3;
-ms-grid-column: 1
}
#blocArticle>*:nth-child(6) {
-ms-grid-row: 3;
-ms-grid-column: 2
}
#blocArticle>*:nth-child(7) {
-ms-grid-row: 4;
-ms-grid-column: 1
}
#blocArticle>*:nth-child(8) {
-ms-grid-row: 4;
-ms-grid-column: 2
}
#footer {
background-color: rgba(55, 55, 56, 0.34);
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0 150px 50px 150px;
margin: 5px;
border-top: cadetblue 1px solid
}
#footer #partenaires {
margin-top: 25px;
grid-column: span 3
}
#footer #partenaires .logoPartenaire {
padding: 0 0 5px 20px
}
#footer #blocAdresse {
margin-top: 25px;
grid-column: 6 / span 4
}
#footer #blocAdresse .adresse {
padding: 0 0 0 20px
}
#footer #asideInfo {
margin-top: 25px;
grid-column: span 3;
justify-items: end
}
#footer .titreListe {
margin: 10px 0 20px 0;
font-weight: bold
}
#footer .titreListeInfo {
font-weight: bold
}
#footer .reseauxSociaux {
display: inline-flex;
margin: 20px 10px 0 20px
}
#header {
padding: 30px 0 0 80px;
margin-top: 50px
}
#main {
display: -ms-grid;
display: grid;
-ms-grid-columns: 27% 73%;
grid-template-columns: 27% 73%;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
padding: 25px
}
#menuHeader {
justify-self: end;
padding: 10px 250px 0 0
}
#menuHeader ul li {
display: inline-flex
}
#menuHeader ul li a {
padding: 20px
}
#navPrincipal {
-ms-grid-column-align: end;
justify-self: end;
line-height: 180%;
font-size: 1.6em
}
#navPrincipal ul {
margin: 100px 0 0 0
}
#asideFilm {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 25% 75%;
grid-template-rows: 25% 75%
}
#asideFilm h1 {
margin: 50px 0 50px 50px;
font-weight: bold;
line-height: 150%
}
#asideFilm h1 #titreFilm {
font-style: oblique
}
#asideFilm img {
grid-row: 2;
justify-self: center;
max-width: 80%;
max-height: 80%
}
#blocArticleFilm {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 75% 25%;
grid-template-rows: 75% 25%
}
#blocArticleFilm #articleFilm {
grid-column: 2;
grid-row: 1;
margin-top: 100px
}
#blocArticleFilm #articleFilm p {
margin: 0 75px 0 50px
}
#blocArticleFilm #formulaireQuantiteCommande {
grid-column: 2;
grid-row: 2;
justify-self: end;
padding: 0 50px 0 0
}
#blocArticleFilm #formulaireQuantiteCommande ul li {
display: inline-flex;
padding-right: 20px
}
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
background: linear-gradient(to top, #f3f3f3, #e9e9e9, #d1cac6);
font-size: 1.2em;
font-family: Garamond, sans-serif;
line-height: 120%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr [12];
grid-template-columns: repeat(12, 1fr);
-ms-grid-rows: auto [3];
grid-template-rows: repeat(3, auto)
}
body #header {
-ms-grid-column-span: 8;
grid-column: span 8
}
body #menuHeader {
-ms-grid-column-span: 4;
grid-column: span 4
}
body #navPrincipal {
-ms-grid-column-span: 3;
grid-column: span 3
}
body #main {
-ms-grid-column-span: 9;
grid-column: span 9
}
body #footer {
grid-column: 1 / -1
}
body>*:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1
}
body>*:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2
}
body>*:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column: 3
}
body>*:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 4
}
body>*:nth-child(5) {
-ms-grid-row: 1;
-ms-grid-column: 5
}
body>*:nth-child(6) {
-ms-grid-row: 1;
-ms-grid-column: 6
}
body>*:nth-child(7) {
-ms-grid-row: 1;
-ms-grid-column: 7
}
body>*:nth-child(8) {
-ms-grid-row: 1;
-ms-grid-column: 8
}
body>*:nth-child(9) {
-ms-grid-row: 1;
-ms-grid-column: 9
}
body>*:nth-child(10) {
-ms-grid-row: 1;
-ms-grid-column: 10
}
body>*:nth-child(11) {
-ms-grid-row: 1;
-ms-grid-column: 11
}
body>*:nth-child(12) {
-ms-grid-row: 1;
-ms-grid-column: 12
}
body>*:nth-child(13) {
-ms-grid-row: 2;
-ms-grid-column: 1
}
body>*:nth-child(14) {
-ms-grid-row: 2;
-ms-grid-column: 2
}
body>*:nth-child(15) {
-ms-grid-row: 2;
-ms-grid-column: 3
}
body>*:nth-child(16) {
-ms-grid-row: 2;
-ms-grid-column: 4
}
body>*:nth-child(17) {
-ms-grid-row: 2;
-ms-grid-column: 5
}
body>*:nth-child(18) {
-ms-grid-row: 2;
-ms-grid-column: 6
}
body>*:nth-child(19) {
-ms-grid-row: 2;
-ms-grid-column: 7
}
body>*:nth-child(20) {
-ms-grid-row: 2;
-ms-grid-column: 8
}
body>*:nth-child(21) {
-ms-grid-row: 2;
-ms-grid-column: 9
}
body>*:nth-child(22) {
-ms-grid-row: 2;
-ms-grid-column: 10
}
body>*:nth-child(23) {
-ms-grid-row: 2;
-ms-grid-column: 11
}
body>*:nth-child(24) {
-ms-grid-row: 2;
-ms-grid-column: 12
}
body>*:nth-child(25) {
-ms-grid-row: 3;
-ms-grid-column: 1
}
body>*:nth-child(26) {
-ms-grid-row: 3;
-ms-grid-column: 2
}
body>*:nth-child(27) {
-ms-grid-row: 3;
-ms-grid-column: 3
}
body>*:nth-child(28) {
-ms-grid-row: 3;
-ms-grid-column: 4
}
body>*:nth-child(29) {
-ms-grid-row: 3;
-ms-grid-column: 5
}
body>*:nth-child(30) {
-ms-grid-row: 3;
-ms-grid-column: 6
}
body>*:nth-child(31) {
-ms-grid-row: 3;
-ms-grid-column: 7
}
body>*:nth-child(32) {
-ms-grid-row: 3;
-ms-grid-column: 8
}
body>*:nth-child(33) {
-ms-grid-row: 3;
-ms-grid-column: 9
}
body>*:nth-child(34) {
-ms-grid-row: 3;
-ms-grid-column: 10
}
body>*:nth-child(35) {
-ms-grid-row: 3;
-ms-grid-column: 11
}
body>*:nth-child(36) {
-ms-grid-row: 3;
-ms-grid-column: 12
}
li {
list-style-type: none
}
a {
text-decoration: none;
color: #000;
cursor: pointer
}
) une partie de mon site en grid (affichage instagram).
