Discussion :

[Aquilon62]

hello je suis en formation interne et je dois reproduire des maquettes sans psd, une des maquettes à un séparateur j'ai trouvé le code via via codepen, il fonctionne parfaitement bien, je règle mes couleurs et op je l'importe dans mon site et la ban, le bot s'affiche bien avec la bonne couleur par contre impossible de voir les traits de chaque coté, même avec l'inspecteur du navigateur (Firefox et chrome à jour) rien, malgré des réglages avec des couleurs comme rose bonbon ou vert fluo rien, pas de trait, sa pèche ou a votre avis ?

[Invité]

Bonjour,

Remplace :

Code :

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

1
2
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);

Code :

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

1
2
	height: 0;
	border-top: 1px solid rgb(48,49,51);

[Aquilon62]

Merci, mais cela ne change rien j'ai toujours que le dot et aucune ligne.

[Invité]

Montre ton site.

[Aquilon62]

voilà en pièce jointe

[Invité]

Ben non...
C'est une page en ligne qu'on voudrait voir.

[Aquilon62]

Pas en ligne qu'en local.

[Aquilon62]

Je recherche à faire cette séparation, pour le point bleu pas de problème, mais impossible de voir les lignes.

[NoSmoking]

Bonjour et bienvenue sur DVP.

Première chose, il est préférable de mettre ton code entre balise [CODE][/CODE], plutôt que des images ou des fichiers zippés.

	Rappel : Aide sur l'utilisation des boutons.

Est ce que tu as essayé un « simple » :

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
.separator {
  position: relative;
  height: 1px;
  background: #CCC;
}
.separator:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border: 1px solid #069;
  border-radius: 50%;
  background: #ABC;
  transform: translate(-50%, -50%);
}

déclaré dans le code HTML simplement comme

Code html :

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

1
2
<h1>Titre</h1>
<div class="separator"></div>

Il y aurait encore plus simple, en utilisant directement l'élément <h1>, mais bon ..!