28172 sujets

CSS et mise en forme, CSS3

[Résolu] Indentations en cascade

Bonjour,

Certain que mon problème est trivial, j'ai cherché avant de poster, mais...je n'ai rien trouvé.

Je voudrais faire (les points ne sont là que pour la mise en page)
Titre H1
......Blalbla dans un paragraphe (de type p1)

Titre H1
......Titre h2
............Blabla dans un paragraphe (de type p2)

............Titre h3
..................Blabla dans un paragraphe (de type p3)

............Titre h3
..................Blabla dans un paragraphe (de type p3)

......Titre h2
............Blabla dans un paragraphe (de type p2)

Titre H1
etc...

En d'autres termes je souhaite que l'indentation du paragraphe dépende de celle du titre le précédant.

J'ai donc créé autant de déclarations p..{ ... } que je désire de niveaux.

On ne peut pas faire mieux ?

Merci
Modifié par sergeAles (25 Jan 2010 - 13:48)
Hello,

sergeAles a écrit :
On ne peut pas faire mieux ?
Si tu n'as qu'un et un seul paragraphe après chaque titre tu peux utiliser le sélecteur adjacent :
h1 + p {
	text-indent: 10px;
}

h2 + p {
	text-indent: 20px;
}

h3 + p {
	text-indent: 30px;
}
Merci Heyoan,

C'est exactement ce dont j'avais besoin.

La lecture du lien sur lequel tu m'as envoyé m'a incité à m'interroger, si on veut s'affranchir de la limite d'un seul paragraphe, sur la validité de

h1 + p + p {...}
ou de
h1 + p + p + p {...}


j'ai testé et ça fonctionne !

Merci encore
Modifié par sergeAles (25 Jan 2010 - 13:21)
Bonjour,

En HTML5 avec des éléments SECTION qui vont bien?
<article>
  <h1>Titre niveau 1</h1>
  <section>
    <h1>Titre de niveau 2</h1>
    <p>Un paragraphe.</p>
    <p>Un autre pour la route.</p>
    <section>
      <h1>Titre de niveau 3</h1>
      <p>Etc.</p>
    </section>
  </section>
</article>

Ensuite tu peux styler les section (marge à gauche), styler les paragraphes (marge à gauche aussi, mais pas de marge à gauche pour les titres), et voilà.

Nécessite donc 2 lignes de CSS. Qui dit mieux?

Variantes:
- La même chose toujours en HTML5 mais en utilisant des titres de section H1, H2, H3, etc. en fonction du niveau (comme en HTML4). C'est possible et ce sera sans doute moins déroutant pour la mise en forme d'une part, et pour certains utilisateurs d'autre part.
- La même chose en HTML4 avec des titres de section H1, H2, H3, etc., et des <div class="section">...</div><!--.section-->.
Modifié par Florent V. (25 Jan 2010 - 13:29)
Bonjour Florent,

Ce qui est désespérant (un peu) et passionnant (beaucoup), c'est qu'à chaque fois que je crois avoir progressé d'un millimètre m'apparaissent les kilomètres qui me restent à parcourir.

Les notions dont tu parles (et <section> en particulier) me sont totalement inconnues. Je vais m'y atteler. (Si qqu'un veut suggérer un lien ou deux, je l'en remercie).

Tu dis ... ce sera sans doute moins déroutant .... pour certains utilisateurs d'autre part.
Peux-tu expliciter, stp ?
Penses-tu accessibilité et lecteurs d'écran ?
Modifié par sergeAles (25 Jan 2010 - 13:48)
sergeAles a écrit :
Les notions dont tu parles (et <section> en particulier) me sont totalement inconnues.

Les titres de section H1, H2, etc. font partie de HTML depuis le tout début.

L'élément SECTION est un ajout de HTML5 (encore à l'état de brouillon, on peut voir la spec par curiosité, ou un site comme html5doctor.org). Il permet de définir explicitement les différentes sections d'un document, voire d'une application web.

En général, utiliser des éléments SECTION en plus des titres de section dans un contenu simple (un article de blog par exemple) n'a pas un grand intérêt. L'usage de titres H1, H2, H3, etc. suffit à décrire le contenu et sa structure. Mais rien n'empêche d'être explicite comme dans l'exemple que j'ai donné.

Quant à l'utilisation des H1 partout (pour tous les niveaux), elle est rendue possible en HTML5 lorsque l'on utilise des éléments SECTION (ou autres conteneurs ayant des propriétés similaires). C'est l'agent utilisateur (le navigateur, le lecteur d'écran, le robot d'indexation...) qui va définir le plan du document et le niveau "réel" des titres en se fiant à l'imbrication des sections. Mais ça c'est la théorie, et vu que les navigateurs et lecteurs d'écran et moteurs de recherche sont conçus pour gérer du HTML4 (voire du HTML3, HTML2...), mieux vaut utiliser des titres «comme en HTML4» (ce qui est tout à fait possible en HTML5 aussi).

Dans l'immédiat, je te suggère donc de préférer cette variante:
<div class="article">
  <h1>Titre niveau 1</h1>
  <div class="section">
    <h2>Titre de niveau 2</h2>
    <p>Un paragraphe.</p>
    <p>Un autre pour la route.</p>
    <div class="section">
      <h3>Titre de niveau 3</h3>
      <p>Etc.</p>
    </div><!--.section-->
  </div><!--.section-->
</div><!--.article-->

Les commentaires HTML après les </div> ne sont pas indispensables, c'est surtout pour mieux s'y retrouver et ne pas oublier de fermer des DIV (ou en fermer trop...).

sergeAles a écrit :
Tu dis ... ce sera sans doute moins déroutant .... pour certains utilisateurs d'autre part.
Peux-tu expliciter, stp ?
Penses-tu accessibilité et lecteurs d'écran ?

Je pensais notamment à la navigation par titre dans les lecteurs d'écran. Je doute que beaucoup de lecteurs d'écran soient capables aujourd'hui de produire un plan du document cohérent à partir de <section> imbriqués et de <h1> à chaque niveau.
Merci Florent.
- de cette réponse enrichissante,
- et, par la même occasion du tuto relatif aux fusions de marges..
Modifié par sergeAles (27 Jan 2010 - 09:34)
Sujet clos
Aller à