Partage

Alignement texte

Sujet résolu

8 avril 2019 à 19:13:47

Bonjour,

Je développe un site internet, mais je ne sais pas comment aligner le texte de gauche et de droite sur les mêmes lignes pour avoir un meilleur rendu.

Voici le visuel actuel :

https://image.noelshack.com/fichiers/2019/15/1/1554743573-montre.png

Voici mon code :

<div class="center-side">
                <article class="default-section">
            <h3 class="aside-title">Mon personnage roleplay</h3>
			
			<div style="text-align:right">
   <b>Argent en jeu</b> : 1 000 € (<a href="boutique.php">Acheter de l'argent virtuel</a>)<br>
			<b>Temps de jeu</b> : <b>8</b> heures et <b>24</b> minutes<br>
			<b>SteamID</b> : STEAM_0:1:55975235<br>
</div>
<div style="text-align: left">
   <b>Nom et Prénom</b> : Maxime Neiko<br>
   <b>Votre personnage est-il premium?</b> <b><font color="#008000">Oui</font></b><br>
   <b>Expiration de vos avantages premium :</b> 27 mai 2019<br>
</div>

			</article>
            </div>

Dans l'attente d'une réponse de votre part!

exen

8 avril 2019 à 19:29:18

un petit truc comme ca devrait le faire

Compos sui.

Altayir

8 avril 2019 à 19:33:56

arghhh merci mais sa a fait une double box:

https://image.noelshack.com/fichiers/2019/15/1/1554744829-box.png

exen

8 avril 2019 à 19:48:21

C'est rien ton problème viens du fait que je n'ai pas changé la class de default-section tiens là ca se passe mieux ?

Compos sui.

noopy360

8 avril 2019 à 19:49:03

Bonjour,

HTML

<div class="center-side"><h3 class="aside-title">Mon personnage roleplay</h3>

<b>Argent en jeu</b> : 1 000 € (<a href="boutique.php">Acheter de l'argent virtuel</a>)<br>

<b>Temps de jeu</b> : <b>8</b> heures et <b>24</b> minutes<br>

<b>SteamID</b> : STEAM_0:1:55975235<br>

</div>

<b>Nom et Prénom</b> : Maxime Neiko<br>

<b>Votre personnage est-il premium?</b> <b><font color="#008000">Oui</font></b><br>

<b>Expiration de vos avantages premium :</b> 27 mai 2019<br>

</div>

</article>

</div>

CSS

article{

display:flex;

}

Ton problème vient de l'organisation de ton code...

Si tu as la réponse à ton problème pense à mettre en résolu, merci !

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Altayir

8 avril 2019 à 19:54:16

Merci it's good!

exen

8 avril 2019 à 20:18:03

Decidément j'en colle toujours trop

Compos sui.

Altayir

8 avril 2019 à 20:52:54

Bonjour,

Enfaite celà ne fonctionne pas, en mettant le code de noopy sa me fait sa:

https://image.noelshack.com/fichiers/2019/15/1/1554749448-noopy.png

Le "Mon personnage roleplay" ainsi que la barre est sorti de la box, et tout s'est aligné à gauche.

Voici le code :

<div class="center-side"><h3 class="aside-title">Mon personnage roleplay</h3>

<b>Argent en jeu</b> : 1 000 € (<a href="boutique.php">Acheter de l'argent virtuel</a>)<br>

<b>Temps de jeu</b> : <b>8</b> heures et <b>24</b> minutes<br>

<b>SteamID</b> : STEAM_0:1:55975235<br>

</div>

<b>Nom et Prénom</b> : Maxime Neiko<br>

<b>Votre personnage est-il premium?</b> <b><font color="#008000">Oui</font></b><br>

<b>Expiration de vos avantages premium :</b> 27 mai 2019<br>

</div>

</article>

</div>

exen

8 avril 2019 à 21:10:04

et si tu colle ca sur ce code ?

h3{
text-align: center
}

.default-section{
display: flex;
justify-content: space-between;

}

Compos sui.

noopy360

8 avril 2019 à 21:15:27

Bon cette fois j'ai la bonne solution tout à leurs j'était sur mon tel...

html

<h3 class="aside-title">Mon personnage roleplay</h3>

<b>Argent en jeu</b> : 1 000 € (<a href="boutique.php">Acheter de l'argent virtuel</a>)<br>

<b>Temps de jeu</b> : <b>8</b> heures et <b>24</b> minutes<br>

<b>SteamID</b> : STEAM_0:1:55975235<br>

</div>

<b>Nom et Prénom</b> : Maxime Neiko<br>

<b>Votre personnage est-il premium?</b> <b><font color="#008000">Oui</font></b><br>

<b>Expiration de vos avantages premium :</b> 27 mai 2019<br>

</div>

</article>

</div>

css

h3{

text-align: center

}

.flex{

display: flex;

justify-content: space-between;

}

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Altayir

8 avril 2019 à 21:16:40

Sa fait sa :

https://image.noelshack.com/fichiers/2019/15/1/1554750892-presque.png

Alors qu'avant sa faisait sa si j'enleve ton bout :

https://image.noelshack.com/fichiers/2019/15/1/1554750945-boox.png

Voici le code :

<div class="center-side"><h3 class="aside-title">Mon personnage roleplay</h3>

<b>Argent en jeu</b> : 1 000 € (<a href="boutique.php">Acheter de l'argent virtuel</a>)<br>

<b>Temps de jeu</b> : <b>8</b> heures et <b>24</b> minutes<br>

<b>SteamID</b> : STEAM_0:1:55975235<br>

</div>

<b>Nom et Prénom</b> : Maxime Neiko<br>

<b>Votre personnage est-il premium?</b> <b><font color="#008000">Oui</font></b><br>

<b>Expiration de vos avantages premium :</b> 27 mai 2019<br>

</div>

</article>

</div><br><br>

<h3 class="aside-title">TITRE NEWS PHP <b>#1</b><br></h3>

Posté par <b>Neiko</b> - <b>08/04/2019</b> - <b>18:34</b><br><br>

TEST NEWS PHP

</article>

</div>

<h3 class="aside-title">Journal de votre ville</h3>

<p>Pour améliorer votre quotidien et pour l'économie de la ville, devenez commerçant et commencer à vendre vos objets dès maintenant!</p>

<p style="text-align: center;"><a href="../requests/new.html" class="rounded-button blue">Liste des emplois</a></p>

Une manifestation de gilets jaunes est prévu ce week-end! Nous vous déconseillons la place de la mairie pendant cette événement.<br>

</aside>

</div><br><br>

</div>

noopy360

8 avril 2019 à 21:25:14

Donne le css qui va avec si tu veut bien ou encore mieux codepen(signature) ou met en ligne

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Altayir

8 avril 2019 à 21:27:57

C'est pas que je veux pas, mais il y 5/6 pages de .css différente

noopy360

8 avril 2019 à 21:28:51

ton site et pas en ligne ?

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Altayir

8 avril 2019 à 21:31:17

je te l'ai DM

exen

8 avril 2019 à 22:00:06

dm ? du coup tu as ou pas si ou pm le moi aussi stp

Compos sui.

noopy360

8 avril 2019 à 22:15:28

c'est presque résolu exen, juste pour savoir tu as quel age exen ?

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

exen

8 avril 2019 à 22:21:00

Pour ce je vais te répondre en mp

Compos sui.