Discussion :

[Equipassion]

Bonjour à tous

Je suis en train de créer un site qui n'est pas encore en ligne, tout en apprenant à le faire (de la théorie à la pratique directement )... Je rencontre ce petit problème : dans les titres d'articles et de chapitres (balises h1 ou 2) en mode grand écran, pour une meilleure répartition du texte, j'ai mis des balises <BR>. Le problème est que, quand je passe en mode écran tablette ou portable, le renvoi à la ligne n'est plus "opportun". Existe-t'il une autre solution (media queries par exemple) pour faire en sorte que quand la page a une dimension inférieur à 1024px par exemple, il n'y ait plus ces revois de ligne intempestifs ?

Merci d'avance pour votre aide ;

Bien cordialement ;

JP

[Invité]

Bonjour,

1- une solution simple et astucieuse :
N.B. On suppose ici que tu veux décider à quel(s) endroit(s) se feront les passages à la ligne.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<article>
  <h2>
    Titre sur une ou plusieurs lignes, <br/>avec passages à la ligne <br/>controlés (définis par des br)
  </h2>
</article>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/* passages à la ligne controlés par des br */
article h2 { text-align:center; }
  article h2 br { display:none; }
@media screen and (min-width:1025px) {
  article h2 br { display:block; }
}

2- Sinon, il suffit de limiter la largeur du conteneur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<section>
  <h2>
    Titre sur une ou plusieurs lignes, avec passages à la ligne automatiques, en limitant la largeur du conteneur
  </h2>
</section>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* passages à la ligne automatique */
section h2 { text-align:center; }
@media screen and (min-width:1025px) {
  section h2 {
    max-width:480px; 
    margin-left:auto;
    margin-right:auto;
  }
}

[Equipassion]

Merci, solutions assez évidente quand on l'a connait !

Cordialement ;

JP