Comment faire un trait discontinu

Traits

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention -
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention - 29 mai 2012 à 18:40

Bonjour,

je re poste encore ce message car je n'ai pas eu de réponse.... J'aimerai savoir comment on fait pour faire un trait discontinu comme par exemple ----blablabla-----. Je sais que l'on peut faire un point et on le répète autant que l'on vont et ça peut donner ensuite une ligne... mais je ne sais pas comment le faire...

Merciiii d'avance :-)

Afficher la suite

A voir également:

Trait discontinue
Trait vertical clavier ✓ - Forum Autres distributions Linux
Trait d'union insécable word - Guide
Le signe " | " dans excel - Forum Excel
Trait rose ecran ✓ - Forum Graphisme
Touche du clavier barre verticale - Forum Windows

5 réponses

Réponse 1 / 5

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

Lili 754,
Tu a déjà posé la question et tu ouvre une autre discussion, sur le même sujet, sans pour autant cloturer ou continuer sur la première.

Dotted c'est pour les pointillés.
Dashed c'est pour les tirets.
Ce que tu veux faire est impossible même avec du bricolage "maison". Il y a bien le fieldset (pour encadrer des groupes de champs d'un formulaire) qui ressemble à ce que tu veux faire mais le texte ne sera pas centré quoique...

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention 2

Non ms bien sur que oui on peut répéter un nombre considérable de point afin d'en faire un trait... je sais qu'on peut le faire mais je sais pas comment?? voilà vilouuu :-(

Réponse 2 / 5

lepro412 Messages postés 472 Date d'inscription Statut Membre Dernière intervention 41

<hr> ?????????

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention 2

ben non <hr> c'est une balise qui trace un trait continu...

Réponse 3 / 5

lepro412 Messages postés 472 Date d'inscription Statut Membre Dernière intervention 41

J'ai bricoler un truc essaie et dit moi si sa passe, sachant que hr est une balise donc "stylisable" en css :

<hr style="border-style: dotted; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention 2

Ben j'ai deux trait en pointillé... y a des espaces entre les points ça fait pas vraiment un trait...

lepro412 Messages postés 472 Date d'inscription Statut Membre Dernière intervention 41

ben tu voulait un trait discontinu -_-

lili_754

moi j'ai mis des traits (du 6 du clavier) parce c que je ne pouvais pas faire de trait vraiment sans espace mais à la base ce que je cherche à faire c faire un trait de tel pixel suivi d'un mot puis je refaire mon trait. Je ne veux pas de plein de petit tiré.... Désole si je n'ai pas été claire.

lepro412 Messages postés 472 Date d'inscription Statut Membre Dernière intervention 41

<hr width:10px>

personnellement je ne vois pas le problème !

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention 2

Merciiii ;-) et comment je le fais reprendre de l'autre bout vers la droite

Réponse 4 / 5

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Salut,

Teste ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <style type="text/css">
.texte{
text-align:center;
width:800px;
height:20px;
}
.trait-gauche{
border-bottom: 1px dotted black;
height:10px;
width:45%;
float:left;
}
.trait-droit{
border-bottom: 1px dotted black;
height:10px;
width:45%;
float:right;
}
  </style>
</head>
<body>
<div class="texte">
<div class="trait-gauche"></div>
Mon texte
<div class="trait-droit"></div>
</div>


</body>
</html>

Lili_754 Messages postés 125 Date d'inscription Statut Membre Dernière intervention 2

Ah dsl j'ai bien fait un copier coller de tout ce que tu m'as dit mais malheureusment ça me donne pas du tt ce que je veux :-(

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Étonnant... car j'ai testé sous IE9 Firefox et Chrome et le résultat rend exactement ce que tu cherches à obtenir, c'est à dire un trait pointillé de chaque côté du texte. As tu testé le rendu du code sur un navigateur?

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

Tyran44,
Il ne veut pas de trait fait de pointillés mais un trait continu de chaque coté (pour moi c'est irréalisable).

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Haaaa ok .. il y a juste à changer "dotted" par "solid" dans mon code et ça le fait tranquille..donc c'est réalisable :).

lepro412 Messages postés 472 Date d'inscription Statut Membre Dernière intervention 41

Jolie code ! Un peut gros mais le résultat est pas mal !

Réponse 5 / 5

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Dans le code ci-dessous, on passe le h3 de façon à le mettre en ligne (inline) puis on "joue" avec les dimensions (width) des class "trait-gauche" et "trait-droit". Pour que le texte sous le le h3 soit centré, on l'inclue dans le div de la class "texte" et enfin pour "coller" le texte un peut plus près, on donne une marge négative au paragraphe (p).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <style type="text/css">
h3{
display:inline;
}
.texte{
text-align:center;
width:800px;
height:20px;
}
.texte p{
margin-top:-5px;
}
.trait-gauche{
border-bottom: 1px solid black;
height:10px;
width:42%;
float:left;
}
.trait-droit{
border-bottom: 1px solid black;
height:10px;
width:42%;
float:right;
}
  </style>
</head>
<body>
<div class="texte">
<div class="trait-gauche"></div>
<h3>Mon texte</h3>
<div class="trait-droit"></div>
<p>Mon texte</p>
</div>
</body>
</html>

@lepro412 : merci :). Je pense aussi que ça fait un peut gros juste pour cet effet...il doit bien avoir plus simple.

tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention 220

Version plus simple avec une image :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <style type="text/css">
h3{
display:inline;
background:white;
padding:5px;
}
.texte{
text-align:center;
width:800px;
height:20px;
background: url(image.png) repeat-x center;
}
.texte p{
margin-top:-5px;
}
  </style>

</head>
<body>
<div class="texte">
<h3>Mon texte</h3>
<p>Mon texte</p>
</div>
</body>
</html>

Dans cet exemple, "image.png" est une image représentant un carré noir de 1px sur 1px.

Discussions similaires

Trait noir sur mon ecran

Code pour changer de trait de caractère

ligne horizontal en plein milieu de mon écran

Enlever traits rouge dans Microsoft Word

signification signe égale mais avec 3 barres

trait de coupe sur indesign

Votre réponse

Discussions similaires