Ce Layout responsive est-il possible ?

Version imprimable

14/05/2022, 20h52
Gaulouis

2 pièce(s) jointe(s)

Ce Layout responsive est-il possible ?

Bonjour,

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

Pièce jointe 619145
Pièce jointe 619147
Crdlt
14/05/2022, 21h50
mathieu

tout est toujours possible ;)
avez-vous essayé avec une mise en page flexbox ?
https://developer.mozilla.org/fr/doc...pts_of_Flexbox

Voici mon premier essai:

Code:

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:

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 ?

15/05/2022, 18h19
mathieu

vous avez essayé avec quel navigateur ? avec firefox je ne vois pas de souci jusqu'à 400 px de large.
15/05/2022, 18h32
Gaulouis

1 pièce(s) jointe(s)

Citation:

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
Pièce jointe 619159
15/05/2022, 18h49
mathieu

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 ?

1 pièce(s) jointe(s)

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

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

Code:

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...
Pièce jointe 619168

16/05/2022, 12h02
NoSmoking

Bonjour,

Citation:

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

:koi: 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.
16/05/2022, 14h52
darkstar123456

1 pièce(s) jointe(s)

Bonjour,

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

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

Pièce jointe 619211
16/05/2022, 22h43
Gaulouis

1 pièce(s) jointe(s)

@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.

Citation:

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.

Citation:

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 :

Citation:

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:
Pièce jointe 619247
16/05/2022, 23h09
mathieu

pour l'affichage des barres de défilement, essayez cela :
https://developer.mozilla.org/fr/docs/Web/CSS/overflow
16/05/2022, 23h11
Gaulouis
Pour faire un point sur la situation.
1. Centrer un contenu
2. Redimensionnement interactif
3. Supperposer un bloc HTML
4. Deplacer un block en fonction de la résolution
16/05/2022, 23h13
Gaulouis

Citation:

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:

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

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:

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; } }

18/05/2022, 08h34
Gaulouis

Sans javascript c'est pas possible

https://www.youtube.com/watch?v=M_VNHuMNEc0
18/05/2022, 11h04
NoSmoking
Le code de darkstar123456 fonctionne très bien sous réserve d'ajouter un z-index:1 à la classe card-login.
Code:

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