28172 sujets

CSS et mise en forme, CSS3

Un div fixed qui dépend d'un autre div

Bonjour

J'ai besoin d'avoir un div en position "fixed" par rapport à un élément conteneur
mais apparemment les coordonnées sont toujours par rapport à la fenêtre.

Il faudrait qu'il se positionne en haut et à droite d'un autre div qui est plus ou moins haut (page de résultats)

Difficile de savoir à quelle hauteur de l'écran, (si l'internaute redimensionne l'affichage des caractères) ni exactement ou par rapport à la droite ou la gauche de l'écran puisque tout est centré automatiquement!

Quelqu'un aurait une idée ?

Merci !

mcb
Salut,

Es-tu sûr que la position "fixed" est la propriété la mieux adapter pour ton cas ? Peut être un float:right suffirai.

Un code source, ou une page en ligne pourrai nous aider mieu comprendre ce que tu souhaite Smiley cligne
Bonsoir,

hélas un float right ne répond pas aux exigences.
C'est une demande très spécifique, le div fixe doit toujours être présent à l'écran même quand la page défile avec les résultats de recherche.

voici un code "bidon" qui montre ce dont j'ai besoin (ici je l'ai mis en absolu mais
il faudrait juste que le div en position absolue soit fixe par rapport au conteneur !

<body>
<div style="border: 1px solid #FF9900;position:relative;overflow:auto; width: 900px;">ici les résultats de la recherche
<div style="width: 650px; height: 80px; border:1px solid red; margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red; margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="width: 650px; height: 80px; border:1px solid red;margin-bottom: 10px;">resultat</div>
<div style="background: #FFCC66; height: 300px; width: 200px; position: absolute; top: 30px; right: 3px;">les informations qui doivent toujours etre présentes</div>
</div>


merci ...
Re-Bonsoir,

Ceci devrait te convenir : 


<div style="background: #FFCC66; height: 300px; width: 200px; position: fixed; top: 30px; margin-left:697px;">les informations qui doivent toujours etre présentes</div>


Je te conseil vivement de séparer ton code CSS dans une feuille de style Smiley smile
Bonjour

Tout d'abord, je tiens à préciser que je ne mets jamais le style comme cela, mais toujours en externe,
c'était pour faciliter l'exemple ... Smiley cligne
quand j'essaie d'aider les autres sur des forums, quelques fois les codes sont si longs à récupérer ... j'ai voulu faciliter la tâche, mais ce n'était peut-être pas une bonne idée après tout !

Ton code marche très bien sur la largeur de l'écran, ça c'est super !
mais il y un souci sur la hauteur, j'ai oublié de mentionner hier soir (désolée il était tard et j'avais beaucoup galéré là-dessus), qu'il y a du contenu au-dessus. Le problème donc est maintenant lorsqu'on remonte sur le début de l'écran on a ce div aussi présent à cet endroit là.

Je ne peux envoyer le vrai code, le site n'est pas encore en ligne, mais un dessin :
il y a des menus en haut, des éléments de recherche, puis les résultats. En haut à droite des résultats, il faut toujours qu'il y ait le div rouge du dessin, mais il ne faut pas qu'il remonte quand on est tout en haut de la page.

Les polices sont en relatif, ce qui veut dire que l'internaute peut changer l'affichage et donc la partie supérieure peut augmenter en hauteur.


largeurs des div:

le global qui centre tout : 980px
le div qui englobe les résultats et le fixe : 980px
les fiches résultat : 735px
le div a fixer : 137px upload/12431-fixed.gif" alt="upload/12431-fixed.gifupload/12431-fixed.gif" />

merci encore ...
je n'arrive plus à m'en sortir, même avec du javascript, ce que je préférerais éviter de toutes façons

mc
Bonjour

Je voulais simplement remercier Funk, car finalement nous allons opter pour sa solution (astucieuse), tant pis pour l'éventuel redimensionnement des caractères !

Merci encore, cela m'a beaucoup aidé Smiley biggrin
Bonjour,

Deux précisions au sujet du fonctionnement de ce forum:

1. Les blocs de code cités doivent être encadrés par les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Merci de modifier ton message ci-dessus pour prendre en compte cette règle de mise en page.

2. Les sujets résolus peuvent être marqués comme «[Résolu]» en éditant le titre du sujet. Pour cela, il faut modifier (bouton éditer) le premier message du sujet, et rajouter cette mention à la main (enfin, au clavier).
Sujet clos
Aller à