Faire des div prenant tout l'écran

Sujet résolu

19 mars 2020 à 14:39:13

Bonjour,

voilà je souhaiterais faire une page web avec des div chacune l'une en dessous de l'autre et chacune prenant pour taille la hauteur totale de l'écran de l'utilisateur ainsi que sa largeur sauf que voilà je ne sais pas pourquoi chaque fois que j'essais ma seconde div se met sur la première au lieu de se mettre en dessous afin de pouvoir scroll dessus. Je ne comprend pas je n'ai jamais eu ce genre de problème auparavant de quoi cela peut-il venir ?

P.S: oui mes div sont des <section> et les div dedans à la base c'était des <article> mais j'ai changé pensant que cela venait de ça.

html,body{
	height: 100%;
	margin: 0px;
	padding: 0px;
	/*background-color: rgba(26, 26, 29, 1);*/
}
.sectionDisplay{
	position: absolute;
	height: 100%;
	width: 100%;
	/*overflow: hidden;*/
	justify-content: center;
	text-align: center;
}
.text{
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    text-align: justify;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}
h1.text{
	font-size: 72px;
	text-align: center;
}
h2.text{
    text-align: center;
}

/*-------------------------SECTION PRESENTATION-----------------------------*/

#whoAreUs.sectionDisplay{
	background-color: rgba(26,26,29,1);
}
#whoAreUs.sectionDisplay #contentPresentation{
    justify-content: center;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#imagesPresentation .visions{
	position: relative;
	display: inline-block;
    right: 25%;
    width: 190px;
}
#imagesPresentation .structure{
	position: relative;
	display: inline-block;
	left: 0%;
    width: 190px;
}
#imagesPresentation .futur{
    position: relative;
	display: inline-block;
    left: 25%;
    width: 190px;
}
/*--------------------------------------------------------------------------*/
#personnages.sectionDisplay{
	background-color: rgba(42,42,46,1);
}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="CSS/Index3.css">

        <title>SITE</title>
    </head>
    <body>
        <section id="whoAreUs" class="sectionDisplay">
            <div id="titrePresentation">
                <h1 class="text">PRÉSENTATION</h1>
            </div>
            <div id="contentPresentation">
                <p class="text">
					TEXT
				</p><br />
				
				<p class="text">
					TEXT
				</p>
            </div>
			<div id="imagesPresentation">
				<div class="visions">
					<img src="Media/notreVision.png">
                    <h2 class="text">
						NOTRE VISION
					</h2>
                     <p class="text">
						 TEXT
					</p>
				</div>
				<div class="structure">
                    <img src="Media/structure.png">
                    <h2 class="text">
						NOTRE VISION
				    </h2>
                    <p class="text">
						TEXT
					</p>
               </div>
			   <div class="futur">
                    <img src="Media/futur.png">
                    <h2 class="text">
						NOTRE VISION
				   	</h2>
                    <p class="text">
						TEXT
				   </p>
               </div>
			</div>
        </section>

        
        <section id="personnages" class="sectionDisplay">
            <div>
                <p>TEXT</p>
            </div>
            <div>
                <p>
                    TEXT
                </p>
            </div>
        </section>
    </body>
</html>

-
Edité par StephenFarnault1 19 mars 2020 à 14:40:11

Lartak

19 mars 2020 à 15:52:05

Bonjour.

C'est normal, si tu demandes à chaque div de prendre toute la hauteur de l'écran, elles vont forcément se mettre les une au dessus des autres et donc être positionnées au même endroit.

-
Edité par Lartak 19 mars 2020 à 15:53:06

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

StephenFarnault1

19 mars 2020 à 16:03:46

Lartak a écrit:

Bonjour.

C'est normal, si tu demandes à chaque div de prendre toute la hauteur de l'écran, elles vont forcément se mettre les une au dessus des autres et donc être positionnées au même endroit.

-
Edité par Lartak il y a 9 minutes

Oui sa d'accord mais du coup comment faire pour que chaque div prennent tout l'écran mais chacune l'une en dessous de l'autre ?

Nyut

19 mars 2020 à 16:11:55

Salut

Voici comment faire

.div1 {width:100vw;height:100vw;background-color:red;}
.div2 {width:100vw;height:100vw;background-color:blue;}

<div class="div1"></div>
<div class="div2"></div>

Je t'ai mis des couleurs pour bien voir. Enleve les marges si tu les veux pas

arf !!!

StephenFarnault1

19 mars 2020 à 16:13:35

Nyut a écrit:

Salut

Voici comment faire
.div1 {width:100vw;height:100vw;background-color:red;}
.div2 {width:100vw;height:100vw;background-color:blue;}
<div class="div1"></div>
<div class="div2"></div>
Je t'ai mis des couleurs pour bien voir. Enleve les marges si tu les veux pas

Alors oui mais du coup quand je vais passer en responsive sa va pas gêner de mettre des valeurs en vw ?

Nyut

19 mars 2020 à 16:36:39

Il faudra que tu jetes un oeil sur les media queries

@media screen and (max-width: 640px) {

}

arf !!!

StephenFarnault1

19 mars 2020 à 16:39:32

Oui c'est déjà ce que je comptais faire mais du coup c'est surtout pour la hauteur des sections que j'ai peur parce que chaque appareil est différent niveau résolution un Iphone auras pas forcément la même résolution qu'un Xiaomi par exemple

Nyut

19 mars 2020 à 16:46:45

Sinon utilise Bootstrap, c'est le top pour rendre responsive un site

arf !!!

StephenFarnault1

19 mars 2020 à 16:51:45

Oui mais le truc c'est que bootstrap je suis pas encore à l'aise dessus et je dois rendre sa pour la semaine prochaine. Voila ce que sa donne quand je le met au format IphoneX avec les conseils que tu m'as donné (j'ai enlevé toute les marges mais comme tu peux le voir elles sont encore là, réellement j'ai déja fait des pages web bien structurée mais celle-ci me pose des problême que j'avais jamais rencontré, le pire c'est que j'ai déja toute la page qui est faite dans un autre dossier la je galère juste pour la rendre responsive)

Lartak

19 mars 2020 à 16:59:52

Il n'y a pas que pour la taille des bloc que tu dois modifier, mais aussi pour la taille des polices, soit pour le contenu dit phrasé.

Peut être que tu arriverais mieux à styliser notamment pour le responsive, si tu arrêtais d'abuser sur des valeurs en pourcentage, car pour utiliser des valeurs en pourcentage, il faut qu'un élément parent ait une taille fixe, alors que toi tu définis des pourcentages dès les balises html et body.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

StephenFarnault1

19 mars 2020 à 17:02:22

Je sais mais après je peux pas non plus dire à mon body de faire une taille fixe sachant que selon le support elle va changer ?

Lartak

19 mars 2020 à 17:08:16

Les media queries servent à ça, à modifier certaines règles CSS selon une certaine résolution, selon l'orientation, etc ...

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

StephenFarnault1

19 mars 2020 à 17:11:57

Oui sa je sais mais justement sa voudrait dire que pour chaque appareil faudrait une media queries ? ou ya des media queries "standard" à mettre ?

Lartak

19 mars 2020 à 17:18:40

Si par appareil tu veux dire comme tout à l'heure selon une marque de téléphone par exemple, tu te trompe et dans ce cas là il vaut mieux que tu te documentes sur les media queries car tu sembles plus connaitre le terme que comment les utiliser.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

StephenFarnault1

19 mars 2020 à 17:23:05

non je voulais dire par taille d'écran parce que mon téléphone actuel est plus grand que mon ancien par exemple autant niveau largeur que niveau hauteur

EmmanuelBeziat

20 mars 2020 à 12:58:49

Salut,

On n'utilise pas des media queries en fonction de tailles d'écran, mais en fonction de ton design. Si à 700px de large il y a besoin de changer pour que ça reste lisible, alors ta query doit se faire à 700px de large.

Après, tu peux prendre des valeurs grossières et partir du principe que tout en dessous de 1200px de large est une tablette, et que tout en dessous de 980px de large est un smartphone.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

StephenFarnault1

20 mars 2020 à 13:10:49

Salut,

D'accord je vois ce que tu veux dire mais je pense que je vais tricher un peu et donner des tailles fixes à mes div et des valeurs de margin en % entres elles afin qu'une seule n'apparaisse à l'écran et en effet faire des média queries pour réguler la taille des sections en fonction du besoin

EmmanuelBeziat

21 mars 2020 à 1:07:40

Je ne suis pas sûr de comprendre ce que tu veux faire… Donner des marges en pourcentage est généralement une mauvaise pratique ; et en loccurence, je ne vois pas en quoi ça répondrait à ton besoin.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

StephenFarnault1

23 mars 2020 à 16:30:03

J'ai au final opté pour un apprentissage accéléré de bootstraps