Bonjour
Je dois realiser une page qui doit ressembler a ca:
mon code HTML:
html.txt (1,6 Ko)
mon code CSS:
css.txt (557 Octets)
j obtiens ceci:
mon probleme est que je n arrive pas a aligner les div de gauche et celles de droite .
NB:Je debute sur FLEXBOX
Bonjour
Il te manque clairement les bases.
Prends le temps de suivre les tutoriels que je t’avais recommandé, ils sont bien faits et te permettront d’acquérir facilement ces bases si tu ne sautes pas des étapes.
C’est un peu comme un château de cartes : tant que la base n’est pas stable la couche supérieure ne peut pas être stable.
BOnjour Micp
j ai suivi les tuto et meme en video consecutivement .Peux tu me faire des remarques sur mon code html ?
je suis curieux savoir ce qui cloche
salut, peux-tu donner tes images en même temps?
ton html/css contient plein d’erreurs de base :
les classes doivent correspondre entre les deux fichiers
– <section class="image"> dans html ; .images{ dans css ( un s de trop )
tu peux par exemple avoir une div 'day…" sur width=100% avec un padding left/right de10%
ensuite un div sur width=100% avec un padding left/right de10% qui contient 3 div (menu gauche, image centrale, menu droite ) avec width+padding
les menus contiennent alors de div
Pour les images
index.html
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bruno sanchiz</title>
<link rel="stylesheet" href="index.css" media="all">
<link rel="icon" type="image/png" href="CSS/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="CSS/favicon.ico">
<script type="text/javascript" src="JS/fonctions.js">
</script>
<meta name="description" content="dindoun.lautre.net">
<meta name="keywords" content="dindoun">
<meta name="Identifier-URL" content="http://dindoun.lautre.net">
<meta name="Date-Revision-yyyymmdd" content="20220514">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div id=L1>
<div id=L11>
<img src="images/L11.png">
</div>
<div id=L12>
<div id=L121>
<img src="images/L121.png">
</div>
<div id=L122>
<div id=L1221>
<img src="images/L1221.png">
</div>
<div id=L1222>
<img src="images/L1222.png">
</div>
</div>
</div>
</div>
<div id=L2>
<div id=L21>
<img src="images/L211.png">
<img src="images/L212.png">
<img src="images/L213.png">
<img src="images/L214.png">
<img src="images/L215.png">
</div>
<div id=L22>
<img src="images/L22.png">
</div>
<div id=L23>
<img src="images/L231.png">
<img src="images/L232.png">
<img src="images/L233.png">
</div>
</div>
<div id=L3>
<p>
Vous entrez...df
sd
f
sdf
ds
</p>
<form id="form1">
<input type=text>
</form>
</div>
</div>
</body>
</html>
index.css
#L11,#L12,#L121,#L122{position:relative;}
#L1{position:absolute;}
#L1{width:80%;margin-left:10%;
/*.BordsArrondis{*/
background-color:#909090;
border-color:#EEEEEE00;
border-radius:2em;
border-width:0em;
border-style:solid;}
/*text-align:center;vertical-align:middle;display:block;margin:0 px auto;*/
#L11{width:20%;max-width:70%;height:100%;min-height:100%;}
#L11{float:left; top: 50%;left:5%;transform: translate(0%,25%);
}
#L11 img{width:100%;max-width:100%;height:100%;min-height:100%;
}
#L12{width:20%;max-width:20%;float:right;}
#L121,#L122{float:left;}
#L121{width:70%;max-width:70%;}
#L121 img{width:100%;max-width:100%;}
#L122{width:20%;max-width:20%;}
#L1221 img{width:100%;max-width:100%;}
#L1222 img{width:100%;max-width:100%;}
#L2{height:80%;width:80%;margin-left:10%;position:absolute;top:20%;}
#L21,#L22,#L23{float:left; background-color:#909090;
border-color:#000000;
border-radius:2em;
border-width:0em;
border-style:none;box-shadow: 15px 15px black;}
#L21{width:10%;height:60%;max-height:60%;margin-left:2%;display: block; text-align: center;position:absolute;}
#L22{width:58%;height:60%;max-height:60%;position:absolute;left:22%;margin:auto;padding:2em;}
#L23{width:10%;height:60%;max-height:60%;position:absolute;left:90%;}
#L21 img,#L22 img,#L23 img{display:block;margin:auto;}
#L21 img,#L23 img{height:20%;}
#L22 img{height:100%;z-index:30;}
#L3{position:absolute;background-color:#AAFFAA;width:15%;height:5%;left:25%;top:60%;}
input {background-color:#AAFFAA;}
body{background-color:#222222;}
PS
je n’ai pas bien compris comment avoir des images les unes au dessus des autres avec flex mais l’alignement est parfait
@dindoun
Ce code, il fait mal au yeux
beaucoup de propriétés qui ne servent a rien
les float c’était avant flexbox et le GRID . pour de quelques rares cas on en a plus besoin pour placer nos éléments.
Pour le soucis de @Pat66 , au premier regard CSS grid est ce qu’il te faut ensuite pour placer tes éléments dans les asides , avec flex en column
Pour ton header en css , placement avec deux colonne une avec ton logo l’autre avec tes éléments images placé avec les positions .
Utilise les unité fractale avec CSS pour ton main principale
Lis quelques bon tuto sur les flexbox et CSS et si tu as des questions hésites pas.
alors propose ton code si c’est si facile
Les références des étiquettes ne sont pas parlantes mais peut-être sont elles générées automatiquement ? Avant de transmettre un code, les éventuelles propriétés inutiles doivent être supprimées pour améliorer la lisibilité. C’est un exercice indispensable à faire soit même autant que possible pour progresser rapidement, certes un peu difficile ou laborieux au début mais qui aide aussi tellement les autres en matière de lisibilité. Plus c’est lisible et plus cela attire du monde pour le résoudre.
Qu’entends-tu @linuxpit par « unités fractales » avec CSS pour le main principal ?
Côté Grid et Flex, ces deux liens me semblent assez clairs tout en allant à l’essentiel:
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout Élément
https://developer.mozilla.org/fr/docs/Web/CSS/flex
Une fois que tout semble fonctionner, on peut envisager de faire des essais en redimensionnant la taille de la fenêtre et éventuellement définir les tailles minimales ou maximales de certains éléments.
Et quant au grid c’est à peu de choses prêt un retour vers les tableaux que les tenants de la modernité avaient voué aux gémonies, pour ensuite y revenir.
Perso je préfère utiliser un truc qui marche., qui dure. Le contraire de l’obsolescence programmée.
Et aussi ne pas utiliser 5 lignes de critiques quand ces 5 lignes pourraient contenir le code demandé. En plus tu aurais pu m’appendre quelquechose alors que là je suis juste plus énervé sans plus de connaissances.
@dindoun
Il faudra que tu apprennes à être moins agressif mon garçon.
Je n’ai aucune obligation à faire ton travail finalement, réécrire un code html avec son CSS peut prendre du temps.
Si j’en ai je peux le faire si j’en ai pas je ne le fais pas !
Et quant au grid c’est à peu de choses prêt un retour vers les tableaux que les tenants de la modernité avaient voué aux gémonies, pour ensuite y revenir.
Pour dire ça franchement, il y a un manque de connaissance totale que je te suggère de remédier.
Il y a sur UDEMY une très bonne formation celle de ENZO je sais plus son nom , frontend complète mais vraiment complète.
tiens je suis sympa c’est ICI
Le GRID est ce qui a de plus puissant pour disposer tes éléments, alors s’il te plait ne compare pas GRID au tableau ca n’a strictement rien avoir.
j’entend par la que ses cotés(asides) devraient avoir un taille fixe , et le bloc principale prendre la place qui lui reste ce qui donnerais
grid-template-column: (valeur en PX) 1fr (valeur en px);
Pour le fractal c’est une unité relative, tu peux comparer cela au flex-grow de flexbox, mais plus précis encore.
En fait le souci, c’est qu’il y a beaucoup de chose qui ne vont pas, ça fait beaucoup de chose qu’il faut te reprendre, c’est pourquoi, c’est compliquer de te répondre sans refaire tout le boulot.
En plus, tu affiches un manque de connaissances trop importantes, qui dans les forums ne sont pas bien vu, car beaucoup de tes soucis pourraient être réglé simplement par un peu de formation.
width: 100%;
max-width: 500px;
ca a plus de sens quand meme tu trouves pas
Ne positionne pas tes images par
position: relative ;
ni absolute dans ton cas ! flexbox est la pour ca , si ton site dois etre responsive c’est mort avec ta config.
on l’utilise dans des cas précis !
pour ta colonne de gauche par exemple
tu me mets toutes ces images dans une div
et ensuite
display : flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
Tu utilises que des ID c’est ridicule , pourquoi faire ?
Tes nommages sont pas assez explicite , dans 1 mois quand tu reliras ton code tu te rappelera de plus rien ca ca veut strictement rien dire. Fais des nommages plus long et plus explicite on doit comprendre le CSS sans aller dans le HTML toute les deux secondes.
… et je peux continuer encore
@Pat66 , ça va tu suis encore? 
Les gars, au lieu de vous engueuler sur « t’as vu je code mieux que toi », je vous conseille de simplifier au max pour notre ami, ça se voit qu’il débute, allez pas lui vriller les neuronnes avec des trucs qu’il n’a pas encore vu 
Merci d avoir pris la peine d ecrire ce code .le but en postant sur ce forum est d apprendre .
Merci pour ton message DarkGagan en effet je debute et pour le but en postant sur ce forum est que l on mette mes erreurs en evidence en vue de m ameliorer pas du code tout fait
J essaye de comprendre ton code mais rien n y fait les noms des div qui ne sont pas explicites encore moins ceux des images