Réduction de la taille de la fenêtre

Sujet résolu

Anonyme

10 janvier 2019 à 4:42:10

Bonsoir à tous, je viens faire appel à vos connaissances suite à nombreuses recherches qui ne s'avèrent pas fructueuses :(..

Tout d'abord le code :

<!doctype html>
<html>

	<head>

		<title>La Boîte de Pandore</title>
		<link rel="stylesheet" href="cssTest.css"/>
  		<meta charset="utf-8">

	</head>

	<body>

		<div id="blocPrincipal">

			<div id="blocImageLogo">
				<img src="logo.png" alt="Logo" />
				<div id="titre">La Boîte de Pandore</div>
			</div>

		</div>

	</body>

</html>

body
{
	margin: 0;
	padding: 0;
	background: url(background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
#blocPrincipal 
{
	background-color: white;
	margin-left: 20%;
	margin-right: 20%;
}
#blocImageLogo
{
	display: flex;
	flex-direction: column; 
	align-items: center;
	justify-content: center;
}
#titre
{
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 48px;
	font-weight: bold;
}

Alors voilà, ces bouts de code ne sont que des "tests" pour ensuite implanter la solution sur mon site.

J'aimerais savoir comment réduire la taille des bordures de gauche et de droite, tout en maintenant la taille du bloc du milieu lorsque l'on réduit la taille de la page.

Merci beaucoup pour votre aide et pour votre lecture :magicien:

-
Edité par Anonyme 10 janvier 2019 à 5:15:37

FloJDM

10 janvier 2019 à 9:31:53

Salut,

La taille des bordures ? Je ne vois aucune bordure dans le code, tu parle peut-être des margins ?

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

Frogweb

10 janvier 2019 à 11:05:50

Salut,

pareil, pas de bordures visibles et ça ne peut pas être à cause du margin de body puisqu'il est à 0.
Peut-être à cause des proriétés de flex.

Petite remarque en passant, pourquoi ne pas utiliser les bonnes balises ?

<header id="blocImageLogo">
    <img src="logo.png" alt="Logo" />
    <h1 id="titre">La Boîte de Pandore</h1>
</header>

Et doucement avec les ID.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Anonyme

10 janvier 2019 à 15:47:17

Merci pour vos réponses !
Alors je vais essayer de reformuler ma question je n'ai pas été assez précis.

Si on prend l'exemple du site OpenClassrooms, lorsque l'on réduit la page, le bloc du milieu garde sa taille mais les bords de gauche et de droite se réduisent.

J'aimerais faire la même chose mais je ne trouve pas la solution

Merci Frogweb je corrige ça de suite pour la balise h1

Concernant les id, vaut-il mieux utiliser des sélecteurs id ou class ?

Frogweb

10 janvier 2019 à 16:50:53

Je pense que c'est à cause de ça :

#blocPrincipal
{
    margin-left: 20%;
    margin-right: 20%;
}

Mets margin:auto à la place des deux.

Maintenant, si tu ne veux pas que ton site fasse toute la largeur de la fenêtre :

#blocPrincipal
{
    max-width:1180px;/* par exemple */
    background-color: white;
    margin:auto;
}

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Anonyme

10 janvier 2019 à 17:04:11

Oh ! C'était exactement ce que je cherchais merci beaucoup !