[CSS] Espace entre 2 <hr>

**diaboloche** · 28/09/2006, 10h28

Bonjour,

Je n'arrive pas a réduire l'espace entre deux <hr> à 0 sous IE. Sous FF cela fonctionne bien pourtant...

Je voudrais un hr2 collé a un hr3 successif...
Si quelqu'un peut m'aider parce que je ne trouve vraiment pas la solution...

Merci.

**MasterOfChakhaL** · 28/09/2006, 10h46

mmmh mmh,

tout ca me parait un peu confus...

h1 et h2 sont des balises, hr aussi...

Tu veux deux hr collé, ok, mais pourquoi ne pas en faire un plus haut, tu peux jouer sur la couleur et la largeur des bordure, voir la couleur de fond

toi, tu définis dans ton css h2 et h3, donc tu ne fais rien qui concerne une balise hr.

Si tes balises hr ont l'id h2 et h3, déjà je trouve que ca prête à confusion d'identifier une balise avec le nom d'une autre balise, et de plus, en css, tu devrais écrire #h2 et #h3.
le '#" signifie que tu sélectionnes l'élément dont l'identificateur est xxx (ce que tu a écris après le '#')
Si tu veux sélectionner ton élément par rapport à une classe, en css, tu fais comme dit au dessus, excepté que tu remplaces le '#" par le '.' (un point)

Donc j'ai pas trop compris ce que tu voulais et je t'invite à reformuler....

De plus, pour les histoires de truc qui se collent pas alors qu'ils ne devraient pas, la plupart du temps, la solution consiste à commencer ton css par:

Code :

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

1
2
3
4
* {
  margin:0;
  padding:0;
}

puis de régler ces propriétés si nécessaire au cas par cas.

**diaboloche** · 28/09/2006, 10h50

Pfff excuse moi ! J'ai fais n'importe quoi dans mon premier post... même pas copié les bonnes lignes...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
hr { /*Ligne rouge*/
 display:block;
 height: 1px;
 margin: 0;
 padding:0;
  _margin: -7px 0;
  color: #FF0000;
  background-color: #FF0000;
  border:0;
  width: 690px;  
  align: center;
 }
 
 .hr3 { /*Ligne rouge*/
   width: 724px;  
 }
 
 .hr2 /* Grande Ligne noir*/
 {
 color: BLACK;
 background-color: BLACK;
 width: 724px; 
 }
 
  .hr4 /* Petite Ligne noir*/
 {
 color: BLACK;
 background-color: BLACK;
 width: 690px; 
 }

Code :

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

<h1><< DERNIERES NEWS >></h1><hr class="hr2"><hr class="hr3">

Je veux que les 2 hr de style hr2 et hr3 soit collées l'une à l'autre...
Désolé pour l'erreur + haut !

Merci.

**MasterOfChakhaL** · 28/09/2006, 11h04

C'est quoi cette vilaine chose?

Code :

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

_margin: -7px 0;

Bon, j'imagine que tu parles à IE, honnêtement, les marges négatives plus grandes que ton élément, je ne sais pas trop ce que ca peut donner...

ton css n'est pas très propres, mais j'imagine que ca vient de tes essais pour arriver à tes fins.

je ne sais pas si c'est une obligation mais tu mets tes couleurs en majuscule (et je n'ai jamais vu ca) je les mettrais en miniscule.
Tu utlises plusieurs notations pour ces couleurs, c'est pas une erreur, mais je trouve que ca embrouille (à toi de voir).

tu définis, pas mal de propriétés dans hr que tu redéfinis toujours dans tes class (je pense à width) peut être un peu de ménage possible

As-tu pris en compte la dernière parti de mon past précédent (j'ai fait un edit)

Personnellement, j'aurais fait un truc dans le genre:

Code :

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

1
2
3
4
5
6
7
8
 
#tonUniqueHr {
  width: 724px;
  color: #000;
  border-width: 1px;
  border-top-color: #f00;
  border-bottom-color: #000;
}

**ilood** · 28/09/2006, 11h08

Salut

Quel est le but de coller deux hr ?
Si c'est pour faire un souligné double, tu peux jouer avec la bordure de h1

Code :

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

h1 { border-bottom: 6px double #000000; }

Enfin, encode tes caractères spéciaux correctement car < et > peuvent êtres interprétés comme des ouvertures ou fermetures de balises. Utilise plutôt

Code :

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

<h1>&lt;&lt; DERNIERES NEWS &gt;&gt;</h1>

**diaboloche** · 28/09/2006, 11h37

Merci de vos réponses...
Le but de faire 2 hr qui se suivent, c'est de créer un effet visuel de relief... j'insère une ligne noir puis une rouge directement.

J'ai fais un peu le ménage parce que je ne m'y retrouvais plus moi même après tout ces essais...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
hr { /*Petite ligne rouge*/
  display:block;
  height: 1px;
  margin: auto;
  padding:0;
  _margin: -7px 0;
  color: #FF0000;
  background-color: #FF0000;
  border:0;
  width: 690px;  
 }
 
 .hr3 { /*Grande ligne mixte*/
   width: 724px;  
   border-bottom-color:Red;
   border-top-color:Black;
   border-width: 5px;
}

Donc ok pour le principe de jouer sur les couleurs des bordures... mais lorsque j'insère une ligne de style hr3 j'ai simplement une ligne rouge (aussi bien sous IE que FF)...