Hi,

J'ai fait des titres à l'aide de styles CSS et souhaite obtenir sous
chacun d'eux une ligne de couleur bleue des trois-quart de la page
environ.
Le code du titre se présente comme suit :

..Titre {
font-family:"Trebuchet MS", Times New Roman, sans-serif;
font-size:17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #2255ff;


Est-ce possible en css et si oui comment.
Je précise que ce n'est pas un soulignement du titre qui s'obtiendrait
par quelque chose comme : border-bottom: 2px solid blue;
mais un trait plus long.

Par avance merci.

Bernd wrote:
> Hi,

Hugh !

> J'ai fait des titres à l'aide de styles CSS

C'est très bien :-)

> et souhaite obtenir sous
> chacun d'eux une ligne de couleur bleue des trois-quart de la page
> environ.
>
> Est-ce possible en css et si oui comment.

..Titre { width: 75%; border-bottom: 1px solid blue; }

<h1 class="Titre">Ho! le bô titre !</h1>

> Je précise que ce n'est pas un soulignement du titre qui s'obtiendrait
> par quelque chose comme : border-bottom: 2px solid blue;
> mais un trait plus long.

Sans border, je vois pas comment ?

ASM a écrit :
> Bernd wrote:
>> J'ai fait des titres à l'aide de styles CSS

> .Titre { width: 75%; border-bottom: 1px solid blue; }
>
> <h1 class="Titre">Ho! le bô titre !</h1>

Avec en plus un petit margin-left pour le centrer.

>> Je précise que ce n'est pas un soulignement du titre qui s'obtiendrait
>> par quelque chose comme : border-bottom: 2px solid blue;
>> mais un trait plus long.

plus long que quoi ? si le bloc du titre fait les 3/4 de la largeur le
bord inferieur le fait aussi.

Bernd a présenté l'énoncé suivant :

> J'ai fait des titres à l'aide de styles CSS et souhaite obtenir sous
> chacun d'eux une ligne de couleur bleue des trois-quart de la page
> environ.
> Le code du titre se présente comme suit :

> .Titre {
> font-family:"Trebuchet MS", Times New Roman, sans-serif;
> font-size:17px;
> font-style: normal;
> line-height: normal;
> font-weight: normal;
> font-variant: normal;
> text-transform: none;
> color: #2255ff;
>
> Est-ce possible en css et si oui comment.

..Titre:after {content: "<hr class='hrtitre' />" }

..hrtitre {width: 75% ;
color: rose-à-pois-verts ;
height: 5px ;
... }

Raphaël Wils <raphaelpoinwilsatclub-internetpointfr>
wrote:

> >> Je précise que ce n'est pas un soulignement du titre qui s'obtiendrait
> >> par quelque chose comme : border-bottom: 2px solid blue;
> >> mais un trait plus long.
>
> plus long que quoi ? si le bloc du titre fait les 3/4 de la largeur le
> bord inferieur le fait aussi.

Je n'ai pas encore essayé les 2 autres réponses fournies mais ce que je
veux c'est par exemple un titre : Hello sous-lequel va se tracer un
trait assez fin qui a a-peu-près la longueur des 3/4 de la page e non
pas le soulignement de hello seul.

ASM <stephanemoriaux.NoAdmin> wrote:

>
> .Titre { width: 75%; border-bottom: 1px solid blue; }
>
> <h1 class="Titre">Ho! le bô titre !</h1>
>> Sans border, je vois pas comment ?

ça ne marche pas - cela souligne juste le titre. Si le titre comporte 4
lettres, le trait au-dessous a la largeur des 4 lettres.
Il me faudrait un trait de 300px de large.

Cela dit, l'instruction width: 75% devrait pourtant le faire ?

Sergio <laposte> wrote:

> Bernd a présenté l'énoncé suivant :
>
> > J'ai fait des titres à l'aide de styles CSS et souhaite obtenir sous
> > chacun d'eux une ligne de couleur bleue des trois-quart de la page
> > environ.

J'ai donc maintenant cela :

..Titre {
font-family:"Trebuchet MS", Times New Roman, sans-serif;
font-size: 17px;
color: #2255ff;
}

..Titre:after {content: "<hr class='hrtitre' />" }

..hrtitre {width: 75% ;
color:blue ;
height: 5px ;
}

Il ne tire pas le trait escompté. L'erreur doit être dans l'agencement
des 3 styles - mais où ?

Par avance merci.

Bernd a écrit :
> ASM <stephanemoriaux.NoAdmin> wrote:
>>
>
> ça ne marche pas - cela souligne juste le titre. Si le titre comporte 4
> lettres, le trait au-dessous a la largeur des 4 lettres.
> Il me faudrait un trait de 300px de large.
>
> Cela dit, l'instruction width: 75% devrait pourtant le faire ?

Bien sur que cela marche. Tu es sûr d'avoir bien repris l'exemple donné
? ou mieux puisque cela doit s'appliquer à tous tes titres :

h1 {
width: 75%;
margin: auto;
border-bottom: 1px solid blue;
}

Bernd wrote:
>>>J'ai fait des titres à l'aide de styles CSS
>>>et souhaite obtenir sous
>>>chacun d'eux une ligne de couleur bleue des trois-quart de la page
>>>environ.
>>
>>.Titre { width: 75%; border-bottom: 1px solid blue; }
>>
>><h1 class="Titre">Ho! le bô titre !</h1>
>
> ça ne marche pas

Vous devez avoir une règle qui empiète alors...

Regardez sur cet exemple simple ça fonctionne :
[url down]

Bruno patri <b.patri+ng> wrote:

> Bien sur que cela marche. Tu es sûr d'avoir bien repris l'exemple donné
> ? ou mieux puisque cela doit s'appliquer à tous tes titres :
>
> h1 {
> width: 75%;
> margin: auto;
> border-bottom: 1px solid blue;
> }

ça devient compliqué car je n'utilise pas les balises h1,h2, etc,
Pour l'instant, j'en reste là car les modifs seraient bien trop longues
à faire.
Merci de tes tuyaux.

Pierre Goiffon <pgoiffon> wrote:

> Vous devez avoir une règle qui empiète alors...
>
> Regardez sur cet exemple simple ça fonctionne :
> [..]

En effet ça fonctionne sur ton exemple mais pour des raisons de temps je
ne peux pas retransformer le tout avec des balises h - ce serait trop
long.
Du coup j'appelle l'image d'un trait fin de 400px de long fait avec un
soft de dessin. Mais c'est plus lourd à DLer que la solution CSS.

ASM <stephanemoriaux.NoAdmin> writes:

> .Titre { width: 75%; border-bottom: 1px solid blue; }

Juste par curiosité, imaginons une petite variante. J'aimerais
un tel trait de soulignement, de la largeur de la moitié de la
page. Et si le titre est plus long, qu'il soit formaté
normalement, c'est à dire qu'il continue au-delà des 50 %.

Quelqu'un a-t-il une idée ?

--drkm

Le 28/06/2005 23:40, drkm a écrit :
>
>> .Titre { width: 75%; border-bottom: 1px solid blue; }
>
> Juste par curiosité, imaginons une petite variante. J'aimerais
> un tel trait de soulignement, de la largeur de la moitié de la
> page. Et si le titre est plus long, qu'il soit formaté
> normalement, c'est à dire qu'il continue au-delà des 50 %.
>
> Quelqu'un a-t-il une idée ?

Remplacer width par min-width ?
(non testé)

Olivier Miakinen <om+news> writes:

> Remplacer width par min-width ?

Mais alors, la ligne sera elle aussi plus longue dans ce cas.
Non ? Mais si je veux une ligne de longueur fixe (par rapport à
la longueur de la page), quelle que soit la longueur du titre ?

--drkm

drkm wrote:
> Olivier Miakinen <om+news> writes:
>>>Remplacer width par min-width ?
>> Mais alors, la ligne sera elle aussi plus longue dans ce cas.
> Non ? Mais si je veux une ligne de longueur fixe (par rapport à
> la longueur de la page), quelle que soit la longueur du titre ?

Qque chose m'échappe dans ton énnoncé :

Soit une règle fixant la longueur du titre à 400px :
- soit un titre à 150px -> soulignement = 400px
- soit un titre de 420px :
normalement il va être bloqué à 400px
et (à ce que je crois) va s'afficher sur 2 lignes
avec le soulignement de 400 px sur 2ième ligne

Soit une règle fixant la longueur minimale (min-widh) à 400px
- titre de 200px -> soulignement : 400px
- titre de 450px -> soulignement de 450px

Pour ton idée : souligement 400px et texte > 400px

h1 { border-bottom:1px solid blue; width: 400px }
h1 span { white-space: nowrap; letter-spacing: 4px; }

<h1><span>voici ici un tres tres long titre qui racconte n'importe quoi
de pas interressant juste comme çà pour le test de la css mise en place
pour simple curiosité</span></h1>

Çà va-t-y pas déborder de la fenêtre ?
Ho ! que si !