Centrer une fiche contenant des positionnements flottants relatifs

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

Résolu Centrer une fiche contenant des positionnements flottants relatifs

Message par Invité le Jeu 15 Mar 2012 - 17:49

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 :
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 Smile
Cordialement,
Aymerik54


Dernière édition par Aymerik54 le Sam 17 Mar 2012 - 22:25, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Scoubifitz le Jeu 15 Mar 2012 - 22:12

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é :

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Invité le Ven 16 Mar 2012 - 23:15

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Scoubifitz le Sam 17 Mar 2012 - 7:54

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" ...
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 ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Invité le Sam 17 Mar 2012 - 17:28

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 Smile
Bien cordialement,
Aymerik54

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Scoubifitz le Sam 17 Mar 2012 - 19:26

lol!

il suffit de rajouter un "margin:auto;" au style du premier div !^^

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer une fiche contenant des positionnements flottants relatifs

Message par Invité le Sam 17 Mar 2012 - 22:08

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 !

Invité
Invité


Invité 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