27819 sujets

CSS et mise en forme, CSS3

Bonsoir
Je continue mon apprentissage des Flexboxs en grande partie grâce à ce forum ????
Aujourd’hui j’ai fait un essai de mise en page, j’y suis presque parvenu ... !
Mais là je viens vers vous car je bloque.
Je ne parviens pas à gérer la taille des photos et du texte, j’ai essayé de jouer sur les tailles des div, en vain.
Merci pour votre expertise.
Bonne soirée
Prenez bien soin de vous.


https://www.menuiserie-menplast.fr/blocks8.html
Modifié par africa (31 Oct 2020 - 18:13)
Bonjour
Laurent, Je souhaite aligner 3 divs en desktop, celle du milieu contient un logo (en background) qui disparait en version mobil, j’y suis parvenu mais le problème c’est la gestion des tailles des divs qui contiennent les images et le texte, les images sont très petites.
En fait je souhaiterai garder la même largeur de texte en version desktop et mobil et faire en sorte que les images s'adaptent...
Merci
Modifié par africa (01 Nov 2020 - 06:20)
Modérateur
Bonjour,

Ça me parait difficile de faire supporter la réduction de largeur uniquement par les images. Elles sont dès le départ trop petites pour ça.

Du coup, je ne réponds pas à la question mais voilà comment j'aurais fait : simplification html (vraiment, tous ces <div> qui servent à rien ...) + flex de ton code (très bien) + grid (en fenêtre étroite; bon exercice ! Smiley smile ) ou float (en fenêtre large; rare cas où float semble tout à fait indiqué).

Les images ont leur taille d'origine limitée à la largeur de leur conteneur en fenêtre large (à adapter éventuellement), et limitée par la largeur de la colonne de la grille où elles se trouvent en fenêtre étroite.

Eventuellement, en fenêtre vraiment très étroite, lorsque le texte devient vraiment plus haut que les images, on peut revenir à la mise en page avec des floats (je ne l'ai pas fait dans mon exemple, et si ça se trouve ce ne sera jamais justifié : à voir en situation réelle).

EDIT : si parmi tes images d'origine, y en a de très grandes, tu peux ajouter un section img {max-width:9rem;} par exemple pour en limiter la taille.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blocks</title>
<style>
body,h3,p{margin:0;padding:0;}
body
{
	background-color:red;
	font-family:'Source Sans Pro',verdana, sans-serif;
	line-height:1.625;
	padding:2rem;
}
main
{
	margin:0 auto;
	max-width:1200px;
	min-width:17rem;
	padding:1rem;
	background-color:white;
}
section
{
	padding:1rem;
	border:1px dotted #2B6CA3;
	display:grid;
	grid-template-rows:2rem auto;
	grid-template-columns:10rem auto;
}
section:first-of-type
{
	margin-bottom:1rem;
}
section h3
{
	grid-row:1;
	font-weight:800;
	height:2rem;
}
section img
{
	max-width:100%;
	grid-row:1 / 3;
	justify-self:center;
	align-self:center;
}
main>img{display:none;}
@media only screen and (min-width:800px){
main{display:flex;justify-content:space-between;}
main>img
{
	display:block;
	flex:0;
	padding:1rem;
	width:8rem;
	align-self:center;
}
section{display:block;flex:1;}
section:first-of-type{margin-bottom:0;}
section:first-of-type img {float:left;}
section:last-of-type img {float:right;}
}
@media only screen and (max-width:440px){
body{padding:2rem 0;}
}
</style>
</head>
<body>
<main>
  <section> 
    <img src="https://www.menuiserie-menplast.fr/img/ideal-4000.jpg">
    <h3>gauche</h3>
    <p>Système de 2 - joints <br>
      Système à 5 - chambres <br>
      Profondeur de 70 mm <br>
      Vitrage des plaques, largeur 41 mm</p>
  </section>
  <img src="https://www.menuiserie-menplast.fr/img/logo6.png">
  <section>
    <img src="https://www.menuiserie-menplast.fr/img/porte2.jpg">
    <h3>droite</h3>
      <p>La collection élégante de portes d’entrée aluminium Despiro est
        une offre attrayante pour les clients les plus exigeants qui
        recherchent la modernité.</p>
  </section>
</main>
</body>
</html>

Amicalement,
Modifié par parsimonhi (01 Nov 2020 - 09:12)
Meilleure solution
Bonjour
Merci Parsimonhi Smiley smile
Je me mets au travail grâce à ton post, je vais pouvoir encore une fois m'améliorer et comprendre un peu plus les flexbox en dépouillant ton code, merci.
Bonne journée
Bonjour
Génial, je viens de travailler sur le code de Parsimonhi, je découvre l’utilisation de GRID, je ne connaissais pas … !
J’ai parcouru un peu le net afin d’obtenir des infos sur cette méthode CSS, avez-vous des liens et des tutos éprouvés pour en apprendre un peu plus sur cette technique ?
Merci
Bonne journée