Comment faire un trait discontinu

Fermé

Traits

Lili_754 Messages postés 125 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 31 mai 2016 - 24 mai 2012 à 15:34
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 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 :-)

A voir également:

5 réponses

Réponse 1 / 5

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
24 mai 2012 à 23:41

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 mercredi 18 avril 2012 Statut Membre Dernière intervention 31 mai 2016 2
25 mai 2012 à 11:19

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 3 / 5

lepro412 Messages postés 472 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 28 août 2013 41
24 mai 2012 à 17:51

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 mercredi 18 avril 2012 Statut Membre Dernière intervention 31 mai 2016 2
24 mai 2012 à 18:14

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 jeudi 24 septembre 2009 Statut Membre Dernière intervention 28 août 2013 41
26 mai 2012 à 07:20

ben tu voulait un trait discontinu -_-

lili_754
28 mai 2012 à 10:00

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 jeudi 24 septembre 2009 Statut Membre Dernière intervention 28 août 2013 41
28 mai 2012 à 18:00

<hr width:10px>

personnellement je ne vois pas le problème !

Lili_754 Messages postés 125 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 31 mai 2016 2
28 mai 2012 à 18:21

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 mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
29 mai 2012 à 11:52

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 mercredi 18 avril 2012 Statut Membre Dernière intervention 31 mai 2016 2
29 mai 2012 à 15:25

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 mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
Modifié par tryan44 le 29/05/2012 à 16:52

É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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
29 mai 2012 à 16:49

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 mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
29 mai 2012 à 16:51

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 jeudi 24 septembre 2009 Statut Membre Dernière intervention 28 août 2013 41
29 mai 2012 à 17:07

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

Réponse 5 / 5

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
29 mai 2012 à 18:03

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 mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
29 mai 2012 à 18:40

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

Discussions similaires

Newsletters