28172 sujets

CSS et mise en forme, CSS3

Position:fixed ! !

Salut tout le monde,
cela fait plusieurs jour que je tourne sur ça..
d'abord là ou j'en suis:
http://www.stephanekouchian.com/test/index2.html

Actuelement le menu est en position:fixed top:"500px"

Ce que j'aimerais c'est avoir la possibilité pour le menu de remonter à 400px maximum si la page est rétréci.
En fait ce qu'il y a en ligne me va parfaitement mais j'ai essayé le site sur un petit écran, le menu n'est pas accessible, (car le menu est en position:fixed)

Je ne sais pas si je suis trés clair..en fait j'aimerais que mon menu puisse évoluer entre 400 et 500 pixel en verticale, mais j'aimerais qu'il reste fixe lorsque l'on scroll horizontalement...
Smiley lol Smiley decu Smiley confus

Merci d'avance !
Modifié par lambdaka (12 Apr 2010 - 20:18)
C'est vrai, ça va mieux avec le .com Smiley biggrin

Le menu en question c'est Login / Contact / Booklet ou la liste de contacts située au dessus ?
oui le menu en question
c'est "Login / Contact / Booklet +logo " en bas a gauche. (en fait tout ce qui est en fixed)

je voudrais qu'il fasse pareil qu'en ce moment (fixed lors du scroll horizontale) mais que lorsque l'on retrecit la page sur la hauteur, le "menu" puisse monter de 100 pixels maximum, il se retrouvera alors par dessus les images lors d'un scroll horizontale, mais ce n'est pas du tout un problème, au contraire..

je crois que en gros je voudrais un fixed en horizontale et un absolute en verticale ! !
Sinon les petits ecrans ne verront pas le menu... Smiley bawling
lambdaka a écrit :
on peut pas editer les posts...?
si si, en cliquant sur le bouton éditer…

Premier principe, si ton menu est en posistion fixe il ne pourra pas bouger (c'est assez logique puisque c'est précisement ce qu'on lui demande)
Second principe, on ne peut pas utiliser min-height ou max-height pour des marges.
Reste une solution : il faudrait que les tailles d'images soient indiquées en pourcentages, que le menu soit placé à la suite de ce bloc d'images. Il suivrait ainsi automatiquement le rétrécissement de la fenêtre. et ceci sans couvrir les images.

Avertissement : Il y a beaucoup d'images sur cette page, le calcul (pour le navigateur) risque d'être long si le vistiteur s'amuse à faire du "yo-yo" avec sa taille de fenêtre.
Ah mais j'étais pas loggé, donc j'avais pas de bouton edit...
Merci pour ta reponse.

Oui j'avais capté pour fixed, c'est ce qui m'interesse qu'il ne bouge pas avec le scroll (horizontale du moins).
Ok avec le pourcentage des images.
Je peux donc me servir de max-height ou max-width pour eviter que les images soient immenses sur les ecrans de 24 et 27 pouces..?

ensuite en mettant le menu à la suite des images, je le mets donc en relative..?
c'est ça...?

Mais là lors du scroll il va bouger avec tout le reste non...?
J'ai juste decouvert aujourd'hui les diffferentes parametres du #position:
Smiley biggrin
Smiley confus
lambdaka a écrit :
Mais là lors du scroll il va bouger avec tout le reste non...?
euuu ben oui je crois que tu as raison, en flux normal il disparaitra forcément vers la gauche. Il semble impossible de rester en "fixed" pour position horizontale et "flux courant" pour la position verticale. Si tu mettais ton menu en haut ce serait beaucoup plus simple !
Bonjour,
lambdaka a écrit :
Je ne sais pas si je suis trés clair..en fait j'aimerais que mon menu puisse évoluer entre 400 et 500 pixel en verticale, mais j'aimerais qu'il reste fixe lorsque l'on scroll horizontalement...
Ce n'est tout simplement pas possible en CSS pur (c'est une des raisons qui font qu'appliquer un positionnement fixe à une élément "vertical" n'est pas vraiment recommandé).

Il y a moyen de simuler la position fixe avec du JS (et donc de lui permettre de se déplacer légèrement) mais en général cela créé un effet de saccade très dérangeant visuellement.

La dernière solution (celle que je privilégierais) serait d'adapter ton CSS en fonction du viewport du visiteur (si viewport > 500 alors fixed 500px sinon si viewport > 400 alors fixed 400px sinon pas fixed (pour les toutes petites résolutions)). La détection du viewport se faisant en JS.
Ok,
Je vais voir de ce coté là..
Je ne sais pas pourquoi, je voulais éviter le javascript...Mais si c'est ma seule solution.

Merci
Smiley biggrin
Euh..
Est ce que tu aurais une marche à suivre pour se servir du viewport..
En théorie j'ai tout compris,
Mais je ne sais pas du tout par où commencer..
Yep,
j'avais cherché viewport javascript, à vrai dire je ne trouvais pas grand chose.. Smiley decu
Je me remet aux recherches..
Merci ! Smiley biggrin
Modifié par lambdaka (13 Apr 2010 - 14:15)
Sujet clos
Aller à