28173 sujets

CSS et mise en forme, CSS3

[Résolu] Faire un trait en CSS !!

Bonjour à tous

Ma question peut sembler bête, mais je souhaiterais faire un trait en css !!
Du style -----------Mot------------ mais avec les traits collés.

J'ai fait un truc du style

<span class="trait">&nbsp;&nbsp;&nbsp;&nbsp;</span>Mot<span class="trait">&nbsp;&nbsp;&nbsp;&nbsp;</span>

avec
.trait{
text-decoration: line-through;
}


Mais mon trait devant faire environ 200px je me vois mal faire autant d'espaces. Smiley decu

Une pêtite idée ?
Merci d'avance Smiley cligne
Modifié par Shadokman (14 Nov 2006 - 13:53)
Bonjour,

Ou vite fait :

hr{
display: block;
width: 200px;
margin:0;
padding:0;
margin-right: auto;
margin-left: auto;

}

p{
margin:0;
margin-right: auto;
margin-left: auto;
padding:0;
text-align: center;
margin-top: -12px;
background: #fff;
width: 50px;
} 
</style>
<body>
<hr/>
<p>Texte</p>


Ou quelque chose d'approchant !!
Solution plus "propre", avec une image de fond pour dessiner le trait :


p.trait{
width:200px;
background:url(trait.png) repeat-x 0 50%;
text-align:center;
}
p.trait span{
background:#FFF;
padding:0 5px;
}

<p class="trait>
<span>Mot</span>
</p>


Ah je pense que c'était la solution de 20cent en fait
Modérateur
bonjour ,
<edit> ah , deja resolu !</edit>
ou juste en css et une bordure:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ligne de conduite</title>
<style type='text/css'>
p.trait {
border-top:1px dashed; /* ou solid ou ridge ou , etc ... */
position:relative;top:1em;
width:200px;
text-align:center;/* IE */
margin:0;
}
p.trait span {
display:table;/* ff */
display:inline-block;
background:white;
margin:auto;/* ff*/
position:relative;
top:-0.7em;
padding:0 3px;
}
</style>
</head>
<body>
<p class="trait"><span>Mot</span></p>
<p class="trait"><span>Mot</span></p>
<p class="trait"><span>Mot</span></p>
</body>
</html>


+++


que de choix Smiley cligne !
Modifié par gcyrillus (14 Nov 2006 - 14:04)
dans un soucis de gagner en poids, jeprefererai lasolution a base de border:

un div au dessus du mot qui doit supporter le trait
un border bottom sur le div
on joue sur les margin et padding du mot pour le faire chevaucher la bordure et on lui colle un background de couleur pour effacer la bordure sous le mot...

J'ai pas testé mais un truc dans le genre doit etre faisable, paske faire une image juste pour representer un trait... Smiley rolleyes
Soyouz, j'ai fait avec une image de fond de 1 pixels c'est assez léger quand même Smiley cligne
Mais ta solution est aussi intéressante !
Sujet clos
Aller à