Discussion :

[pierrot10]

Bonjour,

Je travaille sur un menu qui a les élément justifié.
Il faut qu'il y ait une barre avant chaque élément, sauf pour le premier, de manière à ce que chaque barre soit exactement entre les éléments, quelque soit le redimensionnement du navigateur.

J'essaye sans succès à modifier ceci

Code CSS :

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

1
2
3
4
5
 
nav ul.topnav li::before {content: "|"; color: #FFE61B;
  display: inline-block; width: 1em;
  margin-left: -1em;
}

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div id="myNavbar">
<ul class="topnav"><li class="first level1"><a href="http://www.therapie-isch.ch/" title="Accueil" >Accueil</a></li>
<li class="level1 active"><a href="sophologie.html" title="Sophologie" >Sophologie</a></li>
<li class="level1"><a href="sexothérapie.html" title="Sexothérapie" >Sexothérapie</a></li>
<li class="level1"><a href="parcours.html" title="Parcours" >Parcours</a></li>
<li class="last level1"><a href="contact.html" title="Contact" >Contact</a></li>
</ul>
</div>

Dans le cas actuel, la barre jaune est trop proche de l'élément de droite et il n'est pas adaptive au navigateur.
J'ai essayé de modifer le width et la margin-left avec d'autres valerus.

Comment le feriez-vous?

Milles mercis

[pierrot10]

Le meiux que j'ai pu faire c'est avec ceci

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
nav ul.topnav li::before {content: "|"; color: #FFE61B;
  display: inline-block; width: 25%;
  margin-left: -25%;
}
 
nav ul.topnav li:first-child::before{
	width:0px;
	color: #ff22ff;
	margin-left: 0em;
	content: " ";
}

mais ce n'est pas top pour les deux derniers éléments: http://www.therapie-isch.ch/sophologie.html

Ha, et pour la même occasion, est-ce possible de faire que les barres ne bougent pas quand on passe par-dessus un élément? (il est en bold en hover)

[psychadelic]

Ce serait plus sympa si tu donnais ici un exemple minimal pour comprendre ton problème, plutôt que nous demander d'aller à la pêche sur ton site et y perdre du temps avant de pouvoir sereinement commencer à réfléchir si on peu t'apporter une réponse ou non

Code CSS :

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

1
2
3
4
5
ul { list-style: none; }
ul, li {padding: 0; margin: 0; }
li { display: inline-block; width: 6em; text-align:center; height: 2em; line-height: 2em;}
li:hover { font-weight: bold;}
li:not(:first-child) { border-left: 1px solid teal; }

[pierrot10]

Bonjour psychadelic,

Merci pour ta réponse. Le but de mettre le lien était pour montrer ce que ca donne.
J'ai corrigé mon post ci-dessus pour apporter plus de détail sur le code.

J'ai essayé ta propsition, mais malheureusement ca ne donne pas mieux. Il faut que le menu soit justifié, avec les barres au centrée par rapport au deux éléments

[Invité]

Bonjour,

déjà :

Code css :

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

1
2
3
body {
font-size: 12px;
}

Il faut une loupe !!

Code css :

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

1
2
3
main {
    max-width: 850px;
}

Là, on est de retour dans les années 90, non ?

Remplace par :

Code css :

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

1
2
3
4
5
6
body {
font-size: 1em;
}
main {
    max-width: 1200px;
}

... et on y voit déjà mieux !


Cela étant dit, ta problématique est simple :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav ul.topnav {
  display: table; 
  width: 100%;
}
nav ul.topnav li {
  display: table-cell; 
  border-left:1px solid #FFE61B;
}
nav ul.topnav li:first-child {
  border:0;
}
nav ul.topnav li a {
  display: block; 
  text-align: center; 
}

[pierrot10]

Bonjour
merci.

J'ai modifié la taille du texte et la largeur, comme tu l'as suggéré. Mais dans mon navigateur, ca me fait un texte énorme et un site beaucoup trop large, par rapport a ce qui m'est demandé. Mais si ca peut aider à solutionner le problème du menu.

[psychadelic]

J'ai essayé ta propsition, mais malheureusement ca ne donne pas mieux.

J'ai modifié la taille du texte et la largeur, comme tu l'as suggéré. Mais dans mon navigateur...

c'est quoi cest réponses? en fait on doit jouer aux devinettes ?
dire " ça marche pas" ou "c'est pas bon" c'est tout sauf une réponse constructive, surtout avec une vague réponse incompréhensive.

il faut qu'on puisse reproduire chez nous cette partie de ton code pour essayer par nous même une solution

tu devrai aussi donner une copie d'écran de ce qui cloche à tes yeux et donner les images de ce que tu recherche.

ta page HTML fait presque 200 lignes de code HTML , hors js et css

il y a presque un millier de ligne de code CSS dans ton truc,
et je compte pas bootstrap et font-awesome ou même tether.min.css dont on ne même pas avoir une idée de ce à quoi elle sert

Au passage tu aurait du prévenir que tu utilise boostrap, parce qu'ill est quasi certain que ça joue sur la présentation de ton menu
peut être trafiques tu aussi la présentation de ton css en JS aussi

Alors ne comprte pas sur moi pour aller débogger ton code, et il n'est pas impossible que j'y trouve nombre d'autres trucs à corriger, et normalement on me paye pour ce genre de jobparce qu'on peut y passer des semaines

[pierrot10]

Bonjour jreaux62,

Merci beaucoup. Je m'excuse mais je n'avais pas vu ton message (la fin)
En effet, ta proposition rend vraiment mieux le rendu : http://www.therapie-isch.ch/sophologie.html (NB: je mets le lien, pas pour aller éplucher le code, mais pour montrer le rendu .

Les li se dimensionnent bien en fonction de la taille du texte et proportionnellement. Le seul truc qui va grincer les dents à ma graphiste, est le fait que "tout" bouge quand on passe sur un élément.

J'ai une idée en tête pour résoudre ce problème. Je vais voir.
Merci et bon week-end

[pierrot10]

Bonjour Jreaux62

Problème résolu. J'ai mis ceci sur mon :hover

Code :

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

1
2
3
4
5
 
nav ul.topnav li a:hover {
	font-weight: normal;
	text-shadow: -0.06ex 0 black, 0.06ex 0 black;
}

En grand merci et tout bon week-end

[Invité]

1- Je te le répète :

Code css :

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

font-size: 0.8em;

C'est trop petit pour le confort visuel.


2- Tu devrais vérifié que ton écran n'est pas en ZOOM.
Pour rétablir : "Ctrl" + "0" (zéro)


3- Il est possible aussi de laisser le choix au lecteur :

• Ajuster la taille de la police - jQuery + cookie

[Invité]

RE.

Je viens de regarder le code de ton site, et j'ai remarqué :

Code css :

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

1
2
3
4
5
#row1, #row2 {
    display: grid;
    grid-template-columns: minmax(250px, 250px) minmax(200px, 1fr);
    grid-auto-rows: minmax( 10rem, 1fr );
}

Donc, tu utilises TON PROPRE système de GRID ??

Alors, pourquoi utiliser Bootstrap, qui a SON propre système de GRID !!

Manifestement, tu n'as pas bien lu la DOC :

Code :

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

1
2
3
4
<div class="col-md3 col1">
...
<div class="col-md9 col2">
...

NON. C'est :

Code :

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

1
2
3
4
<div class="col-md-3 col-...">
...
<div class="col-md-9 col-...">
...