Discussion :

[deldin]

Bonjour,

Dans ma page j'ai deux éléments. je voudrais que le second soit tout le temps positionné juste en dessous du premier, sachant que la position du premier n'est pas fixe dans la page.

voila un extrait du code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="formPave" style="width: 95%;">
<div class="formChamp" id="champAff" style="">
  <span class="formChamp">Ancienne valeur</span>
  <span class="formChamp"><input class="normal" name="champ" value="" size="30" style="" id="champ" type="text"></span>
</div>
<ul class="Ressuggest" id="Reschamp" style="position: absolute; visibility: hidden; display: none; height: 0px;">
  <li class="lisuggest"><b>coucou</li>
</ul>
</div>

et un bout de la 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
.normal {
    padding:1px;
    border: #7093DB;
    font-size: 12px;
    color: #336699
}
 
.formPave {
    float: left;
    font-size: 11px;
    background-color: #DCF0FF;
    color: #336699;
    margin-bottom: 15px;
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
}
 
.formChamp {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 95%;
}
 
.Ressuggest {
    color:white;
    background-color:#FFFFFF;
    width:196px;
    list-style-type:none;
    text-align:left;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
 
#Reschamp {
    position:relative;
    top:10px;
}
 
li.lisuggest {
    background-color:#FFFFFF;
}

je voudrais donc positionner "reschamp" juste en dessous de "champ". mais apparemment je m'y prends mal...
est-ce que quelqu'un aurait une solution (qui fonctionne sous IE et Firefox) ? ou peut-être que ce n'est pas possible ?
merci d'avance

[MasterOfChakhaL]

Code :

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

1
2
3
4
5
<ul class="Ressuggest" id="Reschamp" style="position: absolute; visibility: hidden; display: none; height: 0px;">
  <li class="lisuggest"><b>coucou</li>
</ul>
</div>

Code :

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

1
2
3
4
5
#Reschamp {
    position:relative;
    top:10px;
}

pour commencer, tu as un conflit dans la définition de tes styles...
le style en ligne (attribut style dans le corps du html) sera prioritaires sur les règles définies dans un css externe

Je te conseille d'essayer de tout mettre dans le css externe, ensuite on verra ce qu'on peut faire si tu n'arrives pas à résoudre ton problème

un élément positionné en relatif, l'est par rapport au parent, dans ton code, il me semble que les deux sections concernnées ont une relation frère au lieu de parent-enfant.

Si tu veux juste introduire un espacement, tu peux peut être utiliser la règle padding-top sur ton ul pour lui dire qu'il doit insérer tant de pixel au dessus...