Gestion des cadres CSS

Lolo_4978 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
Lolo_4978 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -
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;
}
A voir également:

2 réponses

Réponse 1 / 2
Altrax
 
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.
0
Réponse 2 / 2
Lolo_4978 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
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
	}
0

Discussions similaires

application de gestion des contacts
jolya -
Anouar -

6 réponses