Comment fixer la position d'une div
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Comment fixer la position d'une div
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
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 :
et ce code ci dans la feuille CSS :
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 ?
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
Re: Comment fixer la position d'une div
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
puis panneau d’administration >> affichage >> images et couleurs >> couleur >> feuille de style css
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>
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;}
Re: Comment fixer la position d'une div
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.
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.
Re: Comment fixer la position d'une div
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;}
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Comment fixer la position d'une div
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
Par contre il y a toujours ce vide tout autour, je ne comprends pas d'où il vient. Forum de test
Re: Comment fixer la position d'une div
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 :
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 :
Toi tu as :
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..block{width:800px}
.news{height:151px;left:16px;margin-bottom:50px;overflow:auto;position:relative;top:250px;width:285px}
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}
Re: Comment fixer la position d'une div
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 !
En tout cas merci beaucoup, mission accompli !
Re: Comment fixer la position d'une div
Super. ^^
Bonne continuation.
Bonne continuation.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» Fixer la position du footer en bas de page
» Comment fixer le logo?
» Comment fixer un menu onglet
» Comment fixer un forum sur l'image de fond?
» Comment fixer la barre de menu en haut du forum ?
» Comment fixer le logo?
» Comment fixer un menu onglet
» Comment fixer un forum sur l'image de fond?
» Comment fixer la barre de menu en haut du forum ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum