gestion des cadres CSS Fermé

Question

Bonjour, 
Je suis en classe de NSI (numérique science informatique) et je rencontre un problème dans mon projet qui consiste à créer un site web avec du html et du CSS. En effet, je voudrais que mon cadre tout en haut (entete) bouge en même temps que lorsque que je descends la page tout en restant à la même place sur mon écran (jsp si je suis clair ^^). Quelqu'un pourrait m'éclairer sur ce sujet svp?
PS : Aussi si vous voyez des choses étranges dans le CSS vous pouvez me l'indiquer aussi svp ^^. Merci de vos reponses

Voilà le programme CSS:

#entete{
	position: -webkit-sticky;
	position: sticky;
	top: 10px;
	height:200px;
	text-align:center;
	font-size:80px;
	font-family:Stencil Std, fantasy;
	color:#696969;	
	background-color:#1e90ff
	}
	
#menu {
	position: absolute;
	top: 210px; left: 5px;
	float:left;
	height:600px;
	font-size:20px;
	margin: 5px;
	padding: 10px;
	color:#191970;
	background-color:#4169e1
	}
#contenu{
	position: absolute;
	top: 210px; left:265px;
	height:600px;
	width:1220px;
	font-size:20px;
	font-family:Brush Script MT, Brush Script Std, cursive;
	color:navy;
	text-align:justify;
	margin: 5px;
	padding: 10px;
	background-color:#87cefa
	}
#piedpage{
	position: absolute;
	top: 840px; left: 10px;
	height:210px;
	width:1480px;
	color:#2BFAFA;
	padding: 10px;
	background-color:#1e90ff;
	}

Altrax · Answer

Salut,
pour ça il faut voir avec la propriété
position:fixed;
https://www.w3schools.com/Css/css_positioning.asp

position:sticky; est incomplet si vous ne rajoutez que -webkit-sticky qui est  prévu pour le navigateur Chrome uniquement.
Il faut rajouter la même chose pour Firefox,IE/Edge,Opera;exemple ici:

https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

C'est le problème d'utiliser des nouvelles fonctionnalités CSS, elles ne sont  pas encore prise en charge totalement et nécessitent une syntaxe particulière à  chaque navigateur(et ne garantissent pas qu'elles fonctionnent de manière identique- surtout si le navigateur n'est pas à jour ou sa version ne prends pas en charge les nouvelles fonctionnalités -ex: un navigateur sur mobile-).

Avec la valeur fixed:
Il faudra  peut-être repenser toute la mise en page en fonction, histoire que l'élément fixe ne gêne pas trop l'affichage des autres, dans un chevauchement gênant par exemple(ou l'inverse si ce sont les autres éléments qui se superposent) mais ça correspond à ce que vous voulez sans avoir à passer par sticky. Ou alors vous avez pas expliqué correctement l'exercice?

ps: le CSS sans  le HTML ça montre pas grand chose.
Vous devez aussi utiliser les balises de code pour afficher celui ci de façon claire dans le message.

Lolo_4978 · Answer

Merci bcp pour cette réponse super rapide, le cadre bouge maintenant !!
Mais problème, le cadre apparait derrière les autres. Savez vous comment le positionner devant? Cela vient peut être du fait que les autres cadres sont positionnées avec absolute?

J'ai fait comme vous m'avez dit en remplaçant par fixed :
#entete{	position: fixed;	top: 10px;	height:200px;	width:1500px;	text-align:center;	font-size:80px;	font-family:Stencil Std, fantasy;	color:#696969;		background-color:#1e90ff	}

Gestion des cadres CSS

2 réponses

Discussions similaires