Discussion :

[Pouknouki]

Bonjour,
J'ai des formulaires qui doivent être montrés ou cachés quand on clique sur une image. Ca fonctionne. Seulement, ils doivent aussi être centrés horizontalement et placés à 70% du haut. Comment faire ? Quand j'arrive à les centrer, ils ne sont plus à 70% et vice-versa !
Merci

[NoSmoking]

Bonsoir,
le minimum que tu puisses faire et de nos montrer la structure ainsi que le CSS associé.

placés à 70% du haut

cela dépend de quel haut on parle, surtout si il y a scroll de la page.

[Pouknouki]

Salut !
Qu'est ce que tu entends par 'La structure' ?
Pour le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.formulaire
{
position: absolute;
top: 70%;
}
.formulaire2
{
position: absolute;
top: 81%;
}
form
{
margin: auto;
}

Il y a formulaire et formulaire2 parce que à un moment il y en a deux sur la même page. Si tu veux voir à quoi ressemble la page :
http://www.citrik-digital.net/xsubu/show/general.php
Quand tu cliques sur une image, un cadre apparaît (ou deux si tu cliques sur la première image). Il faudrait que ces cadres soient centrés.

[NoSmoking]

englobes tes FORM dans une DIV conteneur à laquelle tu affectes text-align:center, ensuite tu mets tes FIELDSET en display:inline, cela les forcera à n'occuper que la place nécéssaire.

La structure sera donc

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="form_conteneur">
  <form>
    <fieldset>
       <label><input></label>
    </fieldset>
  </form>
  <form>
    <fieldset>
       <label><input></label>
    </fieldset>
  </form>
</div>

[Pouknouki]

Non, ça ne fonctionne pas du tout, mes form ne sont pas centrées.

[miss_socrates]

J'essaierais de placer le formulaire1 et le formulaire2 dans 2 div différentes et de centrer les div par

Code :

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

1
2
3
div{
margin: auto;
}

et pour les placer à 70% du haut, il faut indiquer les dimensions de la page sinon 70% tout seul ne signifie pas grand chose (70% de quoi?)

Code :

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

1
2
3
4
5
6
7
8
 
body{
width: 900px;
height: 600px;
}
div1, div2{
margin-top: 70%;
}

[Pouknouki]

Quand je dis 70%, c'est 70% de la page... (Pour que ce soit toujours à 70% de l'écran). Jusqu'à là ça marchait

[miss_socrates]

D'après ce que j'ai pu voir via le lien vers la page, les formulaires sont bien dans le tiers/quart inférieur de la page, donc cela semble correct pour les 70%.
Pour le centrage, il y a différents soucis:
- pour Réinitialisation, le formulaire est bien centré.
- Par contre, pour Dossier d'Upload, le formulaire est à gauche (n'y a-t-il pas un float: left quelque part à supprimer?
- Et pour le lien Identifiants, il semble y avoir 2 formulaires qui se chevauchent, donc souci plus important. Mais là il faudrait examiner le code sinon impossible à dire d'où vient le souci.

[fab256]

Il faut mettre les form dans un unique DIV

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="form-container">
<form style="" id="formusername" ...>  
...
</form>
<form id="formpassword" ...>  
...
</form>
<form id="formdossier" ...>
...
</form>
<form id="formreinit" ....>  
	...
</form>
</div>

et ajouter ces 2 nouvelles regles

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#form-container {
width : 100%;
top : 70%;
position : absolute;
}
 
form
{
margin: 0 auto;
width: 600px;
position: relative;
}

et supprimer ces deux regles

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.formulaire
{
/*
position: absolute;
top: 70%;*/
}
 
.formulaire2
{
/*position: absolute;
top: 81%;*/
}

[Pouknouki]

Resalut,
Finalement, j'ai contourné le problème, si tu veux voir le résultat :
http://www.citrik-digital.net/xsubu/show/general.php

[fab256]

C'est bon! tu peux mettre résolu pour fermer la discussion.

[miss_socrates]

Non ce n'est pas résolu du tout. Que du contraire !
Maintenant non seulement les formulaires ne sont plus centrés horizontalement ni à 70% mais ils sont centrés verticalement (comme si on avait employé vertical-align ) et alignés à gauche mais -- et surtout -- ils s'affichent au-dessus des boutons liens et sont donc inutilisables et impossibles à compléter.
Ceci testé sur Chrome.

[Pouknouki]

C'est un quelle taille ton écran ?

[miss_socrates]

Un portable de 15,5 pouces. Mais ce n'est pas cela le problème si les formulaires se chevauchent ce n'est pas un problème de taille d'écran mais de codage. Je serais curieux de voir le code source.

[Pouknouki]

C'est bizarre parce que chez moi tout fonctionne parfaitement. Si tu veux fermer un formulaire tu as une croix en haut à droite

[miss_socrates]

Maintenant ça fonctionne sous Chrome et Firefox, par contre sous IE9 les images liens ne s'affichent pas et elles sont alignées verticalement et à gauche et non horizontalement