Menu

Titre en interlignage

Messages postés
6
Date d'inscription
samedi 16 août 2014
Dernière intervention
14 janvier 2019
-
Bonjour,

J'ai une petite connaissance en html et css, mais j'aurais besoin de votre aide.

Je dois faire un site avec logo et texte dans l'entête

Désolé, je n'arrive pas à mettre mon exemple en image

Le texte est à coté du logo, le texte en retrait (effet escalier) est ok je met text-indent: mais mon problème est que je veux que le n (minuscule) de Prénon touche au N (majuscule) de Nom qui est dessous et en retrait .

Je ne sais pas quel balise utilisé dans le html. J'ai fait quelques essayes et la je suis toute mêlé.

Merci pour votre aide


Configuration: Macintosh / Chrome 71.0.3578.98
Afficher la suite 

Votre réponse

1 réponse

0
Merci
Bonjour,
sans voir le code on peut pas dire grand chose.
De quelles balises parlez vous? HTML est dérivé de SGML, comparable à XML. Le principe est que vous indiquez des points de repères qui seront des "éléments" du fichier.
En HTML les balises indiquant du texte sans spécification autre(ex: texte courant) seront p(paragraphe) ou span. Par contre pour faire un effet visuel rien ne vous empêche d'utiliser la balise que vous voulez, tant que vous tenez compte de ses spécificités où que vous les changer.
Je vous conseille d'aller faire un tour du côté d'une recherche web: "positionnement en/avec CSS".
En effet pour faire ce que vous dites vous pouvez simplement indiquer un décalage par rapport à la position précédente(position relative) ou placer de manière absolue(le coin en haut à gauche étant la position 0,0 de la page).
Ceci dit dans le cas d'un logo je ne vous conseille pas cette méthode.
Ce sera complexe pour pas grand chose et mieux vaut faire une image (avec un outil de création graphique) et la publier telle quelle. Un logo c'est rarement le texte puisqu'il est censé exprimer l'idée visuellement. Vous pouvez utiliser du texte dans un logo et travailler la typographie(ce qui est plus permissif avec un outil de création graphique puisque vous ne serez pas limité au police standard).
Votre idée de le faire en CSS implique que celui ci doit être net et précis et compatible avec tout(résolution/compatibilité selon navigateur/etc..) et force à faire beaucoup de code pour un rendu assez limité et simple. Il faudra refaire ce travail à chaque changement. Avec une image il n'y a pas de problème et dans le cas d'un vrai logo vous pouvez l'utiliser(l'image) sur n'importe quel support de publication(pas seulement une page web)en tenant compte des spécificités de ces supports bien sûr.

exemple en code HTML5:
<header style="position :absolute; left:1em;top:1em;width:20%;">
<p>a
<span style="position:absolute;left:1.5em;top:1.5em;" >b</span>
<span "position:relative;left:2em;top:2em;">c</span>
</p>
</header>
<!--
Ici j'utilise des balises span comme un container non définit et placer un décalage de 1 ou 2 em(quadratin 1em correspond à la hauteur de ligne de texte en cours(ligne typo), donc 0.75em = 75%de cette hauteur de ligne). Cela pourrait être n'importe quelle balise.
-->

Il y a bien des manières de positionner(par exemple avec les marges ce qui est plus simple ici) mais l'idée de cet exemple à adapter à votre idée est de montrer que l'on peut positionner comme on veut dans la page les éléments indiqués par une balise. Ici ces éléments sont les lettres du texte à positionner les unes par rapport aux autres(donc varier la marge de gauche et du haut vont décaler vers la droite ou le bas, par ex.).
Comme indiqué précédemment cela sera compliqué à faire (surtout si vous avez un mot avec beaucoup de lettres à positionner) et sensible à ce que l'affichage soit correct en toute circonstance...d'où l'intérêt d'utiliser une image. Surtout que cela correspond plus à HTML = un logo est une image donc il doit être indiqué en tant que telle. Un texte est un texte et doit être indiqué en tant que tel. Comme aussi précisé au dessus le texte d'un logo n'a pas valeur de texte. Rien ne vous empêche de rajouter du texte par contre pour que celui ci soit référencé en tant que tel et de reprendre celui qui apparaît dans le logo(c'est même recommandé).

Voilà la bonne façon de faire est donc d'avoir les 2: un logo qui comprends votre texte(et avec le texte alternatif correct et permets ainsi d'indiquer le texte de l'image du logo) et un texte comprenant le sens/nom utilisé pour le logo/nom utilisé qui celui ci n'a pas besoin d'être mis en évidence puisqu'il est là pour donner des renseignements supplémentaires au lecteur et surtout référencé le texte en tant que tel auprès des moteurs de recherches.


Ps: s'il s'agit d'un titre ce sont les balises de titre(header en anglais) qu'il faut utiliser soit: h1, h2, ...jusqu'à 6 chacun en rapport avec la priorité à donnée au titre(1 pour la première, 2 pour un titre secondaire, etc..). Puisque la question concerne quelle balise choisir jetez aussi un œil sur la valeur sémantique des balises(HTML5 donc les plus récentes) que sont section, article (et l'importance de définir une table des matières au sein d'elles) ainsi que header, main, footer par exemple.
acapy1973
Messages postés
6
Date d'inscription
samedi 16 août 2014
Dernière intervention
14 janvier 2019
-
Je vous remercie pour votre aide, je vais essayer. Pour le logo, je sais que c'est juste une image. Ce que j'ai publié c'était juste pour montrer ce que je voulais faire pour le texte.
Commenter la réponse de topnotch