Discussion :

[EnZZoooOOO]

Bonjour tout le monde,

J'ai un petit soucis, j'ai une DIV en position relative pour la remonter.

J'arrive bien a la placer où je veux mais par contre à l'ancien endroit de la DIV il y a un espace vide de la dimension de celle déplacée. Comment puis je faire pour supprimer cette espace vide ?

Pour résumer :

DIV RELATIVE (nouvelle position)
TEXTE
DIV RELATIVE (VIDE) C'est cette ligne que je ne veux plus voir
TEXTE

Merci d'avance

CSS de la 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
15
DIV{
	box-shadow:1px 1px 1px 1px rgba(4, 4, 4, 0.35);
	position:relative;
	display:block;
	width:240px;
	border-radius:0.2em;
	text-align:center;	
	bottom: 200px;
	right: 100px;
	background-image: linear-gradient(bottom, #ffffff 50%, #ff2626 50%);
	background-image: -o-linear-gradient(bottom, #ffffff 50%, #ff2626 50%);
	background-image: -moz-linear-gradient(bottom, #ffffff 50%, #ff2626 50%);
	background-image: -webkit-linear-gradient(bottom, #ffffff 50%, #ff2626 50%);
	background-image: -ms-linear-gradient(bottom, #ffffff 50%, #ff2626 50%);
}

Merci d'avance....

[rodolphebrd]

Bonjour et bienvenue,

pouvez-vous poster votre code HTML (ou une page en ligne) car il n'est pas évident de situer le problème avec ce que vous présentez.

[edit] salut Torgar

[Torgar]

Donne ta structure HTML aussi.

Met avis que cela vient de la déclaration CSS.

[edit] Salut rodolphebrd

[EnZZoooOOO]

Voici un extrait du code :

Code html :

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
      <tr>
          <td>
             <div class="arrondi_compteur">
                   <span class="compteur_title">Offre spéciale limitée</span><br>
                   <span align="right" id= "countdown" type="text" disabled="disabled" class="boldText" size="28"></span><br>
                   <span align="right" class="note" id= "note"></span><br>
            </div>
          </td>
      </tr>
 
      <tr>
        <td class="main"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); 
        .......
        .......
    
       </td>
    </tr>

[Torgar]

Heu je comprends pas là

C'est la <div> dans la <table> que tu souhaites mettre en relative pour la faire sortir de la <table> ?

Si oui, pourquoi la mettre dans la <table>

[EnZZoooOOO]

Et bien en fait c'est la DIV que je souhaite positionner ailleurs sans qu'elle occupe une place vide sur son ancienne position..

Voir pièces jointes.

Merci pour l'aide

[rodolphebrd]

Alors position absolue.

[EnZZoooOOO]

Effectivement position absolu régle bien le problème mais l'objet ne reste pas au bon endroit lorsque l'on redimensionne la fenêtre

Une astuce ?

Encore merci

[JérémieL]

Effectivement, quand un élément est positionné en relatif, la position des éléments voisins dans le flux n'est pas modifiée : c'est comme s'ils considéraient que l'élément est toujours à sa position initiale. D'où l'espace que tu constates à son emplacement initial.

La solution est donc de sortir l'élément du flux, en utilisant un positionnement absolu, comme dit justement par rodolphebrd. Dans ce cas, il va être positionné relativement au premier élément ascendant positionné. Si l'objet ne reste pas au bon endroit quand tu redimensionnes la fenêtre, c'est parce que l'élément ascendant qui doit servir de référence n'est pas positionné.

Par rapport à quoi veux-tu le placer ? Trouve l'élément ascendant qui doit servir de référence et, s'il ne l'est pas, positionne-le (relativement, afin qu'il ne bouge pas de sa place).

[EnZZoooOOO]

Et bien, je souhaiterais le positionner par rapport à la balise body, quel est la syntaxe pour le faire ?

Comment puis déclarer un autre élément ascendant de référence que body svp ? par exemple par rapport a une balise img nommée : image ou autre ?

J'ai essayé ce code (cela ne fonctionne pas):

Code :

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

1
2
3
html>body .arrondi_compteur {
  position: fixed;
}

Merci pour votre aide

[EnZZoooOOO]

En cherchant un peu, j'ai trouvé

Voici ce que j'ai fait :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="conteneur">
                <div id="reference" class="reference">
 
                   <div id="div_absolu" class="div_absolu">  
                       <div id ="arrondi_compteur" class="arrondi_compteur">
                          <span class="compteur_title">Offre spéciale limitée</span><br>
                          <span align="right" id= "countdown" type="text" disabled="disabled" class="boldText" size="28"></span><br>
                          <span align="right" class="note" id= "note"></span><br>
                       </div>
                   </div>
                </div>
</div>

Pour ceux qui cherche : la DIV référence est en relative et la div_absolu en .. absolute.

J'ai placé la div référence à un endroit bien spécifique et j'ai ensuite joué sur les valeur top et left de la div_absolu pour la positionner. Le positionnement c'est alors fait par rapport à la div reference et non plus part rapport à la fenêtre.

Merci tout de même de corriger si j'ai dit des bêtises.

Encore merci pour votre aide.