begin process at 2012 02 14 11:08:38
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > DIV POSITION FIXED SUR LA PAGE

DIV POSITION FIXED SUR LA PAGE


 Information sur la source

Note :
Aucune note
Catégorie :Divers Classé sous :div, position, fixed Niveau :Débutant Date de création :13/07/2007 Vu / téléchargé :26 099 / 723
Auteur : PetoleTeam

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip CLEAR D'UN INPUT FILE
Source avec Zip FONCTION ALERT ET LES ACCENTS
Source avec Zip LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE
Source avec Zip Source avec une capture RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE
Toutes les sources de PetoleTeam

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip MODIFIER LE CONTENU D'UN DIV AVEC JAVASCRIPT par lecurieux41
COULEUR DE FOND SELON POSITION SOURIS par mailliam
Source avec Zip CLASS BARRE DE DÉFILEMENT (SCROLLBAR) JAVASCRIPT par TheWeasel47
Source avec Zip POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER par Kimjoa
Source avec Zip Source avec une capture MENU AVEC ROULETTE par jdmcreator

Commentaires et avis

Commentaire de coucou747 le 13/07/2007 21:01:39 administrateur CS

ou est le javascript ?

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.

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.
@+

Commentaire de rambc le 14/07/2007 19:42:27

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

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

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

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;

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)

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

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

css position:fixed; sans scroll horizontal [ par ghost_of_prog ] Bonjour à tous,j'ai un souci en css, je ne sais pas si cela est possible alors je demande a tout hasard ...voila j'ai une div en position:fixed; je vo problème avec "position : fixed ;" [ par TOONIE ] Bonjour,   <p class="MsoNormal" st Position du curseur dans une div [ par Dj Nam ] Bonjour tout le monde,Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car j Prototype/Scriptaculous && Background-position [ par DakM ] Bonjour ! J'ai ce calque: [code=js]var div = new Element('div', {'id': this._id, 'class': css.map.container, 'style': 'display:none; width: 100%; hei Définir la position d'une scrollbar de div au chargement de page ?! [ par campeur77 ] Bonjour,Comme l'indique le titre, je voudrais définir la position de la scrollbar de mon div au chargement de ma page. Comment pourrais-je bien faire position fixed sous IE [ par julienboc ] bonjour, j'ai un menu en position fixe en haut de ma page web. ce denier ce comporte très bien sous FF et IE8 mais pas sur les versions antérieures d 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 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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,950 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)