Mettre en retrait les lignes d'un paragraphe[résolu]

Bonjour à tous,
Je voudrais obtenir ça :

J'ai réussi en créant un block div pour chaque ligne et des margin left, mais c'est assez empirique et je me doute qu'il doit y avoir un moyen moins aléatoire et plus élégant pour obtenir ce résultat.
Si vous pouviez me mettre sur la voie...
Merci d'avance
Modifié par Sesame (19 Jan 2007 - 19:06)

Hello et bienvenue sur Alsacréations.

Peut-on savoir dans quel contexte tu veux obtenir ce résultat ? C'est justement cette information qui manque dans ta question pour te conseiller une solution plus "élégante".

Julien Royer a écrit :
Hello et bienvenue sur Alsacréations.

Peut-on savoir dans quel contexte tu veux obtenir ce résultat ? C'est justement cette information qui manque dans ta question pour te conseiller une solution plus "élégante".

Bonjour et merci pour ta réponse et ton souhait de bienvenue.
Je suis en train de créer (essayer de créer serait plus juste) un site de présentation pour un ami artisan.
Le blabla en question est dans l'en-tête de la page. Pour être plus précis dans l'en-tête il y a un logo au centre, ses coordonnées à droite et à gauche 4 mots décrivant son champ d'activité, et je voulais décaler ces 4 mots comme indiqué par souci d'esthétisme.
J'ai cherché sur les forums sans trop de succès d'ou ma bidouille avec les div et les margin left.
Dans l'espoir de te lire...

Hello,

Est ce une mauvaise proposition que de faire une image avec tous les détails qu'on veux, le décalage des trois lignes, lui donner le texte en alt, et cette image dans un <p> avec un text-indent ?

HTML

<p class="logoTxt">
<img src="" alt="BlaBlaBla" />
BlaBlaBla
</p>

CSS

p.logoTxt #{text-indent: -2000px;}

Ou bien 3 paragraphes décalés via un positionnement...(ou padding-left sur chaques plus simple...)
Ou alors pour faire simple et surement pas clean, bennnnn inserer des &nbsp; avant chaques lignes .
Modifié par Hum (18 Jan 2007 - 08:54)

Bonjour Hum et merci de t'intéresser à mon cas.
J'avais pensé à l'image. Le pb est que le texte sous forme d'image est beaucoup moins net et lisible. Sinon ta solution fonctionne.
Bonne journée...

salut...

et avec "text-indent", ça ne marche pas ?

Bonjour Sésame,

Pour ma part, si je devais réaliser ceci, je pense que j'utiliserais une liste.
J'affecterais un id pour chaque élément de liste, et ensuite, je leur affecterais un marge différente pour obtenir l'effet souhaité.

Cygnus a écrit :
Bonjour Sésame,

Pour ma part, si je devais réaliser ceci, je pense que j'utiliserais une liste.
J'affecterais un id pour chaque élément de liste, et ensuite, je leur affecterais un marge différente pour obtenir l'effet souhaité.

Pareil... Ou éventuellement un paragraphe par ligne, selon le contexte. Et si tu veux te passer d'un identifiant pour chaque ligne, pense au sélecteur de frère adjacent (et tant pis pour ie6).

Benjamin D.C. a écrit :
Pareil... Ou éventuellement un paragraphe par ligne, selon le contexte.

S'agissant de 4 mots décrivant son champ d'activité, je ne pense pas que le choix d'un paragraphe soit réellement judicieux...
Modifié par Cygnus (18 Jan 2007 - 11:55)

Cygnus a écrit :
S'agissant de 4 mots décrivant son champ d'activité, je ne pense pas que le choix d'un paragraphe soit réellement judicieux...

Hm, ouais, je dois dire que j'ai un peu survolé les posts, d'où mon bête "selon le contexte"... C'est donc bien évidemment d'une liste qu'il s'agit ici.

Bonjour à tous et merci pour vos conseils,

Cygnus est-ce que c'est bien ça que tu préconises :

               <ul>
				<li id="menuis"> Menuiserie</li>
				<li id="plat">Plâtrerie</li>
				<li id="peint">Peinture</li>
				<li id="car">Carrelage</li>
			</ul>

Auparavant j'avais fait ça :

                                 <div id="menuis">Menuiserie </div>
				<div id="plat">Plâtrerie </div>
				<div id="peint">Peinture </div>
				<div id="car">Carrelage</div> 

Peux tu me dire s'il y a un avantage ou un inconvénient à utiliser l'un ou l'autre ?
Bonne soirée
Modifié par Sesame (18 Jan 2007 - 22:05)

Concernant mon précédent message c'est "Cygnus" que je voulais mettre en caractère gras

Sesame a écrit :
Concernant mon précédent message c'est "Cygnus" que je voulais mettre en caractère gras

Tu peux éditer ton message précédent pour modifier son contenu (bouton "éditer", et oui... ). Profites-en pour remplacer les images que tu as mis par du texte dans les balises [ code] et [ /code] (voir les règles du forum, que tu as certainement lu...).

Julien Royer a écrit :
Tu peux éditer ton message précédent pour modifier son contenu (bouton "éditer", et oui... ). Profites-en pour remplacer les images que tu as mis par du texte dans les balises [ code] et [ /code] (voir les règles du forum, que tu as certainement lu...).

C'est fait
J'ai bien tout lu mais j'avais dù oublier...

Sesame a écrit :
Peux tu me dire s'il y a un avantage ou un inconvénient à utiliser l'un ou l'autre ?

Eh bien, dans ta solution, tu utilises 4 balises vides de sens pour mettre en forme une liste d'éléments.
Dans la solution que je te propose, tu utilises une seule balise adaptée à son contenu.
Tu évites donc l'usage de 3 balises inutiles et surtout, adapte ton contenant en fonction de ton contenu.

Quand tu commences à mettre ta page en forme, pose-toi la question de savoir à quoi correspond ton contenu : listes, paragraphes, liens ...
Puis, choisis la balise qui te semble le plus appropriée.
Si tu n'en vois aucune, penche alors pour l'utilisation d'un <div> ou d'un <span> selon le contexte...
Modifié par Cygnus (18 Jan 2007 - 22:45)

Merci pour ta réponse Cygnus, elle est parfaitement claire
et j'essaierai d'en faire mon profit pour la suite...
Bonne soirée.

Voilà une bonne chose de faite
Tu considères que ce sujet est [Résolu] ?

Cygnus a écrit :
Voilà une bonne chose de faite
Tu considères que ce sujet est [Résolu] ?

C'est fait et merci encore