Problème de position

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

Résolu Problème de position

Message par MissFinn le Mer 13 Fév 2013 - 11:21

Bonjour/Bonsoir!

Je me présente, je suis Finn, la fonda de ce forum RPG (sur la magie et tout le blabla classique)
http://stduncanacademy.forumgratuit.org/
( phpBB2, il ne me semble pas avoir modifier de templates et j'ai un CSS personnalisé)

Bref, je débute en codage (j'ai commencé il y a...trois jours max?) et je rencontre un petit soucis d'esthétique. Je sais qu'il y a aussi une partie codage, mais je ne savais pas où poster mon problème (excusez moi si c'est pas le bon endroit)
Je me suis servis d'un de vos tuto pour créer un message d'accueil en accordéon, puis l'ai quelque peu modifier à mon aise. Seulement, là je suis en train de le "remplir" avec les différentes infos classiques, et j'ai beau chercher, j'ai rencontré une colle. dans le second slide, je comptais mettre quelques liens et un cadre avec des infos, mais je n'arrive pas à mettre ce cadre centré en bas.
Spoiler:
(on se moque pas de mon schéma, il est fait à la vas vite)
Je compte mettre par la suite une image de fond. Je voudrais apprendre, pour appliquer cela à d'autres endroits également.

Je voudrais donc savoir s'il y a un code particulier ou s'il faut faire autre chose.

Voici mon code:
Spoiler:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>☺Hello Darling!</span></h2>
<div>
<figure>
<center><div style="height: 150px; width: 430px; background-color:
rgb(46, 46, 46); box-shadow: 0px 0px 10px 0px rgb(17, 17,
17);">
<center><span style="marging-absolute:-33px;text-transform:
lowercase; letter-spacing: 3px; font-family: normal;
font-style: italic; text-align: center; font-weight:
bold; font-size: 25px; color: #FFFFFF; text-shadow:
0px 3px 3px #000000; opacity: 0.9;"> Contexte </span>
</center>
<div style="overflow: auto; height: 270px;">
<div align="justify" style="width: 400px; margin-left:
5px;"><center>Ce monde est rempli de créatures incroyables. On
dit bien que les légendes ont toujours une part de
vérité, et bien cette part de vérité est bien plus
grande que ce que vous pouvez imaginer.<br />
Gobelins, dragons de la pluie, démons et
fées...Presque tout cela existe. La plupart des gens
sont incapables de les voir, ou tout simplement d'y
croire. </br>
Mais nous, chasseurs, nous y croyons. Nous les voyons. Et lorsqu'ils se montrent trop violents et dangereux, nous les neutralisons. </br>
Bienvenue à St Duncan, la première école pour chasseurs au monde!</center></div>
</div>
</div></center>
<img class="full" src="https://i77.servimg.com/u/f77/18/03/13/64/fond_h10.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>♣Trucs importants</span></h2>
<div>
<figure>
<div style="top: 6px; left: 4px;">

<a href="http://stduncanacademy.forumgratuit.org/f1-reglement?tid=b299df0644dcf958d16cf259329c251f" class="postlink">Réglement</a><br />
<a href="http://stduncanacademy.forumgratuit.org/f40-boite-a-questions-idees?tid=b299df0644dcf958d16cf259329c251f" class="postlink">Boite à questions</a> <br />
<a href="http://stduncanacademy.forumgratuit.org/f2-presentations?tid=b299df0644dcf958d16cf259329c251f" class="postlink">Présentations</a><br />
<a href="http://stduncanacademy.forumgratuit.org/f36-partenariats?tid=b299df0644dcf958d16cf259329c251f" class="postlink">Partenariats</a><br />
</br>
</br>

</div>
<div style="text-align: right;"> </div>
<div style="height: 146px; width: 340px; background-color:
rgb(46, 46, 46); box-shadow: 0px 0px 10px 0px rgb(17, 17,
17); text-align: right; margin-left: 120px;">
<dl>
<dd>
<center><span style="text-transform: lowercase;
letter-spacing: 3px; font-family: normal;
font-style: italic; text-align: center;
font-weight: bold; font-size: 25px; color:
#FFFFFF; text-shadow: 0px 3px 3px #000000;
opacity: 0.9;"> Quoi d'neuf? </span> </center>
</dd>
<dd> <br />
</dd>
<dd>
<center>
<div style="overflow: auto; height: 200px;">
<div style="text-align: center;"> </div>
<div style="margin-left: 11px; width: 223px;
text-align: center;"><span
style="text-decoration: underline;">06/02/2013:</span>Ouverture


officielle du forum!<br />
<span style="text-decoration: underline;">12/02/13</span>:
nouveau message d'accueil en cours de création </div>
</div>
</center>
</dd>
</dl>
</div>
</figure>
</div>
</li>
<li>
<h2><span>♤Staff et Crédits</span></h2>
<div>
<figure>

</figure>
</div>
</li>
<li>
<h2><span>☻Copains et Topsite</span></h2>
<div>
<figure>
<span style="font-size: 18px; line-height: normal"><font color="white"><div style="margin:auto;text-align:center;width:100%"><strong>Copains ♥</strong></div></font></span>
<a href="http://miwashi-school.myogame.net" class="postlink" target="_blank" rel="nofollow"><img src="http://nsm05.casimages.com/img/2012/06/23//12062306310511107110018963.png" border="0" alt="" /></a>
<a href="http://saigo.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/356816bouton8831.png" border="0" alt="" /></a><a href="http://pensionnat-kikai.forumactif.org//" class="postlink" target="_blank" rel="nofollow"><img src="https://i10.servimg.com/u/f10/18/07/20/72/bouton10.jpg" border="0" alt="" /></a><a href="http://nekopuppet.forumactif.org/"><img src="https://i11.servimg.com/u/f11/13/62/86/73/np10.png"></a><a href="http://the-new-guild-rpg.ogameunivers.com/" class="postlink" target="_blank" rel="nofollow"><img src="https://i38.servimg.com/u/f38/17/58/55/55/fairy_10.png" border="0" alt="" /></a><a href="http://tsukinoshima.forumactif.org/"><img src="http://image.noelshack.com/fichiers/2013/06/1360498572-bouton.png"></a>
<center><span style="marging-bottom:-33px;text-transform:
lowercase; letter-spacing: 3px; font-family: georgia;
font-style: italic; text-align: center; font-weight:
bold; font-size: 25px; color: #FFFFFF; text-shadow:
0px 3px 3px #000000; opacity: 0.9;"> Topsites !</span>
</center>
<div style="overflow: auto; height: 100px;">
<div align="justify" style="height: 160px; margin-left:
13px; margin-top: 4px;"><a rel="nofollow"
target="_blank" class="postlink"
;"><a rel="nofollow"
target="_blank" class="postlink"
href="http://www.root-top.com/topsite/serpentgy/in.php?ID=9595"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top710.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/ggstyle/in.php?ID=1855"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top310.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/mary/in.php?ID=6207"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top610.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/yami/in.php?ID=5723"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top210.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/virtu4ldreaiviz/in.php?ID=3660"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top510.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2865"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top810.jpg" /></a><a
rel="nofollow" target="_blank" class="postlink"
href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=3521"><img
border="0" alt=""
src="https://i77.servimg.com/u/f77/18/03/13/64/top410.jpg" /></a>

</div>
</figure>
</div>
</li>
</ol>
</div>

Je m'incline en remerciements envers la personne qui m'aidera Smile
Si vous avez besoin d'autre chose, je suis à votre entière disposition.

PS:Je suis désolée de déranger pour si peu mais ça fait un jour que je cherche une solution sans résultats


Dernière édition par MissFinn le Ven 15 Fév 2013 - 11:08, édité 2 fois

MissFinn
Nouveau membre

Messages : 4
Inscrit(e) le : 13/02/2013

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

Résolu Re: Problème de position

Message par Matriochka le Mer 13 Fév 2013 - 11:27

Bonjour et Bienvenue
sur le Forum des Forums Forumactif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Si je comprends bien, tu aimerais placer le cadre contenant tes liens en-dessous de l’autre, contenant tes actualités ?

Comme ceci : ?


Si ça n’est pas ce que tu veux, n’hésite pas à préciser ta requête, éventuellement avec un schéma Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Problème de position

Message par MissFinn le Mer 13 Fév 2013 - 11:34

(je vais passer pour une noob mais ma touche impression écran ne marche pu, je crois que je vais faire un schéma avec gimp xD)

Je voudrai que les liens restent en haut, et que le cadres "quoi d'neuf?" se retrouve au milieu en bas, je vais éditer ma requête de ce pas

MissFinn
Nouveau membre

Messages : 4
Inscrit(e) le : 13/02/2013

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

Résolu Re: Problème de position

Message par MissFinn le Jeu 14 Fév 2013 - 11:45

un petit up siouplé

MissFinn
Nouveau membre

Messages : 4
Inscrit(e) le : 13/02/2013

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

Résolu Re: Problème de position

Message par Ea le Jeu 14 Fév 2013 - 12:29

Bonjour,



Se mettre au yoga peut-être ?

Autrement pour le problème mentionné dans le message, pour mettre le cadre en bas il y a 2 façon :

  • Mettre une marge au dessus de l'élément ( soit des <br> soit un <div class="lien_utiles_espace"></div> et dans le css ( PA > Affichage > Couleurs > Feuille de style ) .lien_utiles_espaces { height: 40px; } ).

    En css, il y a moyen d’être plus précis ( et on peut faire des tests en direct comme indiqué là : http://forum.forumactif.com/t308630-tester-du-css ).

  • Faire descendre le bloc en lui mettant une position relative ( c'est à dire une position qui est relative à celle que l'élément devrait avoir ), avec un truc du style : <div style="position:relative;top:50px">contenu</div> pour le descendre de 50 pixels.

  • Jouer avec le positionnement absolu ou relatif, en mettant un positionnement relatif au parent ( je ne sais pas si c'est possible ici car il est peut-être ajouté par javascript ), on peut positionner l'enfant absolument ( par exemple dans le cadre de mon message, je pourrais mettre l'avatar à exactement 30 pixels du bord gauche et 30 pixels du bord bas ).

    Pour en apprendre plus sur cela, il y a des tutoriels en plusieurs parties " positionnement css " ( je tombe souvent sur ceux d'openweb et alsacréation en cherchant ).

Ensuite le centrage de quelque chose sur une seule ligne on peut faire :

  • Code:
    <div class="text-align:center">text</div>

  • mais ici, si vous voulez un bloc centré ( qui ne fasse pas toute la largeur ), il faudrait plutôt utiliser :

    Code:
    <div style="text-align:center"><div style="display:inline-block">contenu</div></div>
    Le premier div permet de centrer, le deuxième de définir un affichage inline-block.

    - inline c'est des lignes simples de textes
    - bloc ce sont des cases avec une largeur et hauteur ( qui prenne toute la largeur de la ligne, donc si on met 2 blocs ils sont toujours l'un en dessous de l'autre ( sauf le cas des positionnements différents ) )
    - inline-block possède un peu des deux propriétés ( ce sont des blocs avec une largeur et une hauteur, mais ils peuvent se mettre l'un après l'autre sur la même ligne, être centré, ... )

    Un inline-block subit le centrement, et est donc centré. Par défaut les bords essayent de prendre le moins de place possible pour entourer le contenu, donc si vous voulez une marge vous pouvez ajouter dans la balise style padding: 5px; par exemple pour avoir une marge intérieur ( entre le bord et le texte contenu ) de 5 pixels.

  • une autre solution si on sait donner la largeur souhaitée, est de mettre :

    Code:
    <div style="width:400px;margin:auto;">contenu</div>
    On indique que la largeur doit être de 400 pixels et la valeur auto mise à margin ( qui est la propriété déterminant la largeur des marges extérieurs, c'est-à-dire entre le bord et le contenu extérieur qui entoure le bloc ) indique que le navigateur doit mettre automatiquement la marge à gauche et à droite afin que le contenu soit centré.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

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

Résolu Re: Problème de position

Message par MissFinn le Ven 15 Fév 2013 - 11:07


J'ai réussi, VICTOIRE!
Merci beaucoup pour ces explications très précises ^o^

(Waw, cet endroit est génial *w*)

MissFinn
Nouveau membre

Messages : 4
Inscrit(e) le : 13/02/2013

http://stduncanacademy.forumgratuit.org
MissFinn 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