28111 sujets

CSS et mise en forme, CSS3

Problème affichage background dégradé

Bonjour !
Je rencontre un problème de fond sur ma page. Le dégradé est appliqué au body, mais celui ci ne couvre pas toute ma page. Le dégradé est donc saccadé. Voici mon code pour que vous puissiez essayer de trouver l'erreur !
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="home.css">
		<link href="https://fonts.googleapis.com/css?family=Roboto|Saira+Condensed:500&display=swap" rel="stylesheet">
	</head>
	<body>
		<div class="conteneur">
				<div class="logo_navebar">
					<a href=""> <img src="logom.png" height="50"></a>
				</div>
				<nav class="navebar">
					<p class="works"> <a href="works.html"> Works </a></p>
					<p class="about"> <a href="about.html"> About </a></p>
				</nav>
		</div>
	</body>
</html>


CSS: 
 body {
	margin: 0;
	padding: 0;
	background:linear-gradient(#FFEEFC,#FFAFE2);
}

.logo_navebar {
	width: 20%;
	margin-top: 1%;
	margin-left:3%;
}

.works a {
	font-family: 'Saira Condensed', sans-serif;
	font-size:2em;
	color: black;
	transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
		-ms-transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
		-webkit-transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
  	left: 1em;
  	top: 45%;
  	position: fixed;
	text-decoration: none;
}

.about a {
	font-family: 'Saira Condensed', sans-serif;
	font-size:2em;
	color: black;
	right: 1em;
  	top: 45%;
  	position: fixed;
  	transform:matrix(0,1,-1,0,0,0);
	-ms-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	-webkit-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	text-decoration: none;
  }


Merci de votre aide ! Bonne soirée Smiley biggrin
Bonsoir,
ajoute min-height:100vh;
et enlève padding: 0; qui est inutile,
soit :
body {
	margin: 0;
	min-height:100vh;
	background:linear-gradient(#FFEEFC,#FFAFE2);
}


sinon ton body fait 50px de haut, seule hauteur précisée, les autres éléments sont en position fixed, donc hors du flux
Modifié par farang (04 Sep 2019 - 19:13)
farang a écrit :
Bonsoir,
ajoute min-height:100vh;
et enlève padding: 0; qui est inutile,
soit :
body {
	margin: 0;
	min-height:100vh;
	background:linear-gradient(#FFEEFC,#FFAFE2);
}


Merci bien, en effet cela fonctionne ! Mais la marge de ma div #Logo_navebar n'entre pas dans le body, pourquoi ?
oui je regardais, il me semble que :

sinon ton body fait 50px de haut, seule hauteur précisée, les autres éléments sont en position fixed, donc hors du flux (non en fait ce n'est pas ça)

pourquoi des positions fixed avec des positionnements étranges, em, % ??? erreur de conception ? le bon codage est toujours simple, dès que c'est compliqué, méfiance ...
Modifié par farang (04 Sep 2019 - 19:17)
Il se trouve que je n'ai aucune idée de l'unité à utiliser ! Si je ne met pas de position fixed, mes éléments ne se positionnent pas sur les cotés...
oui, flex serait une solution
supprimer les <p>, inutiles
pour la navbar :

			<nav class="navebar">
				<a href="works.html" class="lien">Works</a>
				<a href="about.html" class="lien">About</a>
			</nav>




.navebar {	
        padding: 0 20px;
	display:flex;
	justify-content:space-between;
}



.lien{
	font-family: 'Saira Condensed', sans-serif;
	font-size:2em;
	color: black;
  	transform:matrix(0,1,-1,0,0,0);
	-ms-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	-webkit-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	text-decoration: none;
  }

Modifié par farang (04 Sep 2019 - 19:55)
Merci beaucoup ! En effet c'est bien plus clair et simple ! En revanche, l'orientation des mots que je voulais différente ne l'est pas ici, je vais donc devoir mettre deux classes différentes pour mes deux a...
oui bravo !
donc plutôt une classe pour les deux, et la transformation pour chaque:

.lien{
	font-family: 'Saira Condensed', sans-serif;
	font-size:2em;
	color: black;
  	transform:matrix(0,1,-1,0,0,0);
	-ms-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	-webkit-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	text-decoration: none;
  }

.top-to-bottom {
  	transform: xxx;
}
.bottom-to-top {
  	transform: yyy;
}


			<nav class="navebar">
				<a href="works.html" class="lien top-to-bottom">Works</a>
				<a href="about.html" class="lien bottom-to-top">About</a>
			</nav>


je pense que c'est le mieux, notamment pour de futures évolutions/modifs
( je n'ai pas vérifié que works était "top-to-bottom" plutôt que "bottom-to-top" mais tu as compris le principe, autres noms de classes si tu préfères mais toujours des noms qui indiquent ce que ça fait)
Meilleure solution
Merci bien pour tous ces conseils !
J'ai trouvé une autre solution en mettant : 

 <nav class="navebar">
						<a href="works.html" >Works</a>
						<a href="about.html" >About</a>
					</nav>

et pour le css : 
 .navebar a {

	font-family: 'Saira Condensed', sans-serif;
	font-size:2em;
	color: black;
  	transform:matrix(0,1,-1,0,0,0);
	-ms-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	-webkit-transform: matrix(0,00,1,00, -1,00,0,00,0,0);
	text-decoration: none;
}

.navebar a:first-of-type {
	
	transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
		-ms-transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
		-webkit-transform:matrix(-0.00,-1.00,1.00,-0.00,0,0);
}

Cela fonctionne mais est-ce aussi pratique pour de futures évolutions ?
Merci encore ! Bonne soirée ! Smiley biggrin
Modérateur
bonjour,

au lieu de transform, tu peut te servir de writing-mode,
au lieu de position:fixed, flex (ou grid) peut aussi t'aider a center tes éléments.
enfin, le min-height, appliqué au conteneur avec les padding qui vont bien suffisent pour etirer ton gradient et garder ton contenu en place.

css revisiter sans toucher au html https://codepen.io/gc-nomade/pen/bGbOpVV
gcyrillus a écrit :
bonjour,

au lieu de transform, tu peut te servir de writing-mode,
au lieu de position:fixed, flex (ou grid) peut aussi t'aider a center tes éléments.
enfin, le min-height, appliqué au conteneur avec les padding qui vont bien suffisent pour etirer ton gradient et garder ton contenu en place.

css revisiter sans toucher au html https://codepen.io/gc-nomade/pen/bGbOpVV


Merci bien pour ces conseils !!
Sujet clos
Aller à