Ce Layout responsive est-il possible ?

**Gaulouis** · 14/05/2022, 21h52

Bonjour,

Quelqu'un saurait s' il est possible de faire ce layout en responsive ? Si oui, comment ?

Nom : layout-responsive.png
Affichages : 146
Taille : 46,1 Ko

Nom : layout-responsive.png
Affichages : 146
Taille : 46,1 Ko

Nom : layout-responsive-2.png
Affichages : 137
Taille : 28,6 Ko

Crdlt

**mathieu** · 14/05/2022, 22h50

tout est toujours possible

avez-vous essayé avec une mise en page flexbox ?
https://developer.mozilla.org/fr/doc...pts_of_Flexbox

**Gaulouis** · 15/05/2022, 18h57

Voici mon premier essai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body { height:100%; margin:0; padding:0;}
body {
	flex-flow: column nowrap;
	place-content: stretch center;
	align-items: normal;
	margin: auto;
	display: flex;
}
.wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: top;
	align-content: stretch;
}
.content {
	border:solid 1px blue;
	width:50%;
	min-width:400px;
	max-width:600px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
	<meta content="utf-8" http-equiv="encoding" />
	<meta charset="utf-8" />
	<title>Reaction</title>
 
	<style type="text/css">
 
        </style>
</head>
<body>
<div class="wrapper">
	<div class="content"">
		Wellcome...
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
	</div>
</div>
</body>
</html>

Mon .content est bien affiché au centre de ma page. Cependant,

Dès que je sous dimensionne la fenêtre les scrollbars apparaisse bien mais mon .content est rogner.

Quelqu'un aurais une solution a ce problème a me proposer ?

**mathieu** · 15/05/2022, 19h19

vous avez essayé avec quel navigateur ? avec firefox je ne vois pas de souci jusqu'à 400 px de large.

**Gaulouis** · 15/05/2022, 19h32

Dès que je sous dimensionne la fenêtre les scrollbars apparaisse bien mais mon .content est rogner.

On est d'accord, au-dessus de 400px cela fonctionne.

Le problème arrive quand je suis en dessous de 400px. les scrollbars ne me permettent pas d'afficher le contenu. C'est croppé, rogner, découpé, disparu... Et pareil en vertical. C'est comme si j'avais utilisé la propriété position: absolute
Nom : cropped.png
Affichages : 100
Taille : 2,4 Ko

Nom : cropped.png
Affichages : 100
Taille : 2,4 Ko

**mathieu** · 15/05/2022, 19h49

si on prend par exemple l'iphone 4 sorti il y a 10 ans, la largeur de l'écran est de 600 px. donc pour une application grand public vous n'avez pas besoin de descendre en dessous, sauf si vous avez peut-être un public particulier ?

**Gaulouis** · 15/05/2022, 21h42

Vous avez certainement raison. Je dois mal m'y prendre.

Avez-vous une solution a me proposer pour ce genre de cas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
 
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <style>
        html, body { height:100%; margin:0; padding:0;}
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            border: 2px solid rgb(95, 97, 110);
        }
    </style>
</head>
 
<body>
 
    <div class="container">
	  <!-- Cause users never respect boundaries ...  -->
          <pre><< Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...>> - Finibus Bonorum et Malorum</pre>
    </div>
 
</body>
 
</html>

Je m'attendais a ce que les scrollbar me permet d'afficher ~~retrouver~~ mon contenu...
Nom : resize.png
Affichages : 105
Taille : 9,3 Ko

**NoSmoking** · 16/05/2022, 13h02

Bonjour,

Je m'attendais a ce que les scrollbar me permet de retrouver mon contenu...

là il faut que tu précises le fond de ta pensée !

Nota :
les éléments <pre> ont par défaut un white-space: pre que tu peux changer en white-space: break-spaces, par exemple, pour favoriser les retours à la ligne.

**darkstar123456** · 16/05/2022, 15h52

Bonjour,

Je suis pas sûr d'avoir vraiment compris le dernier message non plus

Sinon concernant le design, il est clairement pas évident... c'est jamais évident les superpositions qui plus est relatives tout en étant responsive
Voici un coup d'essai que j'ai réalisé : https://codepen.io/DarkStar123456/pen/ZErLXxd

C'est basé sur Bootstrap 5
Et pour ce qui est du cadre "Welcome" qui sous le login, si on veut le placer correctement il n'y a pas vraiment d'autre choix que d'ajuster ses valeurs gauche/droite en fonction de la résolution
C'est d'ailleurs souvent pour ça qu'on utilise des .container dans Bootstrap afin d'avoir une largeur de travail connue

Nom : Capture d’écran 2022-05-16 145247.jpg
Affichages : 85
Taille : 104,8 Ko

Nom : Capture d’écran 2022-05-16 145247.jpg
Affichages : 85
Taille : 104,8 Ko

**Gaulouis** · 16/05/2022, 23h43

@darkstar123456 super sympa codepen.io. Je ne connaissais pas. Je me suis inscrit tantôt, merci. Malheureusement ton exemple pose le même problème susdit.

Je suis pas sûr d'avoir vraiment compris le dernier message

"Je m'attendais a ce que les scrollbars me permettent ~~de retrouver~~ d'afficher ~~mon~~ le contenu ~~...~~ HTML."

Je souhaiterai pouvoir prendre n'importe qu'elle contenue HTML/CSS et le centrer dans ma fenêtre. Et si ma fenêtre est trop petite par rapport au contenu, je souhaiterai que ma fenêtre affiche les scrollbars.

Envoyé par Référence

Une scrollbar (barre de défilement) est un contrôle qui permet à l'utilisateur d'accéder à des parties d'un document plus grandes que le widget (fenêtre) utilisé pour l'afficher.

La prérogative étant de ne pas a avoir a modifier le contenue HTML pour que mon utilisateur puisse le visualiser.

Post-Edit :

Envoyé par NoSmoking

là il faut que tu précises le fond de ta pensée !

Je n'ai pas tout le jargon du métier. Ne hésitez pas pas a me corriger ou a me demander plus de précision ou de me reformuler.

FYPI : Concernant la résolution, je ne voulais pas en parler, mais pour le mobile j'aimerai obtenir ce layout:
Nom : layout-responsive-3.png
Affichages : 87
Taille : 34,3 Ko

Nom : layout-responsive-3.png
Affichages : 87
Taille : 34,3 Ko

**mathieu** · 17/05/2022, 00h09

pour l'affichage des barres de défilement, essayez cela :
https://developer.mozilla.org/fr/docs/Web/CSS/overflow

**Gaulouis** · 17/05/2022, 00h11

Pour faire un point sur la situation.

Centrer un contenu
Redimensionnement interactif
Supperposer un bloc HTML
Deplacer un block en fonction de la résolution

**Gaulouis** · 17/05/2022, 00h13

Envoyé par mathieu

pour l'affichage des barres de défilement, essayez cela :
https://developer.mozilla.org/fr/docs/Web/CSS/overflow

Vous avez un example avec ce contenue ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="position:absolute; top:-100px;">Hidden. Because bad centered</div>

**darkstar123456** · 17/05/2022, 09h22

Hello,

Pour que le contenu affiche des scrollbars, il faut utiliser la propriété CSS overflow comme l'a indiqué @mathieu
Cependant, pour afficher des scrollbars horizontales c'est plus compliqué car il faut d'abord définir une taille car par défaut, les contenus ne dépasseront pas la largeur de l'écran sauf si on les force
Voici un exemple : (vu qu'il est basé sur body il n'y a pas besoin de mettre un overflow car c'est réglé par défaut mais sinon il aurait fallu ajouter : overflow: auto;)
Dans cet exemple, au lieu de donner une taille j'au utilisé white-space: nowrap; qui force l'affichage du texte sur une ligne (nowrap = pas de retour à la ligne)
https://codepen.io/DarkStar123456/pen/LYQxwRg

Pour ce qui est du layout responsive, c'est un peu chiant de le savoir après car en faisant du mobile first il aurait fallu changer l'HTML pour être propre mais du coup c'est embêtant à suivre
Du coup, j'ai mis à jour mon CodePen en ne touchant QUE au CSS : https://codepen.io/DarkStar123456/pen/ZErLXxd

Il a donc fallut retirer le position: absolute de l'encadré "Welcome" et changer son order (propriété Flexbox Order) pour le mettre à la suite du contenu plutôt qu'au début à sa place standard.
Aussi changer son background-color qui était en dégradé, et supprimer les border-radius en haut pour le "welcome" et les border-radius en bas pour le formulaire

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.col-card-welcome {
    order: 2;
}
 
.card-welcome {
    background: #444444;
    width: auto;
    z-index: 1;
 
}
 
@media (max-width: 767px) {
    .card-welcome {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
 
    .card-login {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
 
@media (min-width: 768px) {
    .col-card-welcome {
        order: 1;
    }
 
    .card-welcome {
        background: linear-gradient(#444444, #262626);
        position: absolute;
        top: 30px;
        bottom: 30px;
        left: 30px;
        right: 30px;
        z-index: 0;
    }
}

**Gaulouis** · 18/05/2022, 09h34

**NoSmoking** · 18/05/2022, 12h04

Le code de darkstar123456 fonctionne très bien sous réserve d'ajouter un z-index:1 à la classe card-login.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.card-login {
  background: #444444;
  box-shadow: 0 0 10px #262626;
  z-index: 1;
}

Ce Layout responsive est-il possible ?

Responsive design en CSS

Discussions similaires

Partager

Partager