Discussion :

[Amnael]

Bonjour,

j'ai un bouton de type submit qui à l'heure actuelle est centré en bas de ma page.

Je voudrais changer ça, et lui dire de se mettre complètement à droite de la page mais en restant au milieu de l'écran (verticalement parlant) et donc si on scroll la page vers le bas je voudrais que le bouton suive également le scroll.

Je me rappelle avoir déjà fait ceci mais je ne me rappelle plus des propriétés css à mettre en place

Merci à vous !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input type="image" title="Previous" style="background-color:black;display: block;margin : auto;" src="file: left.png" name="Previous" />
<input type="image" title="Next" style="background-color:black;display: block;margin : auto;" src="file: right.png" name="Next" />

Le css est inline car généré par un soft directement dans le html.

[Invité]

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#left { 
  position:absolute;
  left:0;
  top:50%;
  margin-top:-50px; /*demi-hauteur*/
  height:100px; 
}
#right { 
  position:absolute;
  right:0;
  top:50%;
  margin-top:-50px; /*demi-hauteur*/
  height:100px; 
}

N.B. Pour un centrage vertical, il faut que TOUS les parents aient leur hauteur définie (en % ou px).

[Amnael]

La solution du position absolute 50% n'est pas celle que je recherche justement.


Imaginons que mon contenu fait 1000 px de haut.
Mon écran ne peut afficher que 400 px de haut (simple exemple).

Avec la solution que tu me propose.
Le bouton sera fixé à 500 px.

Mais ce n'est pas ce que je cherche.

Je veux pouvoir afficher toujours à niveau de l'écran.

Si mon écran affiche les pixel en hauteur de 0 à 400; je veux le bouton à 200 px. Si 100-500 alors je veux le bouton à 100 px etc etc.

Donc au final, ce que je cherche à faire c'est peut-être pas directement réalisable en css, mais c'est fortement lié quand même.

En gros, j'ai besoin du css pour avoir la position initiale du bouton au chargement de la page. Mais j'aimerais qu'il soit adapté non pas à moitié du contenu total mais à moitié du contenu visible. (Après derrière je me démerderais en js pour modifier les valeurs, mais je dois déjà placer le bouton au bon endroit dès le début^^)

[Invité]

Rectification : position:fixed;

Voir : http://codepen.io/jreaux62/pen/jAvPNo

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#left { 
  position:fixed;
  left:0;
  top:50%;
  margin-top:-50px; /*demi-hauteur*/
  height:100px; 
}
#right { 
  position:fixed;
  right:0;
  top:50%;
  margin-top:-50px; /*demi-hauteur*/
  height:100px; 
}

[Amnael]

Ah parfait ! C'est exactement ce que je cherchais à faire

Merci beaucoup ! Sa va me changer la vie parce que bonjour la galère en javascript pour détecter si on scroll vers le haut ou le bas =)