Centrer une fiche contenant des positionnements flottants relatifs
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Centrer une fiche contenant des positionnements flottants relatifs
Bonjour,
J'ai récemment créé une fiche de pub, en essayer d'y instauré un positionnement flottant relatif (cf code plus bas). La fiche est bien disposée, mais si on veut centrer, les placements flottants sont décalés. D'où ma question : peut-on centrer une fiche avec un positionnement flottant relatif, si oui, comment ?
Voici le code :
Merci de vos réponses
Cordialement,
Aymerik54
J'ai récemment créé une fiche de pub, en essayer d'y instauré un positionnement flottant relatif (cf code plus bas). La fiche est bien disposée, mais si on veut centrer, les placements flottants sont décalés. D'où ma question : peut-on centrer une fiche avec un positionnement flottant relatif, si oui, comment ?
Voici le code :
- Code:
<div style="font-size: 11px; color: #C4D7ED; font-family: Verdana, Arial,Helvetica, sans-serif; background-image: url(http://i43.servimg.com/u/f43/15/73/99/33/fond-b10.jpg); background-repeat: no-repeat; width: 500px; border: 3px solid #000000;"><div style="position: relative; top: 0px; left: 0px; border-bottom: 3px solid #000000"><img src="http://i43.servimg.com/u/f43/15/73/99/33/bann_b10.jpg" alt="Logo" /></div>
<div style="font-size: 18px; position: relative; top: -15px; left: 0px; border-bottom: 3px solid #000000;"><center><a href="gththy" target="__blanck">Règlement</a> <a href="gththy" target="__blanck">Le contexte</a> <a href="gththy" target="__blanck">Les prédéfinis</a></center> </div>
<div style="font-size: 18px; position: relative; top: -22px; left: 70px;">Le résumé </div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -05px; left: 5px;">Coucou</div><div style="font-size: 18px; position: relative; top: -150px; left: 277px;">News de l'académie</div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -135px; left: 250px;">Coucou</div>
</div>
Merci de vos réponses
Cordialement,
Aymerik54
Dernière édition par Aymerik54 le Sam 17 Mar 2012 - 22:25, édité 1 fois
Invité- Invité
Re: Centrer une fiche contenant des positionnements flottants relatifs
bonsoir,
... pas trop compris , là ...
le plus simple , puisque vous aimez les "div" , est de mettre deux "div" flottantes , et de mettre vos "div" dans ces deux "colonnes" improvisées ... ce qui supprime le besoin de positionnement relatif ...
en résumé :
... pas trop compris , là ...
le plus simple , puisque vous aimez les "div" , est de mettre deux "div" flottantes , et de mettre vos "div" dans ces deux "colonnes" improvisées ... ce qui supprime le besoin de positionnement relatif ...
en résumé :
- Code:
<div style="font:11px Verdana, Arial,Helvetica, sans-serif;color: #C4D7ED;background: url(http://i43.servimg.com/u/f43/15/73/99/33/fond-b10.jpg) no-repeat; width: 500px;height:400px;border: 3px solid #000000;">
<div style="border-bottom: 3px solid #000000;"><img src="http://i43.servimg.com/u/f43/15/73/99/33/bann_b10.jpg" alt="Logo" /></div>
<div style="font-size: 18px;text-align:center; border-bottom: 3px solid #000000;">
<a href="gththy" target="__blanck">Règlement</a> <a href="gththy" target="__blanck">Le contexte</a> <a href="gththy" target="__blanck">Les prédéfinis</a>
</div>
<div style="float:left;width:49%;">
<div style="font-size: 18px;margin:auto;text-align:center;">Le résumé </div>
<div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; margin:auto;">Coucou de gauche ...</div>
</div>
<div style="float:right;width:49%;">
<div style="font-size: 18px;margin:auto;text-align:center;">News de l'académie</div>
<div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto margin:auto;">Coucou de droite</div>
</div>
</div>
Re: Centrer une fiche contenant des positionnements flottants relatifs
Bonjour,
Justement, je ne voudrais pas "contourner l'obstacle" et apprendre à surmonter ceci, enfin, si cela est réalisable. Donc, si vous avez une technique de centrer un contenu relatif, je serai content de le savoir.
Merci tout de même de votre aide.
Bonne soirée
Justement, je ne voudrais pas "contourner l'obstacle" et apprendre à surmonter ceci, enfin, si cela est réalisable. Donc, si vous avez une technique de centrer un contenu relatif, je serai content de le savoir.
Merci tout de même de votre aide.
Bonne soirée
Invité- Invité
Re: Centrer une fiche contenant des positionnements flottants relatifs
bonjour,
je ne vous propose pas de contourner l'obstacle ...
vous voulez "centrer" un "div" qui est positionné de façon relative (position: relative;) en haut (top: XXpx;) et à gauche (left: XXpx;) par rapport à l’élément parent (le "div" précédent) ...
c'est illogique ... sauf si on applique des mathématiques ...
pour mieux comprendre ce qui se passe dans votre code , le mieux est de rajouter une bordure à vos "div" ...
pour rectifier ça , il faut prendre en compte la largeur totale : 500 px
2 moitiés de 250px ...
-----------------------------------------------------------
vous avez placé le div "le résumé" à "top: 0px; left: 70px;"
pour centrer , il faut 70px de l'autre coté du div ...
250-(70+70)=110px pour la largeur du div ...
on donne une hauteur de 30px ...
on peut centrer le texte dans le div : "text-align:center;"
---------------------------------------------------------------
le div de gauche contenant "coucou" a une hauteur et une largeur définie :"width: 230px; height: 110px;"
pour centrer ce cadre sur la première moitié , il manque 10px de chaque coté , donc "left:10px;" ...
le "top :-5px" fait chevaucher ce cadre sur le premier ...
--------------------------------------------------------------
le div "News de l'académie" est à "left: 277px;" , donc à 27px de plus que la moitié ...
250-(27+27)=196px pour la largeur du div ...
on peut centrer le texte dans le div : "text-align:center;"
le top en négatif dépend des 2 div précédents ... top :-142px (30+110+2 bordures de cadre)
--------------------------------------------------------
pour le div de droite contenant "coucou" , il manque aussi 10px de chaque coté , donc "left:260px;" ... et top:-147px (il faut remonter de 30(div news)+110(div coucou)+5(top-5)+2(bordures)
ce qui donne le code suivant :
tout est parfaitement centré , mais il reste un espace énorme sous les "coucou" de 140px qui provient des deux div de droite qui ont été remontés en top négatif ...
voilà pour les explications ...
je ne vous propose pas de contourner l'obstacle ...
vous voulez "centrer" un "div" qui est positionné de façon relative (position: relative;) en haut (top: XXpx;) et à gauche (left: XXpx;) par rapport à l’élément parent (le "div" précédent) ...
c'est illogique ... sauf si on applique des mathématiques ...
pour mieux comprendre ce qui se passe dans votre code , le mieux est de rajouter une bordure à vos "div" ...
- Code:
<div style="font-size: 11px; color: #C4D7ED; font-family: Verdana, Arial,Helvetica, sans-serif; background-image: url(http://i43.servimg.com/u/f43/15/73/99/33/fond-b10.jpg); background-repeat: no-repeat; width: 500px; border: 3px solid #000000;"><div style="position: relative; top: 0px; left: 0px; border-bottom: 3px solid #000000"><img src="http://i43.servimg.com/u/f43/15/73/99/33/bann_b10.jpg" alt="Logo" /></div>
<div style="font-size: 18px; position: relative; top: 0px; left: 0px; border-bottom: 3px solid #000000;"><center><a href="gththy" target="__blanck">Règlement</a> <a href="gththy" target="__blanck">Le contexte</a> <a href="gththy" target="__blanck">Les prédéfinis</a></center> </div>
<div style="font-size: 18px; position: relative; top: 0px; left: 70px;border: 1px solid black;">Le résumé </div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -05px; left: 5px;">Coucou</div><div style="font-size: 18px; position: relative; top: -150px; left: 277px;border: 1px solid black;">News de l'académie</div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -135px; left: 250px;">Coucou</div>
</div>
pour rectifier ça , il faut prendre en compte la largeur totale : 500 px
2 moitiés de 250px ...
-----------------------------------------------------------
vous avez placé le div "le résumé" à "top: 0px; left: 70px;"
pour centrer , il faut 70px de l'autre coté du div ...
250-(70+70)=110px pour la largeur du div ...
on donne une hauteur de 30px ...
on peut centrer le texte dans le div : "text-align:center;"
---------------------------------------------------------------
le div de gauche contenant "coucou" a une hauteur et une largeur définie :"width: 230px; height: 110px;"
pour centrer ce cadre sur la première moitié , il manque 10px de chaque coté , donc "left:10px;" ...
le "top :-5px" fait chevaucher ce cadre sur le premier ...
--------------------------------------------------------------
le div "News de l'académie" est à "left: 277px;" , donc à 27px de plus que la moitié ...
250-(27+27)=196px pour la largeur du div ...
on peut centrer le texte dans le div : "text-align:center;"
le top en négatif dépend des 2 div précédents ... top :-142px (30+110+2 bordures de cadre)
--------------------------------------------------------
pour le div de droite contenant "coucou" , il manque aussi 10px de chaque coté , donc "left:260px;" ... et top:-147px (il faut remonter de 30(div news)+110(div coucou)+5(top-5)+2(bordures)
ce qui donne le code suivant :
- Code:
<div style="font-size: 11px; color: #C4D7ED; font-family: Verdana, Arial,Helvetica, sans-serif; background-image: url(http://i43.servimg.com/u/f43/15/73/99/33/fond-b10.jpg); background-repeat: no-repeat; width: 500px; border: 3px solid #000000;"><div style="position: relative; top: 0px; left: 0px; border-bottom: 3px solid #000000"><img src="http://i43.servimg.com/u/f43/15/73/99/33/bann_b10.jpg" alt="Logo" /></div>
<div style="font-size: 18px; position: relative; top: 0px; left: 0px; border-bottom: 3px solid #000000;"><center><a href="gththy" target="__blanck">Règlement</a> <a href="gththy" target="__blanck">Le contexte</a> <a href="gththy" target="__blanck">Les prédéfinis</a></center> </div>
<div style="font-size: 18px; position: relative; top: 0px; left: 70px;width: 110px; height: 30px;text-align:center;">Le résumé </div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -5px; left: 10px;">Coucou</div><div style="font-size: 18px; position: relative; top: -142px; left: 277px;width: 196px; height: 30px;text-align:center;">News de l'académie</div><div style="font-size: 11px; width: 230px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; position: relative; top: -147px; left: 260px;">Coucou</div>
</div>
tout est parfaitement centré , mais il reste un espace énorme sous les "coucou" de 140px qui provient des deux div de droite qui ont été remontés en top négatif ...
voilà pour les explications ...
Re: Centrer une fiche contenant des positionnements flottants relatifs
Bonjour,
Je vous remercie encore.
Pour l'espace en dessous, c'est totalement normal, car j'ai supprimé un logo que j'ai mis pour ne pas prendre ça pour une pub....
Ensuite, lorsque je disais "centrer", ce n'est pas centrer les éléments à l'intérieur de la fiche, mais lorsque l'on centre la fiche en elle-même :
<center>le code de la fiche</center>
Je suppose que cela n'est pas possible avec le positionnement relatif, mais j'aimerai en avoir le coeur net ! Voyez-vous ce que je veux dire ?
Sinon, merci pour les explications
Bien cordialement,
Aymerik54
Je vous remercie encore.
Pour l'espace en dessous, c'est totalement normal, car j'ai supprimé un logo que j'ai mis pour ne pas prendre ça pour une pub....
Ensuite, lorsque je disais "centrer", ce n'est pas centrer les éléments à l'intérieur de la fiche, mais lorsque l'on centre la fiche en elle-même :
<center>le code de la fiche</center>
Je suppose que cela n'est pas possible avec le positionnement relatif, mais j'aimerai en avoir le coeur net ! Voyez-vous ce que je veux dire ?
Sinon, merci pour les explications
Bien cordialement,
Aymerik54
Invité- Invité
Re: Centrer une fiche contenant des positionnements flottants relatifs
:lol!:
il suffit de rajouter un "margin:auto;" au style du premier div !^^
il suffit de rajouter un "margin:auto;" au style du premier div !^^
Re: Centrer une fiche contenant des positionnements flottants relatifs
Nan, ce n'est pas possible ! Ben, je doutais que c'était possible mais là, franchement, j'ai éclaté de rire en voyant que c'était si simple !
Merci 10000 fois !
Bonne soirée à vous !
Merci 10000 fois !
Bonne soirée à vous !
Invité- Invité
Sujets similaires
» Problème ...N'arrive pas à centrer sa fiche.
» Widgets flottants sur tout le forum
» Recherhce les template relatifs aux "sujets surveillés"
» Rechercher des messages contenant un mot-clé
» email contenant le nom info
» Widgets flottants sur tout le forum
» Recherhce les template relatifs aux "sujets surveillés"
» Rechercher des messages contenant un mot-clé
» email contenant le nom info
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum