1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Css position:fixed; sans scroll horizontal

Résolu
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 - 8 juin 2009 à 12:48
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 - 9 juin 2009 à 12:06
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 voudrais qu'elle reste visible et donc fixe, losque je scroll ma page verticalement mais pouvoir voir le contenu de cette meme div lors d'un scroll horizontal car celle-ci n'est pas visible entierement horizontalement.

|------------------------------------------------|
|  |----------------------------------------------|----------------|
|  |                   ma div (fixed)                             |                         |
|  |__________________________________ |____________|
|                                                                        |             /\
|                                                                        |              |______ (partie de ma div non visible (cause:position:fixed;)
|                          ma page                                 |              
|                                                                        |
|                                                                        |
|                                                                        |
|                                                                        |
|____________________________________|

voila j'espere avoir été assez clair dans mes explications.

Merci de votre aide.
A voir également:

12 réponses

Réponse 1 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
9 juin 2009 à 12:06
Bonjour,
j'ai trouvé la réponse à mon probleme :

mettre la div en position:absolue;
ajouter ce javascript qui "deplace" ma div seulement de maniere vertical :

<script type="text/javascript">

function move_calendrier()

{

var Y = document.body.scrollTop;

document.getElementById("div_calendrier").style.top=Y;

}

</script>

(pour un deplacement horizontal :
          var X = document.body.scrollLeft;
          document.getElementById("div_calendrier").style.left=X;)

et le body :

Voila si ca peut aider quelqu'un ...
1
Réponse 2 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 12:52
je refais mon schema (désolé) :

|-------------------------------------|
|  |-----------------------------------|----------------|
|  |                   ma div (fixed)             |                        |
|  |__________________________ |____________|
|                                                        |             /\
|                                                       
|              |______ partie de ma div non visble
|                          ma page                 |                             
(cause:position:fixed;)
|                                                        |
|                                                        |
|                                                        |
|____________________________|


Merci de votre aide.
0
Réponse 3 / 12
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 15
8 juin 2009 à 13:00
Bonjour,

position:fixed, c'est génial, et ça permet de "déplacer"
    un élément, de le laisser au même endroit relatif,
    y compris en cas de scroll ( horizontal et/ou vertical )
mais bon... c'est la position du coin en haut à gauche de cet élément
    qui "bouge"
    et rien d'autre ( pas la taille ou quoi que cela soit ! )
t'es sûr que sans scroller, ton élément est TOTALEMENT visible ?
si non, au scroll... ce sera pareil
ou alors.. j'ai rien compris ?

Cordialement
0
Réponse 4 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 14:39
merci de me repondre bul3,

en faite ma div est trop large en haut pour tout afficher du coup j'aurais besoin de pouvoir scroller horizontalement sans que la div ne bouge pour pouvoir voir le reste de ma div, mais qu'elle se "deplace" verticalement quand je scrolle verticalement seulement.

je sais pas si je suis clair ... sinon je peux te passer le code ce sera peut etre plus simple ...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 14:51
voila le code en simplifié :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>

<style type="text/css">
.le_calendrier{
    border-width: 1px;
       border-style: solid;
       border-color: #000000;
    background-color: #AEFAEF;

    width:3500px;
    height:20px;
    position:fixed;
    z-index:5;
}

</style>
</head>

Janvier,Fevrier,Mars,Avril,Mai,Juin,Juillet,Aout,Septembre,Octobre,Novembre,Decembre=> 2001 puis Janvier,Fevrier,Mars,Avril,Mai,Juin,Juillet,Aout,Septembre,Octobre,Novembre,Decembre =>2002 puis Janvier,Fevrier,Mars,Avril,Mai,Juin,Juillet,Aout,Septembre,Octobre,Novembre,Decembre 2003

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
0
Réponse 6 / 12
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 15
8 juin 2009 à 15:03
>>je sais pas si je suis clair ...
je ne sais pas... mais j'ai pas compris moi !
et.. tu as lu ce que je disais ? je ne crois pas !!!!

>>ma div est trop large en haut pour tout afficher du coup
>>j'aurais besoin de pouvoir scroller horizontalement sans que
>>la div ne bouge pour pouvoir voir le reste de ma div,
justement !
et : meuh.....
2 chose position:fixed, je t'ai expliqué,
après tu veux adapter quoi à la taille de quoi ? ( et position:fixed,
c'est la position !!! pas la taille !!!! )
sans oublier que le redimensionnement des fenêtres
ce n'est autorisé que si on le permet !!
0
Réponse 7 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 15:33
oui oui j'ai bien lu ton premier message,

j'ai envoyé le code (voir plus haut) pour que tu vois mon souci ....
pour repondre a tes questions :

=> "t'es sûr que sans scroller, ton élément est TOTALEMENT visible ?"
- Non justement dès le debut je ne vois pas toute ma div d'où l'intérêt de pouvoir scroller horizontalement et effectivement comme tu le dis au scroll c'est pareil le div se "deplace avec le scroll donc impossible de voir le reste de ma div  .

=>"ça permet de "déplacer"    un élément, de le laisser au même endroit relatif,     y compris en cas de scroll ( horizontal et/ou vertical )"
- Si cela signifie que position:fixed; ne peut rester "sans bouger" pour aucun  scroll (horizontal ou vertical ) et donc que l'utilisation de position:fixed; n'est pas la bonne solution, aurais tu un conseil à me donner ?

Merci de tes reponses.
0
Réponse 8 / 12
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 15
8 juin 2009 à 15:45
>>donc que l'utilisation de position:fixed; n'est pas la bonne solution,
je répète ? position:fixed s'occupe de la position d'un élément dans la page
pas du tout de sa taille, ni de la taille de la fenêtre !!!!
>>aurais tu un conseil à me donner ?
adapter la taille au contenu ! mais comme déjà dit :
sans oublier que le redimensionnement des fenêtres
ce n'est autorisé que si on le permet !!
0
Réponse 9 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 16:00
Je n'ai jamais souhaité changer la taille de ma div ni celle de ma fenetre, juste permet un scroll horizontal tout en gardant les caracteristiques de position:fixed; pour le scroll vertical (a savoir un simple deplacement verticale uniquement), étant donné que ceci n'est pas possible, je vais essayer de trouver une autre solution car comme le montre mon code je ne peux pas changer l'organisation de ma div ni meme sa taille par la meme occasion.

Merci comme meme de tes réponses.
0
Réponse 10 / 12
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 15
8 juin 2009 à 16:18
>>un scroll horizontal tout en gardant les caracteristiques de
position:fixed;
???? navré..... je ne comprend plus rien ????
position:fixed c'est horizontal ET vertical
>>pour le scroll vertical...étant donné que ceci n'est pas possible
c'est bien ce que je dis... je ne comprend plus rien

je répète néanmoins : position:fixed ne s'occupe que de la position
de l'élément. pas de sa taille.
si cette taille dépasse celle de la fenêtre ( ou du conteneur )
soit laisser l'utilisateur scroller,
soit mettre la taille en %,
soit adapter la taille du conteneur à son contenu
soit...
ne comprenant pas ce qu'il faut.... surtout compte tenu de :
>>je ne peux pas changer l'organisation de ma div ni meme sa taille par la meme occasion
je ne peux guère aider plus !!!!! ( si on ne peut rien adapter, il ne reste
qu'à laisser l'internaute scroller si nécessaire !)
0
Réponse 11 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 16:42
Effectivement j'ai l'impression que l'on ne se comprends pas.
As tu regardé et affiché le code que j'ai posté ?

>> position:fixed c'est horizontal ET vertical
- Je vais donc abandonné position:fixed;

>>soit laisser l'utilisateur scroller, soit mettre la taille en %,soit adapter la taille du conteneur à son contenu
- Ce que je souhaite faire c'est effective de laisser l'utilisateur scroller, cependant ma div contient des mois avec leurs jours sur plusieurs années (voir code)  afin de pouvoir effectuer un media planning  ainsi le contenu de ma div ne peut pas etre reduit  ou organiser d'une autre manière:
 
             juin   2009               juillet 2009                   Aout 2009         etc ...      } ma div
       |1 2 3 4 5 6 ... 30 | 1 2 3 ... 28 29 30 31 |  1 2 3 4 5 ... 30 31 | etc ...         } ma div
  A  |      X X X X
  B  |                                        X X X X
  C  |                                                                                        XXXXXXXXX
  D  |                     XXXXX
etc...
Ainsi un scroll horizontal est utile pour pouvoir consulter les autres mois et années de ma div mais dans le cas ou je souhaiterais consulter vers le bas de ma page il faudrait que cette div de mois "se deplace" avec mon scroll vertical, pour y associer mes dates avec mes taches (Y et Z par exemple) d'où mon :
>>"je ne peux pas changer l'organisation de ma div ni meme sa taille"
0
Réponse 12 / 12
ghost_of_prog Messages postés 31 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 9 juin 2009 2
8 juin 2009 à 16:43
le schema :
 
             juin   2009               juillet 2009         | etc ...      } ma div
       |1 2 3 4 5 6 ... 30 | 1 2 3 ... 28 29 30 31 | etc ...         } ma div
  A  |      X X X X
  B  |                                        X X X X
  C  |         XXXXXXXXX
  D  |                     XXXXX
etc...
0
Rejoignez-nous