Mettre un "div" qui reste fixe sur une page

Résolu
Cyriphone -  
le hollandais volant Messages postés 4998 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis entrain de crée un site (en html) et j'aimerai crée une barre qui resterai fixe ( par exemple quand on veut descendre dans sur la page que la barre nous suive. Je souhaiterai que le barre sois fixe et en bas de l'écran !

Je pensais crée sa en utilisant la balise <div> mais si vous avez une autre solution donner moi la !

Merci, bonne journée !

(si je n'ai pas était assez clair n'hésiter pas à poser des questions)



2 réponses

Réponse 1 / 2
le hollandais volant Messages postés 4998 Date d'inscription   Statut Membre Dernière intervention   1 057
 
Salut !

Ta question est très claire bien au contraire (ce qui est assez rare sur ce forum, donc je te félicite).

Il suffit de mettre un positionnement fixe en CSS :
position: fixed;


Comme ça, par exemple : 

<div style="postion:fixed;"> texte </div>



pour vous servir.
3
Cyriphone
 
Merci, j'ai réussi à faire pour que le div me suive, mais le problème c'est qu'il s'affiche en haut de ma page, j'aimerai qu'il me suive mais qu'il sois au bas de ma page.
0
le hollandais volant Messages postés 4998 Date d'inscription   Statut Membre Dernière intervention   1 057
 
Ajoutes un "bottom: 0;" dans le style="" :)
0
Réponse 2 / 2
canarder Messages postés 1714 Date d'inscription   Statut Membre Dernière intervention   355
 
Au bas de la page https://www.developpez.net/forums/d438746/webmasters-developpement-web/mise-page-css/pied-page-fixe-ne-bouge-on-redimensionne-page/, soit ça : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>CSS appli lourde</title>
 
<style type="text/css">
 
html{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
 
	_padding:100px 0px 100px 0px;
}
 
body{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
 
#entete{
	background: #D0EB6A;
	overflow:hidden;
	position:absolute;  
	height:100px;
	top:0px;
	left:0px;
	right:0px;
 
	_width:100%;
}
 
#centre{
	overflow:hidden;
	position:absolute;
	top:100px;
	left:0px;
	right:0px;
	bottom:100px;
 
	_height:100%;
}
 
#centre .centretexte{
	background: #888888;
	position:absolute;
	overflow:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
 
	_position:relative;
}
 
#pied{
	background: #D0EB6A;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100px;
	bottom:0;
	left:0;
	padding:0;
}
 
</style>
 
</head>
 
<body>
 
 
 
	<div id="centre">
 
		<div class="centretexte">
 
			début du contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			fin du contenu
 
		</div>
 
	</div>
 
 
 
	<div id="entete">
 
		en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe
 
	</div>
 
 
 
	<div id="pied">
 
		pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe
 
	</div>
 
 
 
</body>
 
</html>
0

Discussions similaires

free plug reste au rouge
nounours45400 -
Virginie -

8 réponses