[Résolu] Calques dynamiques

Bonjour,

Je voudrais savoir comment faire pour obtenir des calques dynamiques ?

Je m'explique : sur mon site j'ai un calque central en position absolue (pour contenir le texte). Dans celui-ci, j'ai 6 calques (en position relative) qui représente chacun un article.

Les contenus pouvant varier en taille, j'aimerais que si le texte du 1er calque article s'allonge, que le 2ème calque article change de position de s'ajuste en fonction du premier.

Pour l'instant j'ai le texte du premier qui s'affiche par dessus le deuxième, c'est pas gagné !!

Je suis vraiment perdue. Quelqu'un aurait une solution ?
Merci à vous.

Taly
Modifié par Taly (27 Dec 2005 - 16:06)

un float:left sur tes <div> interieurs peut etre

non je viens d'essayer ca ne fonctionne pas...

Hello Taly et bienvenue

Il y'a plusieurs choses qui me paraissent obscurs :
- pour commencer l'intérêt de l'emploi des positions absolues et relatives dans ton cas. Pourquoi ces choix ?
- ton utilisation du mot "calque" semble montrer qu'il y'a des lacunes dans l'apprentissage des CSS. Qu'appelles-tu "calques" ? Quel utilité pour baliser des articles ?
- les éléments ne s'affichent les uns par dessus les autres que lorsque tu les sors du flux normal (par exemple en les positionnant comme tu l'as fait). As-tu les connaissances minimales nécéssaires en termes de positionnement CSS ?

Dans tous les cas, merci, comme les Règles t'y invitent, de proposer un exemple en ligne ou une partie de code.

PS : n'oublie pas de relire la Méthodologie à lire absolument avant de poster dans ce salon

C'est vrai que je débute avec l'utilisation des CSS.

Quand je parle de calque il s'agit de <div>.
Je les utilise afin de monter des pages html sans tableaux (j'ai lu le tuto à ce sujet : Construire un site sans tableaux).
J'utilise un <div> par article car dans chacun d'entre eux il y a un titre, un auteur, une date et un trait de fin d'article qui marque aussi une séparation avec l'article suivant.
J'ai également consulté la "Méthodologie pour résoudre les problèmes d'affichage en CSS" mais ça n'a pas résoulu mon problème.

pardon j'ai oublié de mettre un bout de code ! Le voici...

<!-- Début du calque Introduction -->
<div class="ZoneIntroduction">

<div class="ZoneSeparLigneRouge1"></div>

<!-- Début du calque comportant le texte d'introduction -->
<div class="ZoneTexteIntro">En 2004 l'espérance de vie en France franchit le seuil de 80 ans gagnant ainsi 10 mois en deux ans ! 
<div class="ZoneSeparLigneRouge2"></div>

<!-- Début de l’article 1 -->
<div class="ZoneConference1">
<div class="ZoneConfVisuel"><img src="dynamic/images/cycle/visuel_ameisen.jpg"></div>
<div class="ZoneConfDate">MERCREDI 5 OCTOBRE 2005, 18h30</div>
<div class="ZoneConfBouton"><img src="static/images/btn_fleche_rouge.gif"></div>
<div class="ZoneConfTitre">Pourquoi vieillissons-nous ?</div>
<div class="ZoneConfIntervenant">Jean-Claude Ameisen,</div>
<div class="ZoneConfTexte">professeur d'immunologie à l'université Paris VII</div>
<div class="ZoneSeparLigneGrise"></div>
</div>
<!-- Fin de l’article 1  -->

<!-- Début de l’article 2 -->
<div class="ZoneConference2">
<div class="ZoneConfVisuel"><img src="dynamic/images/cycle/visuel_ameisen.jpg"></div>
<div class="ZoneConfDate">MERCREDI 5 OCTOBRE 2005, 18h30</div>
<div class="ZoneConfBouton"><img src="static/images/btn_fleche_rouge.gif"></div>
<div class="ZoneConfTitre">Pourquoi vieillissons-nous ?</div>
<div class="ZoneConfIntervenant">Jean-Claude Ameisen,</div>
<div class="ZoneConfTexte">professeur d'immunologie à l'université Paris VII</div>
<div class="ZoneSeparLigneGrise"></div>
</div>
<!-- Fin de l’article 2  -->

</div>
<!-- Fin du calque comportant le texte d'introduction -->
		
</div>
<!-- Fin du calque Introduction -->

Modifié par Taly (29 Jul 2005 - 10:08)

Bonjour et bienvenue Taly

Attention, ton code n'est pas lisible ainsi, peux-tu éditer ton post et placer le code dans la balise "Code" prévue pour ça ? stp ! Comme indiqué dans les règles du forum

Merci d'avance

Taly a écrit :

J'utilise un <div> par article car dans chacun d'entre eux il y a un titre, un auteur, une date et un trait de fin d'article qui marque aussi une séparation avec l'article suivant.

Très bien.
Par contre, dans le code que tu nous montres, tu n'as rien qui indique un titre, et des paragraphes... tu n'as que des balises <div> !
Utilise les bonnes balises pour structurer ton contenu (balises <h1>, <h2>, etc. pour les titres et sous-titres; balise <p> pour les paragraphes, etc.)... sinon ton code est incompréhensible, ni pour nous ni pour toi !

EDIT : de tu as beaucoup de balises inutiles.
Par exemple :

<div class="ZoneConfBouton"><img src="static/images/btn_fleche_rouge.gif"></div>

Quelle est l'utilité d'entourer ton image d'une balise <div> ? Pourquoi ne pas simplement placer cette image à ta convenance ?

<div class="ZoneSeparLigneGrise"></div>

Pourquoi ne pas utiliser la balise faite pour cela, à savoir <hr>, puis à la redécorer comme tu veux en CSS ?

RE-EDIT : comme je te l'ai dit, seuls les éléments positionnés peuvent se superposer. Apparemment c'est le cas (même si tu ne nous montres pas ta CSS), donc il suffirait de laisser tes éléments dans le flux.
As-tu lu les tutoriels expliquant le positionnement en CSS ?
Modifié par Raphael (28 Jul 2005 - 19:51)

ok je vais faire le ménage !
merci pour vos conseils