28173 sujets

CSS et mise en forme, CSS3

Défi complexe: positionnement absolument relatif !

Bonjour à tous ! Je suis nouveau sur ce magnifique forum !

J'ai un défi assez compliquer à relever.
Je travaille sur un portail web, avec des colonnes. La colonne de droite est séparée en 3 sections, l'une sous l'autre.

Toutes ces sections doivent pouvoir s'étirer avec le texte. Au bas de la première section, je dois avoir un DIV contenant une animation flash au fond transparent. Ce DIV est positionné par dessus tout le reste car il déborde du design principal.

Ce que je dois faire c'est m'assurer que ce DIV est toujours aligné avec le bas de la première section, peu importe ce qui arrive.

Ok, maintenant je vais résumer ce que je viens de dire Smiley smile

J'ai un DIV absolu qui doit toujours être aligné avec le bas d'un DIV qui est dans une colonne. Ce doit être fait sans utiliser PHP ou Javascript.

J'ai essayé d'insérer un DIV absolu à l'intérieur d'un DIV relatif, mais ça n'a pas fonctionné, il s'est aligné avec le bas de la page.

J'espère avoir été clair... voici une image pour vous aider (en anglais, car j'ai posté ça dans d'autres forums... je suis découragé!)


http://www.webforumz.com/attachment.php?attachmentid=527&d=1170798390

Quelqu'un peut-il m'aider ?
Merci!
Oui, le dessin c'est ce que je veux. La boite grise est absolue car elle doit être par dessus tout le reste du design (souvenez vous, ça déborde en dehors du conteneur principal comme vous pouvez voir, et c'est positionné par dessus l'entête et le bas de deux DIVS qui sont, eux, relatifs) et doit TOUJOURS être positionnée au bas de la première boite, et si la première boite s'étire à cause du texte, ma boite grise doit encore être alignée avec le bas de ma section.,


Bref j'ai besoin d'un div absolu dont la position Y change selon la hauteur de ma première section dans ma colonne.

Aussi, si la réponse est si évidente, j'aurais apprécié qu'on me la donne Smiley lol
Modifié par Trollivier (06 Feb 2007 - 23:32)
Modérateur
bonsoir,

ton div relatif se devrait d'etre le premier ou le second de ta colonne.
la balise object contenant le flash enfant du relatif, dimensionné, en absolu , et en marge negative de 50% (verticale) haute ou base selon le div choisi.

Grosso modo , ce serait ma premiere demarche de code html et mise en forme.

a verifier

GC
Modifié par gcyrillus (06 Feb 2007 - 23:37)
Re salut,

html :

Insérer le conteneur de l'animation flash dans le conteneur de la 1ère section de la colonne de droite.

<div id="col_droite_1st_section">
<div id="conteneur_flash">

</div>
</div>


css

section en position relative, conteneur flash en absolute. Faire le positionnement à partir de right et bottom avec des valeurs négatives pour sortir le flash de la section.

#col_droite_1st_section {
position:relative,
}

#conteneur_flash {
position:absolute;
bottom:-50px;
right:-50px;
}


Tests sur Firefox, Opera, IE7, IE6 sur document en mode standard (xhtml 1.0 strict)

PS : pour des réponses plus rapides merci de donner un code sur lequel on puisse travailler.
Modifié par clb56 (06 Feb 2007 - 23:53)
bonjour,
Peut être :
html :
<div id="premiere_boite">
<div id="flash"></div></div>

css :
#premiere_boite {
position: relative;
}
#flash {
position: absolute;
bottom: 0;
}
Bonjour! Merci mes amis, votre solution a fonctionné. Je l'avais essayée mais dans un conteneur float, et non un relatif, voilà pourquoi ma boite se positionnait au bas de la page.

Il me semblait bien aussi qu'on pouvait positionner absolument dans une boite relative Smiley cligne

Je vous remercie encore et je reviendrai faire un tour ici, promis !
Trollivier a écrit :

Il me semblait bien aussi qu'on pouvait positionner absolument dans une boite relative Smiley cligne


Ce n'est pas tant que l'on peut mais surtout que l'on doit. Sauf à souhaiter que le positionnement se fasse par rapport au parent du plus haut niveau, en dernière instance <body>
Modifié par clb56 (07 Feb 2007 - 14:59)
Sujet clos
Aller à