Garder les mêmes réglages de positions de div lors du développement

Bonjour,

J'ai un div carré, et autour de celui-çi 4 autres qui représentent des flêches et qui sont centrés sur le carré principal.

Positionner tous ces div avec des position: absolute et des top/left n'est pas difficile. Par contre lors de la mise au point de ma page, dès que je modifie la taille du carré je dois recalculer tous les offsets de mes flêches.

Je vois bien une solution en js en récupérant la taille du carré et en calculant la position automatiquement, mais ça me semble un peu lourd.

Y a t'il une solution en CSS ?


Merci de votre aide.

Frédéric

Bonjour,

Je pense que si tu pouvais fournire un peu de code cela pourrai aider pas mal, car on s'y perd dans toute tes div.

Re-bonjour,

Je simplifie un peu en ne mettant que les div et pas les images qui vont dedans :

    <div id="cadre"
    style="background: blue; position: absolute; width: 500px; height: 500px; top: 100px; left: 100px;">
        <div style="background: red; position: absolute; width: 20px; height: 20px; top: 0px; left: 240px;"> </div>
        <div style="background: red; position: absolute; width: 20px; height: 20px; top: 240px; right: 0px;"> </div>
        <div style="background: red; position: absolute; width: 20px; height: 20px; bottom: 0px; left: 240px;"> </div>
        <div style="background: red; position: absolute; width: 20px; height: 20px; top: 240px; left: 0px;"> </div>
        <div style="background: green; position: absolute; width: 400px; height: 400px; top: 50px; left: 50px;"> </div>
    </div>

Si le div "cadre" change de taille, je dois recaluler tous les offsets.
Je précise bien, ce n'est pas pour avoir une page dynamique, l'utilisateur ne va pas modifier la taille du cadre; c'est juste lors de la mise au point du design.

Frédéric

Est-ce qu'il ne serait pas possible de positionner les blocs ainsi?

div#cadre {position: relative;}
div#haut {position: absolute; top: 0; left: 50%; margin-left: -10px;}
div#bas {position: absolute; bottom: 0; left: 50%; margin-left: -10px;}
div#gauche {position: absolute; left: 0; top: 50%; margin-top: -10px;}
div#droite {position: absolute; right: 0; top: 50%; margin-top: -10px;}

Après test, ça marche dans Firefox2, Opera9 et IE6.

C'est presque bon.

Avec les 50%, ce sont les coordonnées d'origine (top, left) qui sont centrées, je voudrais que ce soit les coordonnées du centre.

Frédéric

frederic_dumoulin a écrit :
Avec les 50%, ce sont les coordonnées d'origine (top, left) qui sont centrées, je voudrais que ce soit les coordonnées du centre.

D'où l'utilisation des marges négatives, non?

div#cadre {position: relative;}
div#haut {position: absolute; top: 0; left: 50%; [b]margin-left: -10px;[/b]}
div#bas {position: absolute; bottom: 0; left: 50%; [b]margin-left: -10px;[/b]}
div#gauche {position: absolute; left: 0; top: 50%; [b]margin-top: -10px;[/b]}
div#droite {position: absolute; right: 0; top: 50%; [b]margin-top: -10px;[/b]}

Modifié par Florent V. (07 Aug 2007 - 16:17)

Bien sûr, les marges négatives permettent d'être indépendant de la taille du cadre, mais on garde une dépendance sur la taille des div haut, bas gauche et droite !

frederic_dumoulin a écrit :
Bien sûr, les marges négatives permettent d'être indépendant de la taille du cadre, mais on garde une dépendance sur la taille des div haut, bas gauche et droite !

Heu... je ne suis pas sûr de te suivre, là.
Tu veux dire que tu ne sais pas à l'avance quelles seront les dimensions des quatre blocs à caser sur chaque bord?
Si c'est le cas... well, you're screwed. À ma connaissance, il n'y a pas de moyen pour centrer un élément positionné en absolu si tu ne connais pas les dimensions de cet élément. Bien sûr, on peut toujours partir sur des dimensions estimées, puis récupérer les dimension réelles via Javascript et corriger le tir, je suppose.

Sinon, restent les marges automatiques (sur un élément non positionné en absolu) pour le centrage horizontal et le vertical-align: middle dans une cellule de tableau pour le centrage vertical.