1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Divers
  5. Div position fixed sur la page

Div position fixed sur la page

Soyez le premier à donner votre avis sur cette source.

Vue 28 498 fois - Téléchargée 827 fois

Télécharger le projet
Commenter

Description

But du Jeu...
Palier au manque de IE sur la position fixed des objets.
Aucun javscript, si ce n'est pour la démo, n'est nécessaire, on joue avec le CSS.

L'essentiel est indiqué ci dessous...

Source / Exemple : 


<html>
<head>
<title>DIV Fixed sur la page</title>
<style type="text/css">
/* CSS pour le BODY */
body {
  margin : 0px;
  padding : 0px;
  overflow :hidden;
}
/* CSS pour le DIV BODY du document */
#D_BODY {
  position : relative;
  height : 100%;
  width : 100%;
  overflow : auto;
}
/* CSS pour le DIV LOGO ou autre */
#D_LOGO {
  position : absolute;
  top : 5px;
  left : 5px;
}
</style>
</head>
<body>
<!-- Dans le BODY on intégre les DIVs comme ceci -->
<div id="D_BODY">
<!-- Mettre toute la page dans le DIV -->
</div>
<!-- le DIV LOGO doit étre mis après pour
 ne pas passer sous les ScrollBars -->
<div id="D_LOGO">
<!-- Mettre votre super Logo ou Menu dans ce DIV -->
</div>
</body>
</html>

Conclusion :


Un exemple complet est disponible dans le ZIP...
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 3
24 juil. 2007 à 15:56
En même temps je viens de comprendre PetoleTeam que tu n'avais pas compris ma source lol OK
Si justement ma source est compatible avec explorer mais,
si tu as disons un pixel de trop en width avec explorer

Exemple :
---------
Ce code fonctionne pour tous les navigateurs

.test {
width: 100px;
}

Et que tu remarque que visuellement sur explorer que l'on est à 101px.
Donc tu procède :
-----------------

.test {
width: 99px;
}

html>/**/body .test {
width: 100px;
}

Et voilà le tour est joué compris ?
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 3
24 juil. 2007 à 15:25
Ma source explique justement les différences entre les navigateurs et donc de parer les bugs d'explorer;
Donc pour répondre à NAFOU
"si je défini le style "bloc" avant "layer1" ça ne passe pas sous IE 6 et IE 7 ..."
Utiliser html>/**/body pour régler tes problème de bug.
C'est bien plus propre pour le code

Par contre PetoleTeam je n'ai pas compris pourquoi tu suppose que les gens feraient çà (avec du JavaScript) autrement que ta source très logique donc basique pour créer une mise en page en CSS
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 18
23 juil. 2007 à 21:36
Bonsoir,
<CITATION>
Il y a beaucoup plus simple que de rajouter tous ces div inutiles
</CITATION>

SAUF QUE...ton exemple, tu l'écris toi même, n'est pas pris en compte par IE, ou partiellement, or le but de cette source c'est justement d'être comptatible avec IE en attendant qu'il prenne en compte la position FIXED, c'est dans la description, voir en haut de page.

;0)
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 3
23 juil. 2007 à 17:58
Désolé, j'ai oublié de corriger complètement le CSS.

html>/**/body .bloc {
margin: 0 auto 0 auto;
position: relative;
background: transparent url("Style/images/dragdrop_backgd.gif") no-repeat 0 0;
width: 920px;
height: 249px;
}

Explication
-----------
margin: top right bottom left;
background: color url no-repeat top left;
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
 3
23 juil. 2007 à 17:25
Il y a beaucoup plus simple que de rajouter tous ces div inutiles

.bloc {
position: absolute;
left: 856px;
top: 176px;
width: 47px;
height: 57px;
z-index: 1;
}

html>/**/body .bloc {
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(Style/images/dragdrop_backgd.gif);
width: 920px;
height: 249px;
}









Explication
-----------
html>/**/body n'est pas pris en compte par ie6 et ie7.
À savoir, html>body est pris en compte par ie7 et pas le ie6.
Voilà ?
Afficher les 10 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (PetoleTeam)