Insérer un trait horizontal

**david-18** · 21/02/2013, 14h47

Bonjour,

J'essaye d'insérer un trait horizontal sur mon site mais je rencontre un problème avec la largeur.

J'ai mis <hr width=100%>, mais le trait touche le bordure de droit de mon section. Mais à gauche, c'est bon, il n'y a pas de problème. Si je change la largeur, ca change aussi a gauche et c'est pas ce que je souhaite.
je veux avoir le même niveau a gauche et a droite comme ceci:

----------------------------------------------------------------------------
Je ne sais pas si vous avez compris mais si oui, comment je pourrai faire?

merci par avance pour votre aide,

**Doppleganger** · 21/02/2013, 15h23

J'ai pas tout compris et je suis pas un expert mais essaie d'aligner ça au milieu, puis peut être ne pas mettre de pourcentage, et de peaufiner avec des margin-left, margin-right

Moi je fais comme ça, mais peut être que c'est pas du tout conventionnelle et totalement dégueulasse

**david-18** · 21/02/2013, 15h34

J'ai essaye de faire avec margin-left et right, j'ai mis ca dans la partie section sur css, ca ne change rien du tout, j'ai mis aussi hr dans le css, mais il n'y a rien qui se passe, c'est comme si on ne fais rien...

le forum de ce site est une bonne exemple de ce que je veux faire: il y a le titre du message puis il y a un trait (le trait ne touche pas au bordure, ne droit ni gauche) et puis il y a le message, le trait sépare donc le titre et le message. C'est exactement ce que je veux faire.

**Doppleganger** · 21/02/2013, 15h39

Dans la balise de ta ligne, mets class="positionligne".

Dans ton fichier CSS, tu mets :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.positionligne{margin-right:0;margin-left:0; text-align:center;}

Et t'essaies de modifier les valeurs des margin.

EDIT:
Euh si tu parle des bordures, il tu peux ajouter

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.positionligne{margin-right:0;margin-left:0; text-align:center;border: 15px solid #fff}

**david-18** · 21/02/2013, 16h01

Je viens d'essayer, mais il n'y a rien qui change...

**david-18** · 21/02/2013, 16h03

Envoyé par Doppleganger

EDIT:
Euh si tu parle des bordures, il tu peux ajouter

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.positionligne{margin-right:0;margin-left:0; text-align:center;border: 15px solid #fff}

Mais si je fais ca, il ne vas pas creer des bordures? c'est pas ca que je veux

**Torgar** · 21/02/2013, 16h19

T'as essayé de mettre un padding: 5px sur le conteneur de ton <hr />

**david-18** · 21/02/2013, 16h26

Envoyé par Torgar

T'as essayé de mettre un padding: 5px sur le conteneur de ton <hr />

j'ai essayé mais rien ne change

**Torgar** · 21/02/2013, 16h28

Bon on va pas perdre plus de temps en devinette, montre nous le code généré s'il te plait.

**david-18** · 21/02/2013, 19h11

En css, j'ai rien modifié, je l'ai mis en html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<br />Bonne visite sur le site!!</p>
	<hr width=100%>

Je t'envoie quand même mon code CSS de la partie section:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
section
{
    width: 940px;
    height: auto;
    clear: both;
	padding-left: 10px;
	padding-top: 5px;
	margin-top: -20px;
    background-color: white;
}

**rodolphebrd** · 21/02/2013, 19h39

La balise hr est stylisable sans problème:
exemple:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
hr{
	width:200px;
	background-color: #0C3;
	height: 1px;
}

**david-18** · 22/02/2013, 13h22

C'est bon, je viens d'essayer, il ne fait pas exactement ce que je voulais mais c'est pas grave... je le laisserai comme ca...

Merci pour vos réponses...