[CSS 2] Compréhension de Position:relative

[dragonfly]

Bonjour à tous,

peut-être que le probléme a déja été soulevé mais je n'ai rien trouver qui correspond à mon probléme.

En gros, j'ai une div dans laquelle j'ai 3 objets, chacun d'eux est en position:relative, or pour chacun d'entre eux la position démarre de la div.

Les positions relatives ne servent-ils pas justement à positionner par rapport au dernier objet créé?

Voici mon code :

Code :

1
2
3
4
5
6
 
<div id="formIndivInsc" class="">
<span class="formIntextInsc"> Formulaire d'inscription</span>
<span class="formIntextLogin"> Login</span>
<input type="text" class="formInloginInsc" id="formInloginInsc" name="formInloginInsc" value="" />
</div>

Avec le CSS suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
span.formIntextInsc { 
left: 15px;
position: relative;
top: 10px;
 }
 
span.formIntextLogin { 
left: 10px;
position: relative;
top: 25px;
 }
 
input.formInloginInsc { 
left: 10px;
position: relative;
top: 0px;
 }

Sur cet exemple, l'input formInfologinInsc devrait être à coté du texte mais il se positionne en haut de la div (d'ailleurs il n'ay que le paramétre top qui agit bizarrement, pour le left, il se trouve bien a 10 px du texte).

Aurais-je mal compris le fonctionnement du position:relative?

Merci

[jreaux62]

Envoyé par dragonfly

Aurais-je mal compris le fonctionnement du position:relative?

Bonjour,
non seulement une mauvaise compréhension, mais surtout une mauvaise utilisation du CSS et de la balise <span>.

Essaie plutôt avec les "bonnes" balises (et sans ton css) :

Code html :

1
2
3
4
5
6
<div id="formIndivInsc" class="">
<p class="formIntextInsc"> Formulaire d'inscription</p>
<p><label for="formInloginInsc" class="formIntextLogin"> Login</label>
<input id="formInloginInsc" class="formInloginInsc" name="formInloginInsc" type="text" value="" />
</p>
</div>

=> Personnalisation d'un formulaire XHTML avec CSS

[dragonfly]

Bonjour et merci pour ta réponse.

Je vais essayer modifier comme ca, par contre pourquoi tu parles de mauvaise utilisation du <span>, il sert bien à afficher du texte avec une classe, non?

[Emyleen]

Bonjour,

Je penses qu'il voulait dire que les balises que tu utilises ici ne sont pas adapté à l'usage que tu veux en faire

Pour un formulaire il vaut mieux utiliser les balises <form> et ses intrinsèques qui permettent de gérer le passage de données