AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 12 04 02:00:36
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DIV POSITION FIXED SUR LA PAGE


Information sur la source

Catégorie :Divers Classé sous : div, position, fixed Niveau : Débutant Date de création : 13/07/2007 Vu / téléchargé: 14 858 / 489
Auteur : PetoleTeam Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
Aucune note
Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

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

  • <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> 
<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...
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de coucou747 le 13/07/2007 21:01:39

ou est le javascript ?

signaler à un administrateur
Commentaire de PetoleTeam le 14/07/2007 01:20:36

Bonsoir, je sais et je suis navré, j'ai mis cette source en réponse à un question sur le forum, et annoncé qu'il n'y avait pas de javascript dans la description de la source, mais il m'a semblé utile de la déposer car apparement IE7 n'a pas corrigé le tir.

signaler à un administrateur
Commentaire de bultez le 14/07/2007 13:00:07

>>je suis navré
il n'y a pas de quoi... ici on cause [d]html et javascript.
comme c'est une solution intéressante, plutôt que de faire
en JavaScript ( même s'il n'y a qu'une ligne pour faire ça ),
tu as eu parfaitement raison de nous poster cette source.
ça pourra être utile à plus d'un.
@+

signaler à un administrateur
Commentaire de rambc le 14/07/2007 19:42:27

Moi aussi je trouve cela TRES utile. Merci pour l'info.

signaler à un administrateur
Commentaire de nafou le 22/07/2007 23:11:54

Nickel ! je n'ai pas utilisé ce code mais grace a celui-ci, j'ai débugué le mien !! Je vous explique le bug rencontré, ça peut peut-être vous être utile :
#Layer1 {
position:absolute;
left: 856px;
top: 176px;
width:47px;
height:57px;
z-index:1;
}
.bloc {
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(Style/images/dragdrop_backgd.gif);
width: 920px;
height:249px;"
}

<div class="bloc">
<div id="Layer1"><img src="Style/images/dragdrop_bin.gif" width="44" height="55" alt=""></div>
</div>

si je défini le style "bloc" avant "layer1" ça ne passe pas sous IE 6 et IE 7 ...

signaler à un administrateur
Commentaire de stay le 23/07/2007 17:25:18

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;
}

<div class="bloc">
<img src="Style/images/dragdrop_bin.gif" width="44" height="55" alt=""></div>
</div>


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à …

signaler à un administrateur
Commentaire de stay le 23/07/2007 17:58:10

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;

signaler à un administrateur
Commentaire de PetoleTeam le 23/07/2007 21:36:00

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)

signaler à un administrateur
Commentaire de stay le 24/07/2007 15:25:43

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

signaler à un administrateur
Commentaire de stay le 24/07/2007 15:56:49

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 ?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Position d'un DIV toujours en haut [ par fcdconnect ] Bonjour !j'aimerai savoir comment positionner un &lt;div&gt; toujours en haut d'une fenetre meme apres un scroll...merci d'avance Position d'un DIV toujours en haut [ par fcdconnect ] comment avoir un &lt;div&gt; toujours en haut de la page meme apres un scroll:þmerci coucou , je suis dans la M...... [ par frvfrvfrvfrv ] salut &#224; tous,j'essaye de faire bouger des div , de facon auto , j'ai deja avancer grace &#224; vous tous. Mais pour la suite j'arrive pas a faire deplacer des div avec la souris [ par reski_01 ] bonjour a tous, j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter je voudra Modification de tableau par balise div [ par gourango ] Boujour et bien voila un grand probleme se pose la comptabilitee :J ai cree un script pour mon site malheureusement imcompatible avec ie !!!(internet Position de la sourie sur une image [ par Gally ] Bonjour a tous,J'ai une nouvelle petite question: Est-il possible de connaitre la position de la sourie sur une image ou meme sur un Div et cela en pi DIV position absolute fullscreen ? [ par guepard53 ] Salut à tous ! :-)J'aimerais griser le contenu d'une page quand j'affiche un div au dessus. Par exemple une image. J'ai déjà vu ça mais je ne retrouve problème avec "position : fixed ;" [ par TOONIE ] Bonjour,   <p class="MsoNormal" st Position de DIV aléatoire [ par skullo ] Bonjour à tous !Je ne sais pas si ce que j'aimerai faire est réalisable en html et css mais je demande quand même au cas où.Pour l'explication en déta Récupérer la longueur d'une div et l'appliquer à une autre. [ par chiktika ] Bonjour,Voila, J'ai un div (div id="contenu") dont la longueur dépend de la longueur d'un texte qui varie à chaque page html.J'ai un deuxième div (div


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,390 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.