Comment fixer la position d'une div

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment fixer la position d'une div

Message par Space Sapien le Lun 29 Juil 2013 - 17:22

Bonjour à tous,

j'avais créé un sujet hier soir et Lixyr est gentiment venu régler mon problème. Cependant j'ai ajouté la mention résolu trop rapidement. Je vous explique :

J'essaie de créer un message d'accueil à partir de cadres et d'images réactives ici

Code:
<div style="margin:auto;text-align:center;width:100%"><img src="http://i37.servimg.com/u/f37/18/19/71/69/page_d13.png" usemap="#MADELI" width="800" height="312">
<map name="MADELI">
<area shape="rect" coords="464,220,636,288" title="Youtube" href="http://www.youtube.com/channel/UCUwapfFO6_1e8AWIikDTE6g">
<area shape="rect" coords="13,233,114,251" title="Charte" href="http://deliriums.forumgratuit.org/f44-charte-de-la-guilde-delirium-s">
<area shape="rect" coords="15,253,109,271" title="Postuler" href="http://deliriums.forumgratuit.org/t1491-a-lire-avant-de-postuler">
<area shape="rect" coords="165,234,286,251" title="Alliance" href="http://deliriums.forumgratuit.org/c7-alliance-de-guilde">
<area shape="rect" coords="166,255,247,271" title="Flood" href="http://deliriums.forumgratuit.org/f2-le-cafe-des-deli-s">
<area shape="rect" coords="297,45,506,193" title="La Doctoresse" href="http://deliriums.forumgratuit.org/u192contact">
<area shape="rect" coords="516,46,663,208" title="Zobal Bizarre" href="http://deliriums.forumgratuit.org/u276contact">
<area shape="rect" coords="668,47,799,197" title="Maître Fouettarde" href="http://deliriums.forumgratuit.org/u8contact"></map></div>

mais je ne parvenais pas à créer une zone de texte dans le cadre en dessous NEWS. Lixyr m'a alors dit de rajouter ce code au début :

Code:
<div class="news">Autem hiberna imperator perfectaque tantum Mediolanum ad omnis vigilasse ratione ad civilibus laudato consilio ad imperator quod laudato foedere promptior cum quod icto malis foedere maxime in in in laudato consensit hiberna autem malis plerumque ea bella expeditionibus voluit ea.</div>

et ce code ci dans la feuille CSS :

Code:
.news {position:relative; top:50px; left:-242px;
  width:285px; height:150px; margin-bottom:-150px;}

C'était parfait ! Jusqu'à ce que je me rende compte que la zone de texte se déplaçait selon la résolution de la fenêtre du navigateur. =/
Existe-t-il un moyen de fixer la DIV pour qu'elle ne bouge pas peu importe la taille de la fenêtre ?


Dernière édition par Space Sapien le Mar 30 Juil 2013 - 0:21, édité 1 fois

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Lixyr le Lun 29 Juil 2013 - 23:22

Re-Bonsoir ^^

1) Utilise du % pour que ça se cadre bien en fonction de la taille de l'écran.
2) Ou alors, tu places le tout dans une div qui mesure - en largeur - pile la taille de l'image, et normalement, la div en position relative devrait se caler en fonction de cette div et ne pas bouger. :X

par exemple, pour la deuxième solution :

panneau d'administration >> affichage >> généralités
Code:
<div class="block"><div class="news">
Autem hiberna imperator perfectaque tantum Mediolanum ad omnis vigilasse ratione ad civilibus laudato consilio ad imperator quod laudato foedere promptior cum quod icto malis foedere maxime in in in laudato consensit hiberna autem malis plerumque ea bella expeditionibus voluit ea.
</div>
        <div style="margin:auto;text-align:center;width:100%"><img src="http://i37.servimg.com/u/f37/18/19/71/69/page_d13.png" usemap="#MADELI" width="800" height="312">
        <map name="MADELI">
        <area shape="rect" coords="464,220,636,288" title="Youtube" href="http://www.youtube.com/channel/UCUwapfFO6_1e8AWIikDTE6g">
        <area shape="rect" coords="13,233,114,251" title="Charte" href="http://deliriums.forumgratuit.org/f44-charte-de-la-guilde-delirium-s">
        <area shape="rect" coords="15,253,109,271" title="Postuler" href="http://deliriums.forumgratuit.org/t1491-a-lire-avant-de-postuler">
        <area shape="rect" coords="165,234,286,251" title="Alliance" href="http://deliriums.forumgratuit.org/c7-alliance-de-guilde">
        <area shape="rect" coords="166,255,247,271" title="Flood" href="http://deliriums.forumgratuit.org/f2-le-cafe-des-deli-s">
        <area shape="rect" coords="297,45,506,193" title="La Doctoresse" href="http://deliriums.forumgratuit.org/u192contact">
        <area shape="rect" coords="516,46,663,208" title="Zobal Bizarre" href="http://deliriums.forumgratuit.org/u276contact">
        <area shape="rect" coords="668,47,799,197" title="Maître Fouettarde" href="http://deliriums.forumgratuit.org/u8contact"></map></div></div>
:enreg: 

puis panneau d’administration >> affichage >> images et couleurs >> couleur >> feuille de style css

Code:
.block {width:800px;}
.block .news {position:relative; top:50px; left:-242px;
  width:285px; height:150px; margin-bottom:-150px;}
:enreg: 

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Space Sapien le Lun 29 Juil 2013 - 23:46

J'avais déjà essayé avec les pourcentages, et le résultat restait le même =/

Ta 2nd solution semble bien fonctionner ! La zone de texte ne bouge plus. Par contre l'image n'est plus centrée et il y a un gros vide tout autour, comme tu peux le voir sur ce forum de test.

Merci encore pour ton aide. Smile

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Lixyr le Mar 30 Juil 2013 - 0:04

C'est parfaitement centré chez moi, mais ça vient du fait que je suis en phpbb2 : la table, ou cellule, dans mon template centre tout verticalement et horizontalement, ce qui ne doit pas être le cas chez toi. Essaie avec ce bout de CSS :

Code:
.block {width:800px; text-align:center; margin:0px auto;}
(ne change que la première ligne.)





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Space Sapien le Mar 30 Juil 2013 - 0:14

Oui c'est redevenu centré, merci.

Par contre il y a toujours ce vide tout autour, je ne comprends pas d'où il vient. Forum de test

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Lixyr le Mar 30 Juil 2013 - 0:16

Je viens d'aller voir le code que tu as mis sur ton forum test : tu as modifié des valeurs qu'il ne fallait pas modifier. :S

Toi tu as :
.block{width:800px}
.news{height:151px;left:16px;margin-bottom:50px;overflow:auto;position:relative;top:250px;width:285px}
hors, le margin-bottom que j'avais mis dans la classe news était là pour justement supprimer la marge automatique en haut, qui correspond à la place que prendrait le texte s'il n'était pas en position relative, donc l'équivalent de la hauteur de 150px. Il faut donc bien supprimer une marge inférieur de 150px, et non pas en rajouter une en plus de 50px.
De plus, du coup, tu as changé le décalage du haut du texte. :DIl ne fallait pas non plus, puisque normalement, il était à la bonne place.

Donc au final, le code doit être, si je reprends le tien, mais avec les bonnes valeurs :

Code:
.block{width:800px; margin:0px auto;}
.block .news{
  height:151px;left:16px;margin-bottom:-150px;overflow:auto;position:relative;top:50px;width:285px}

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Space Sapien le Mar 30 Juil 2013 - 0:20

Ah oui ! Je suis désolé, avec tout le bidouillage que j'ai fais j'ai du me perdre dans certains copier coller que j'ai fais... xD

En tout cas merci beaucoup, mission accompli ! Wink

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment fixer la position d'une div

Message par Lixyr le Mar 30 Juil 2013 - 0:21

Super. ^^

Bonne continuation.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum