Comment faire un trait discontinu

Traits

Lili_754 Messages postés 137 Statut Membre -
tryan44 Messages postés 1289 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

5 réponses

Réponse 1 / 5

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
txiki Messages postés 6514 Date d'inscription Statut Contributeur Dernière intervention 609

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.
2
1. Lili_754 Messages postés 137 Statut Membre 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 :-(
  
  0
Réponse 2 / 5
lepro412 Messages postés 508 Statut Membre 41

<hr> ?????????
0
1. Lili_754 Messages postés 137 Statut Membre 2
  
  ben non <hr> c'est une balise qui trace un trait continu...
  
  0
Réponse 3 / 5
lepro412 Messages postés 508 Statut Membre 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"> 
```
0
1. Lili_754 Messages postés 137 Statut Membre 2
  
  Ben j'ai deux trait en pointillé... y a des espaces entre les points ça fait pas vraiment un trait...
  
  0
2. lepro412 Messages postés 508 Statut Membre 41
  
  ben tu voulait un trait discontinu -_-
  
  0
3. 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.
  
  0
4. lepro412 Messages postés 508 Statut Membre 41
  
  <hr width:10px>
  
  personnellement je ne vois pas le problème !
  
  0
5. Lili_754 Messages postés 137 Statut Membre 2
  
  Merciiii ;-) et comment je le fais reprendre de l'autre bout vers la droite
  
  0
Réponse 4 / 5
tryan44 Messages postés 1289 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>
```
0
1. Lili_754 Messages postés 137 Statut Membre 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 :-(
  
  0
2. tryan44 Messages postés 1289 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?
  
  0
3. txiki Messages postés 6514 Date d'inscription Statut Contributeur Dernière intervention 609
  
  Tyran44,
  Il ne veut pas de trait fait de pointillés mais un trait continu de chaque coté (pour moi c'est irréalisable).
  
  0
4. tryan44 Messages postés 1289 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 :).
  
  0
5. lepro412 Messages postés 508 Statut Membre 41
  
  Jolie code ! Un peut gros mais le résultat est pas mal !
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

tryan44 Messages postés 1289 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 1289 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.

Comment faire un trait discontinu

5 réponses

Discussions similaires

Newsletters