Bonjour,

Voila 4 jours que je m'intéresse à la création de site web, avant tout pour un usage personnel.
je trouve cela intéressant, mais il y à un hic, je bloque sur la notion de flexbox ( et pas que ).
Je pense avoir compris en gros a quoi servent les propriétés et leurs attributs,
mais je n'arrive même pas à mettre en place une page des plus basiques Smiley bawling
je n'arrive même pas à faire ce que je voudrais même en utilisant les propriétés de positions...
si quelqu'un peut m'expliquer comment je peut arriver à faire la mise en place de façon correcte je l'en remercie Smiley cligne

HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css.css"/>
<title>Onglet</title>
</head>
<body>
<div class="Parent">
<header class="header">Header</header>
<article class="main">
<div>Main</div>
</article>
<aside class="aside1">Aside 1</aside>
<footer class="footer">footer</footer>
</div>
</body>
</html>


CSS :

.Parent{
display: flex;
flex-flow: column nowrap;
text-align: center;
height: 1024px;
width: 1280px;

}

.Parent >*{

}

.header{
background-color: red;
height: 10%;
width: 100%;

}

.main{
background-color: yellow;
height: 80%;
width: 85%;
align-self: flex-start;

}

.aside1{
background-color: pink;
align-self: flex-end;
height: 80%;
width: 15%;
}

.footer{
background-color: orange;
height: 10%;
width: 100%;

}

voila ce que ça donne en gros :
upload/1537611099-72531-zutetzut.png

l'idée c'est que le :
header fasse 10% de la page en hauteur et 100% de largeur
main fasse 80% de la page en hauteur et 85 en% largeur
aside 1 fasse 80% en hauteur et 15% en largeur
footer fasse 10% de la page en hauteur et 100% de largeur
Modifié par Aaargh (22 Sep 2018 - 12:19)
Bonjour,
voici ce que je "pense" ce que tu devrais faire pour obtenir ce que tu veux :
- il ne faut pas englober ta div Parent avec le header, article, aside et le footer. Il faut sortir le header et le footer. Tu pourras utiliser flexbox sur article et aside cela sera plus simple pour manipuler tes deux colonnes.
- il faut modifier un peu le css :
.Parent {...flex-flow:row nowrap...}
. Tu peux supprimer les align-self.

Voici ce que je te conseil de faire pour obtenir le résultat que tu souhaite. Je te conseil d'aller faire un tour sur ce tuto : https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html et pourquoi pas aussi celui ci : https://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html.

Un autre petit conseil, évite de mettre des majuscules à la class "Parent". Ecrit en minuscule. Ce n'est pas une erreure mais c'est une bonne pratique qu'il faut adopter.
J'espère avoir résolu ton problème !
très bien, je vous remercie tout les deux de m'avoir répondu.
en effet 4 jours c'est peu, mais c'est parce que ça m'intéresse que cela m’énerve de ne pas comprendre Smiley ohwell
Merci des conseils Karl007, je vais voir ces tutoriels en espérant que cela m'aide pour la suite
Karl007 a écrit :
Bonjour,
voici ce que je "pense" ce que tu devrais faire pour obtenir ce que tu veux :
- il ne faut pas englober ta div Parent avec le header, article, aside et le footer. Il faut sortir le header et le footer. [...] les align-self.


Beaucoup de bidouille pour pas grand chose ! Quel serait l'intérêt de flex si au final, il fallait tout diviser ligne par ligne et colonne par colonne ?
Au final le seul soucis de son code, c'est qu'il a forcé son container à afficher ses blocs sous forme de colonne dans la propriété "flex-flow: column nowrap;". de plus, ne pas permettre aux blocs de se wrapper empêche la prise en compte des largeurs réelles : flex va essayer de tout mettre sur la même ligne avec des proportions relatives à chacune des largeurs. Ce n'est pas ce qu'on veut ici. Ce sont des largeurs réelles, avec la possibilité de s'aligner quand leur somme n'excède pas les 100% !

Autrement dis, dans son code, il suffit seulement de remplacer cette ligne :
flex-flow: column nowrap;

par ceci :
flex-flow: wrap;


Et le tour est joué ! Smiley cligne

Résultat ici : https://codepen.io/anon/pen/XPQELr
Modifié par Nolan (23 Sep 2018 - 13:49)
Meilleure solution
Nolan a écrit :


Beaucoup de bidouille pour pas grand chose ! Quel serait l'intérêt de flex si au final, il fallait tout diviser ligne par ligne et colonne par colonne ?
Au final le seul soucis de son code, c'est qu'il a forcé son container à afficher ses blocs sous forme de colonne dans la propriété "flex-flow: column nowrap;". de plus, ne pas permettre aux blocs de se wrapper empêche la prise en compte des largeurs réelles : flex va essayer de tout mettre sur la même ligne avec des proportions relatives à chacune des largeurs. Ce n'est pas ce qu'on veut ici. Ce sont des largeurs réelles, avec la possibilité de s'aligner quand leur somme n'excède pas les 100% !

Autrement dis, dans son code, il suffit seulement de remplacer cette ligne :
flex-flow: column nowrap;

par ceci :
flex-flow: wrap;


Et le tour est joué ! Smiley cligne

Résultat ici : https://codepen.io/anon/pen/XPQELr


Mais... Smiley roflol
c'était si simple, que ça... je me sens bête Smiley confused
merci de vôtre réponse, j'y vois un peu plus clair


developpeur-seo a écrit :
Le meilleur des tutoriels pour bien comprendre flexbox : https://flexboxfroggy.com/#fr
Et pour maîtriser le CSS en général, tu es déjà sur le bon site : https://www.alsacreations.com/tuto/liste/2-css.html Smiley cligne


J'y ferais un tour, sinon ce qui m'a initié au html/css c'est un cours sur OpenClassrooms, je ne sais pas si vous connaissez...
Dès que je finis le cours, j'approfondirais mes acquis sur ce site Smiley langue