Problème de position

[MissFinn]

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:

Je m'incline en remerciements envers la personne qui m'aidera
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

[Matriochka]

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 Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

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

[MissFinn]

(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]

un petit up siouplé

[Ea]

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à : https://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.

[MissFinn]

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

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