28172 sujets

CSS et mise en forme, CSS3

[Résolu] Zone en absolute qui se décale à l'insertion de texte

Bonjour,

J'ai une page avec la structure suivante:
-----------------------------------
Div conteneur
------ Div
image dans cette div
------ Div
Titre d’un tableau
************ Boucle
Affichage de liens sur l’image (par définition de leurs coordonnées - position: absolute;)
Ecriture d'une ligne supplémentaire au tableau
************ Fin boucle


Voici le pb: en fonction du nombre de lignes qui s'affichent dans le tableau les zones se décalent verticalement d'autant (bien qu'elles soient "en absolute") .

Sauriez-vous comment je peux faire pour que mes zones ne se décalent pas à chaque fois qu'une ligne est ajoutée au tableau?

Merci,
Modifié par soriro (16 Jan 2018 - 22:04)
Modérateur
Bonjour,

Le problème peut venir de n'importe où (erreur dans le html, erreur dans le css). Sans un exemple de code qui reproduit le phénomène, impossible de faire un diagnostic adapté.

Amicalement,
Bonjour et merci pour votre réponse.
Malheureusement le code fait plus de 300 lignes: voilà pourquoi j'en ai fait un résumé.

Mon niveau est très moyen.
Je me demande comment on fait pour compléter un tableau (en bas d'une image) en même temps que l'on affiche la zone correspondant (sur l'image) sans que le nombre de lignes du tableau conditionne la position réelle des zones.

Je pensais que la propriété "absolute" des zones permettait cela, mais force est de constater que ce n'est pas le cas. On dirait que chaque texte ajouté décale le "point zero de l'asolute".
Si vous avez une idée à ce stade, n'hésitez pas. Sinon, je vais essayer de simplifier au maximum le code pour qu'il soit présentable.

Cdlt,
Modérateur
Bonjour,
soriro a écrit :

Je me demande comment on fait pour compléter un tableau (en bas d'une image) en même temps que l'on affiche la zone correspondant (sur l'image) sans que le nombre de lignes du tableau conditionne la position réelle des zones.

Je pensais que la propriété "absolute" des zones permettait cela, mais force est de constater que ce n'est pas le cas. On dirait que chaque texte ajouté décale le "point zero de l'absolute".

Il faut en premier lieu vérifier que le html généré est bien celui attendu. Ne manque-t-il pas des balises fermantes ?

Il faut aussi faire attention à ce que le parent par rapport auquel on veut se positionner ait au minimum un position:relative dans le css.

Ensuite, en utilisant les propriétés css left et top (ou éventuellement right et bottom), on ne doit pas avoir de problème pour positionner les zones à l'endroit souhaité.

Amicalement,
Merci pour ces explications claires.
1/ Je vais revérifier les balises fermantes.

2/ Par contre, je n'ai pas de "parent", pas non plus de "relative":
- j'ai un premier div qui affiche l'image. Puis mon div, qui affiche les liens sur l'image et le tableau (en dessous de cette image), n'a pas de propriété de positionnement.

Y a-t-il quelque chose à travailler pour ce dernier point?

Merci,
Modérateur
soriro a écrit :
Par contre, je n'ai pas de "parent", pas non plus de "relative":
- j'ai un premier div qui affiche l'image. Puis mon div, qui affiche les liens sur l'image et le tableau (en dessous de cette image), n'a pas de propriété de positionnement.

Y a-t-il quelque chose à travailler pour ce dernier point?

Il y a toujours un parent.

Ceci dit, je ne suis pas sûr d'avoir compris la structure de ton html, pas plus que ce que tu essaies de faire Smiley smile .

Je devine que tu as une balise <img> à l'intérieur d'une première <div>, que tu as des liens <a> à l'intérieur d'une deuxième <div>, mais que tu cherches à afficher ces liens sur l'image. Tu as ensuite un tableau, probablement dans une balise <table> avec une série de lignes. J'ai d'autre part une algorithme que tu décris dans ton message initial dont on ne sait pas comment il est exécuté (est-ce réalisé en javascript ? en php ? ...).

Ton algorithme peut éventuellement produire ça en html (mais faut déjà pas mal bricoler) :
<div>
    <img src="img1.png">
</div>
<div>
    <a href="a.html">Vers a</a>
    <a href="b.html">Vers b</a>
    <a href="c.html">Vers c</a>
</div>
<table>
    <tr><td>Ligne 1</td></tr>
    <tr><td>Ligne 2</td></tr>
    <tr><td>Ligne 3</td></tr>
</table>

Si c'est ça, l'ancètre commun à l'image et aux liens est la balise <body>.

Amicalement,
J'ai passé 4 heures supplémentaires, mais je ne trouve pas de piste.

1/ Pour expliquer ce que je veux faire, voici un lien: https://codepen.io/gc-nomade/pen/wJXGWp
Une "zone lien" en bleu s'affiche sur une image. Si tu ajoutes un mot avant </nav> tu vois que la "zone lien" se décale d'une ligne vers le bas. C'est ce que je veux éviter.

2/ L’algorithme que tu présentes correspond effectivement à ce que j'ai réalisé. Les "zones liens" et les lignes du tableau sont affichées sous conditions (issus d'une base de données excel).

Merci
Modifié par soriro (17 Jan 2018 - 23:21)
Modérateur
Bonjour,

Dans l'exemple codepen que tu donnes, la position du <a> est calculée en % de la taille du parent. Si tu insères des éléments (qui ne sont pas en position:absolute) dans le parent, sa taille change et donc ça change aussi la position du <a>.

Amicalement,
Je crois comprendre mais ... pas vraiment.
Déjà un grand merci pour ce qui semble bien être le pb. Cela explique pourquoi parfois en "jouant" avec les div, je m'affranchissais du pb.
Il faut que je définisse les positions de mes zones en pixel par exemple (j'ai essayé rapidement de remplacer les % par des "px" mais mes zones ne veulent plus se superposer à l'image en restant dans le coin bas, surement un pb de div)? A moins que je puisse insérer le texte de mon tableau en absolute?
Je vais faire des essais demain.
Merci encore.
Modifié par soriro (18 Jan 2018 - 10:59)
Bonjour,

Je viens clôturer ce fil de discussion.
Pour régler mon problème et fort du renseignement très judicieux de Parsimonhi (que je ne remercierai jamais assez), j'ai sorti l'affichage du tableau du div parent (après avoir essayé en vain de le rendre "absolute"). Vu mon niveau j'ai un peu galéré, mais c'est fait: la dimension de mon affichage ne change plus en fonction des résultats à afficher.

Merci,
Modifié par soriro (25 Jan 2018 - 15:22)
Sujet clos
Aller à