Partage

[HTML & CSS] Afficher un texte alignés (espace)

Alignés les deux-points de ponctuation sur plusieurs lignes.

Sujet résolu
16 mai 2018 à 17:38:53

Bonjour,

J'aurais besoin d'aide pour savoir comment afficher un texte où les deux-points de ponctuation de chaque ligne sont alignés. (c'est esthétique bien sur).        J'aimerais utiliser ça pour lister mon setup (config pc, phériphériques etc...)                                                                                                      

Par exemple : 

TEXTE                               : TEXTE

TEXTE 2                           : TEXTE

Comment fonctionne les espaces en html ? J'ai cherché un peu et je suis tombé sur ca :   pour chaque espace je doute que sa sois le mieux... Si il y a un autre code html pour faire ca ou si il y a un code css ? Si je dois utiliser une liste non ordonnée ? ou autre ?

Merci pour vos aides :p

-
Edité par Divlo 16 mai 2018 à 17:39:13

My website : http://divlo.free.fr/

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
16 mai 2018 à 18:02:30

Salut,

Selon ce à quoi ressemblera le reste de ton site, tu peux utiliser flexbox pour faire ça, en définissant deux blocs.

16 mai 2018 à 18:25:46

Merci :lol: mais tu peut m'en dire d'avantage ?

La page de mon site concernée : http://divlo.free.fr/index.php?p=8

Ducoup je centre mon texte avec un text-align: center, et je j'utilise float left et float right.

Mon code HTML : 

<p> Je vais vous présenter mon setup (CONFIG PC, Périphériques) </p> <br> <br> 

 <div class="setup1"> <p>  <strong> CONFIG PC </strong> : <br> <br>
 <strong> Carte mère </strong>      :   MSI Z87-G45 GAMING  <br> <br>
 <strong> Processeur </strong>      :  Intel Core i5-4690k <br> <br>
 <strong> Carte graphique </strong>  :  Zotac GeForce 970 GTX  <br> <br>
 <strong> Mémoire Ram </strong>     :  16 GB (2 x 8Go) Kingston HyperX  <br> <br>
 <strong> Disque Dur </strong>      :  256 GB SSD Crucial & 2 TB Seagate <br> <br>

 </p> </div>

<div class="setup2"> <p> <strong> Périphériques </strong> : <br> <br>
<strong> Clavier </strong> :  Corsair K95 RGB Gaming Keyboard <br> <br>
<strong> Souris </strong> :  Ozone Argon Ocelote World <br> <br>
<strong> Casque Micro </strong> :  Razer Kraken 7.1 Chroma  <br> <br>
<strong> Écran Principal </strong> :  IIyama PL2480H  <br> <br>
<strong> 2ème écran </strong> :  Samsung SyncMaster 2220LM  <br> <br>
<br>
</p> </div> 

Mon code CSS : 

.setup1
{
  float: left;
  margin-left: 19%;
  white-space: pre;
}

.setup2
{
  float: right;
  margin-right: 22%;
  white-space: pre;
}
article p {
  text-align: center;
}

float right et float left c'est déja du flexbox non? Faudrait que je fasse la même chose pour ce que je veut faire ?



-
Edité par Divlo 16 mai 2018 à 18:29:27

My website : http://divlo.free.fr/
16 mai 2018 à 20:13:17

Bonjour Divlo

Je t'ai fait divers exemples :

https://codepen.io/Zonecss/pen/OZopag

Perso je prendrais la solution Tableaux dans flexbox

Découvrez les Css avec la zonecss.fr
16 mai 2018 à 21:06:26

AliasDmc a écrit:

Bonjour Divlo

Je t'ai fait divers exemples :

https://codepen.io/Zonecss/pen/OZopag

Perso je prendrais la solution Tableaux dans flexbox


Merci beaucoup :D j'irai test ca en pratique sur mon site demain ;)

-
Edité par Divlo 16 mai 2018 à 21:07:05

My website : http://divlo.free.fr/
17 mai 2018 à 11:18:41

Bon ben voilà, pas eu le temps de préciser ^^
17 mai 2018 à 17:42:45

Oui effectivemAliasDmc a écrit:

Bonjour Divlo

Je t'ai fait divers exemples :

https://codepen.io/Zonecss/pen/OZopag

Perso je prendrais la solution Tableaux dans flexbox

Oui effectivement sa fonctionne en tout cas merci beaucoup. Étant donné que je suis débutant j'aimerais savoir l'explication de ton code si sa t'ennuie pas trop... D'ailleurs je n'ai jamais entendu parler des balises <tr> <td> <hr> <dt><dd>tu pourrais m'expliquer ce qu'elle font chacune.

Le résultat : http://divlo.free.fr/index.php?p=8

Merci :p

-
Edité par Divlo 18 mai 2018 à 18:17:09

My website : http://divlo.free.fr/
18 mai 2018 à 19:05:45

Bonjour Divlo,

Pour faire des tableaux <tr> => ligne de tableau

<table>
<tr>
    <th>entête de tableau </th>
  </tr>
  <tr>
    <td> cellule de tableau</td>
  </tr>
</table>

Pour faire une liste de définition.

<dl>
  <dt>titre </dt>
    <dd>définition.</dd>
  <dt>titre</dt>
    <dd>définition.</dd>
</dl>



Découvrez les Css avec la zonecss.fr
19 mai 2018 à 11:34:17

AliasDmc a écrit:

Bonjour Divlo,

Pour faire des tableaux <tr> => ligne de tableau

<table>
<tr>
    <th>entête de tableau </th>
  </tr>
  <tr>
    <td> cellule de tableau</td>
  </tr>
</table>

Pour faire une liste de définition.

<dl>
  <dt>titre </dt>
    <dd>définition.</dd>
  <dt>titre</dt>
    <dd>définition.</dd>
</dl>


Ah oki :D je met le sujet en résolu 



My website : http://divlo.free.fr/

[HTML & CSS] Afficher un texte alignés (espace)

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown