La page de tous les problèmes ???? Le retour de la barre de navigation !

Signaler
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
-
 djuan -
Bonjour à tous !
Aujourd'hui, la page web de tous les problèmes décide de se venger ! (Elle se rappelle encore amèrement de la dernière fois...

Ça concerne encore cette satanée barre de navigation...
—————————————————————————————————————————— (Satanée barre de navigation ↓)

Alors, voilà : J'ai mis de super animations sur la barre en question : j'ai différents éléments
li a
qui bougent et passent à une couleur de fond différente dès qu'il y a la souris dessus. Mais le problème, c'est que comme ces cases passent en gris foncé, il faudrait que l'écriture passe en blanc, sinon on ne voit rien !

Donc, j'ai mis dans mon css :
body {
	background-image: url(https://149359637.v2.pressablecdn.com/wp-content/uploads/2017/10/Not-Just-Another-Brick-on-the-Wall-Mural-MU1409-1-min.jpg);
}

h1 {
	color: black;
	margin-left: 20px;
	font-family:subway, sans-serif;
}


ul {
	
	display:table;
	border: 1px solid #555;
    margin: 10px;
    padding: 10px;
    width: 97%;
	height: 20%;
    background-color: #f1f1f1;
	top: 100; left: 0;
	border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}


li {
	
	font-family: subway;
	font-size: 1em;
	height: 20%;
	display: table-cell;
	transition: padding .3s;
	padding: 0px 8px 0px 0px;
}

li a {
	
	display:table-cell;
	text-align: center;
	width: auto;
    color: #000;
    padding: 2px 0px 2px 25px;
    text-decoration: none;
	

}

li.active {
    display: table-cell;
	background-color: #7CFC00;
    color: white;

}

li:hover:not(.active) {
	display: table-cell;
	background-color: #555;
	padding: 0px 30px 0px 30px;
	border: 1px solid #444;
	color: white;
}


Vous voyez le color:white; à la fin ? Eh bien, il est censé changer la couleur du texte... En théorie. Mais alors, pourquoi ça ne fonctionne pas ? Le texte ne passe pas en blanc...

Petite remarque : le texte ne passe pas en blanc non plus pour
li.active{
...

Ce pourrait-il que cet attribut soit écrasé ? Où c'est juste normal (et dans ce cas, comment y remédier ?)

Merci beaucoup !


NB : désolé, je ne peux pas mettre de photo de ma souris passant sur la barre, puisque je dois cliquer sur l'outil de capture d'écran...

3 réponses

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
Ce qui serait vraiment top, c'est que tu mettes en ligne ta page pour qu'on puisse t'aider plus efficacement.

Si tu n'as pas d'hébergement, alwaysdata propose un hosting 100Mo gratuit.
Ils te fourniront une URL pour qu'on puisse accéder à ta page, pas besoin d'acheter de domaine.

J'héberge mes sites chez eux depuis des années, tu peux y aller les yeux fermés. https://www.alwaysdata.com/fr/tarifs/#shared

Ca nous faciliterait grandement la vie pour t'aider ;)
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Merci, mais je ne vois pas comment mettre mon code quelque part ! Je ne vois aucun endroit où mettre mes fichiers...(‾◡◝)

Il n'y a rien (‾◡◝) ça fait du temps que je cherche mais je n'ai pas troué comment mettre le code de sa page (‾◡◝)(‾◡◝). Je souffre (‾◡◝) !

En attente de votre réponse je sanglote sur mon parquet en pensant à l'absurdité de la vie (;´༎ຶД༎ຶ`)

Même sur le forum je ne trouve pas ! Je suis plongé dans les affres sans fond de la métaphysique ! Au secours !
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427 >
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020

As-tu déja utilisé un ftp ? https://www.commentcamarche.net/download/telecharger-129-filezilla-client-64-bits
Pour faire simple, c'est un logiciel qui permet le transfert de fichiers.
Tu en auras besoin pour envoyer tes fichiers sur le serveur web (en l'occurence alwaysdata).
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1 >
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020

J'ai établi une connexion, mais c'est plutôt obscur pour retrouver les fichiers que j'ai réussi à transmettre sur le site alwaysdata...

Je vais essayer de me débrouiller ! En tout cas, merci, avec ça j'en apprend de bonnes ! (Mais où est mon diplôme d'ingénieur informatique x-D)

Merci ! Quand je réussirai, je mettrait les liens ici !
Salut,
métaphysique?
en virant le :not ça donne quoi?
...
li a:hover {
/* j'ai viré aussi display:table-cell; qui était redondant et inutile donc. */
	background-color: #555;
	padding: 0px 30px 0px 30px;
	border: 1px solid #444;
	color: #fff;/* white devrais passer toutefois*/
}

/* par contre à moins que vous n'ayez une classe nommée "active" ce qu'il vaut mieux éviter car ça prête à confusion vu que c'est une valeur de sélecteur CSS l'écriture de la pseudo-classe active se fait comme ceci:*/

li a : active{
...
}

/*
li a : active signifiant le sélecteur CSS quand le clic est enfoncé sur une balise a qui est enfant direct d'un li
et pour :hover ça indique le survol.
En général pas la peine de faire grand chose avec :active vu que ça dure le temps d'un clic ce n'est pas quelque chose de vraiment visible.
*/


Vos 3 règles sur le même élément changeant de sélecteur j'ai utilisé(li:a) le premier tout le temps qui me semble le plus adapté.
Si vous voulez cibler la classe active ça s'écrit comme ça:

.active{
...
}

Bien sûr toujours mieux de changer ce nom pour pas mélanger avec :active
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Merci pour la réponse.
active
est bien un attribut de mes textes "a"
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Je n'ai peut-être pas assez précisé mon code par ailleurs (ce qui explique les confusions avec mes attributs...). Je joint mon lien pour mon site dès que je 'en sors.
active n'est pas un attribut mais bien la valeur de l'attribut "class", on parle plutôt du nom de classe ou de classe pour bien se référer à la règle CSS associée.
Donc renommez le pour éviter les confusions et erreurs d'interprétation(pas bon comme déjà dit d'utiliser un mot clé réservé pour autre chose).
Vous avez essayé ce que j'ai proposé et détailler au dessus?
Pas besoin de joindre un lien quand vous pouvez mettre le HTML directement, idem pour tester que ce soit en local ou sur serveur c'est pareil.