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

Fermé
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 - 21 mai 2020 à 16:22
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 - 2 juin 2020 à 16:59
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...
A voir également:

3 réponses

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
22 mai 2020 à 13:42
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 ;)
0
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 1
Modifié le 22 mai 2020 à 14:23
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 !
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431 > Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022
22 mai 2020 à 14:55
As-tu déja utilisé un ftp ? https://www.commentcamarche.net/telecharger/web-internet/9811-filezilla-client/
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).
0
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 1 > prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020
29 mai 2020 à 23:02
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 !
0
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
0
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 1
29 mai 2020 à 22:45
Merci pour la réponse.
active
est bien un attribut de mes textes "a"
0
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 1
Modifié le 29 mai 2020 à 23:03
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.
0
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.
0
Lecodeurhtmlcss Messages postés 77 Date d'inscription lundi 20 avril 2020 Statut Membre Dernière intervention 24 août 2022 1 > djuan
Modifié le 2 juin 2020 à 17:01
alors :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

 <head lang="fr">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  <link href="css/stylesheet1.css" type="text/css" rel="stylesheet" media="all">
  <title>"Bar'ParKs, un petit producteur de barres de slides!"</title>
  <link href="http://www.barparks.com/page_acceuil">
  <meta name="description" content="Vous cherchez une barre de slide artisanale, bien faite, spécialisée et pas cher ? Cette page est l'acceuil du site web.">
  <meta http-equiv="Content-Language" content="fr-CA" />
  <meta http-equiv="Cache-Control" content="max-age=600" />
  <meta http-equiv="Expires" content="Wed, 15 Apr 2040 17:00:59 GMT" />
  <meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
  <link rel="icon" href="favicon.ico"/>
 </head>
 
 
 
 <body>
  <span>
   <ul>
    <li><img class="logo" style="vertical-align:middle" src= "logolarge.png" alt="logo de Bar'ParKs"></li>
    <li class="active"><a  href="http://www.barparks.com/page_acceuil">- ACCEUIL -</a></li>
    <li><a href="http://www.barparks.com/qui-nous_sommes">- QUI SOMMES-NOUS ? -</a></li>
    <li><a href="http://www.barparks.com/commander">- COMMANDER -</a></li>
    <li><a href="http://www.barparks.com/photos">- PHOTOS -</a></li>
    <li><a href="http://www.barparks.com/commantaires">- COMMENTAIRES -</a></li>
    <li><a href="http://www.barparks.com/contact">- CONTACT -</a></li>
   </ul>
  </span>
  
  <p> "" </p>
  <p> "" </p>
  <p> "" </p>
  
  <div class= "texte_barre">
   <h1> "Bonjour les amis ! Aujourd'hui, je vais vous parler d'un sujet qui ne vous passionne pas tous, d'ailleurs on ne vous demande pas ce que vous en pensez, et d'ailleurs si vous avez des questions posez-les, on en parle, on en discute, mais bref revenons à notre sujet (oui cette phrase est longue), notre sjet donc, d'une simplicité et d'une breveté dont l'imagination même vous fera sourire !  L'histoire du communisme recouvre l'ensemble des évolutions de ce courant d'idées et, par extension, celle des mouvances et des régimes politiques qui s'en sont réclamés. Le communisme se développe principalement au xxe siècle, dont il constitue l'une des principales forces politiques1 : à son apogée, durant la seconde moitié du siècle, un quart de l'humanité vit sous un régime communiste2.


Sommaire
1 Origines du communisme
1.1 Origines du courant d'idées
1.2 Formation du terme
1.3 Le communisme dans les premières années du mouvement socialiste
1.3.1 Naissance du socialisme
1.3.2 Le blanquisme
1.3.3 Le socialisme utopique
1.3.4 Le Manifeste du parti communiste
1.4 Le communisme de Marx
1.5 Diffusion du socialisme et du marxisme
1.5.1 De la première à la deuxième Internationale
1.5.2 Querelle entre réformistes et révolutionnaires
1.6 Le contexte particulier de la Russie
2 Révolution russe et naissance du mouvement communiste mondial
2.1 Prise du pouvoir par les bolcheviks en Russie
2.1.1 La chute du tsarisme
2.1.2 La révolution d'Octobre
2.2 Guerre civile russe et survie du régime bolchevik
2.2.1 De Brest-Litovsk à la guerre civile
2.2.2 Terreur en Russie
2.2.3 Victoire des bolcheviks
2.2.4 Consolidation du régime
2.2.5 Formation de l'URSS
2.3 Échec de la vague révolutionnaire en Europe
2.3.1 Guerre civile en Finlande
2.3.2 Révolution en Allemagne et écrasement des spartakistes
2.3.3 Agitations sociales en France et en Italie
2.3.4 Naissance des premiers partis communistes hors de Russie et création du Komintern
2.3.5 Révolutions en Hongrie et en Bavière
2.3.6 Essoufflement des révolutions et défaite contre la Pologne
2.3.7 Victoire des communistes en Mongolie
3 Le communisme international dans l'entre-deux-guerres
3.1 Expansion du mouvement communiste dans les années 1920-1930
3.1.1 Naissance de partis communistes sur tous les continents
3.1.1.1 Développement de la Troisième Internationale
3.1.1.2 En France
3.1.1.3 En Italie
3.1.1.4 Dans le reste de l'Europe
3.1.1.5 En Amérique latine
3.1.1.6 En Chine
3.1.1.7 Dans le reste de l'Asie et en Afrique
3.1.2 Les tendances communistes minoritaires
3.1.3 Réorganisation du Komintern
3.1.4 Échecs du mouvement communiste
3.1.4.1 En Europe
3.1.4.2 En Asie du Sud-Est
3.1.4.3 En Amérique latine
3.1.4.4 Début de la guerre civile chinoise
3.2 Stalinisation du communisme international
3.2.1 Mort et succession de Lénine
3.2.2 Victoire de Staline sur ses rivaux
3.2.3 Renforcement du contrôle sur les partis communistes
3.3 Politiques staliniennes en URSS : collectivisation, industrialisation et campagnes de terreur
3.3.1 De la persécution des koulaks aux grandes famines
3.3.2 Autres transformations de la société soviétique sous Staline
3.3.3 Des premières purges staliniennes à la grande terreur
3.4 De la ligne classe contre classe aux fronts populaires
3.5 L'opposition trotskyste
3.6 La guerre d'Espagne
3.7 La situation en Chine
3.7.1 La Longue marche
3.7.2 Guerre contre le Japon et ascension de Mao
4 Le communisme dans la Seconde Guerre mondiale
4.1 L'URSS dans la guerre
4.1.1 1939–1941 : pacte avec l'Allemagne nazie
4.1.2 Attaque allemande et guerre totale en URSS
4.1.3 L'URSS victorieuse
4.2 Les résistances communistes
4.2.1 En Europe
4.2.1.1 France
4.2.1.2 Balkans
4.2.1.2.1 Grèce
4.2.1.2.2 Yougoslavie
4.2.1.2.3 Roumanie
4.2.1.2.4 Albanie et autres pays
4.2.1.3 Italie
4.2.1.4 Autres pays européens
4.2.2 En Extrême-Orient
5 L'essor du communisme après 1945 et le début de la guerre froide
5.1 Instauration des régimes communistes en Europe de l'Est
5.1.1 Formation du Bloc
5.1.1.1 Yougoslavie
5.1.1.2 Albanie
5.1.1.3 Pologne
5.1.1.4 Roumanie
5.1.1.5 Bulgarie
5.1.1.6 Tchécoslovaquie
5.1.1.7 Hongrie
5.1.1.8 Allemagne de l'Est
5.1.2 Fonctionnement des régimes communistes est-européens
5.1.3 Rupture avec la Yougoslavie
5.1.4 Purges politiques au sein du Bloc de l'Est
5.2 Le communisme yougoslave après 1948
5.3 Dans le reste du monde occidental
5.3.1 En Europe
5.3.1.1 La guerre civile grecque
5.3.1.2 En France
5.3.1.3 En Italie
5.3.1.4 En Finlande
5.3.1.5 En RFA
5.3.1.6 En Autriche
5.3.1.7 En Belgique
5.3.1.8 Au Royaume-Uni
5.3.1.9 En Suisse
5.3.1.10 À Saint-Marin
5.3.2 Aux États-Unis
5.3.3 En Amérique latine
5.4 Conflits militaires et implantation du communisme en Asie
5.4.1 Victoire des communistes en Chine
5.4.2 Premières années du régime maoïste
5.4.3 La guerre de Corée
5.4.4 De la guerre d'Indochine à la guerre du Viêt Nam
5.4.5 Dans le reste de l'Asie
5.4.5.1 Asie de l'Est et du Sud-Est
5.4.5.2 Proche et Moyen-Orient
5.5 Divisions du trotskysme après 1945
5.6 De l'apogée du stalinisme à la mort de Staline
6 Divisions et mutations du camp communiste après l'époque stalinienne
6.1 La déstalinisation et ses suites
6.1.1 Ascension de Khrouchtchev
6.1.2 Réorganisation du bloc de l'Est et dénonciation du stalinisme
6.1.3 Bouleversements en Pologne et en Hongrie
6.1.3.1 Les évènements de Pologne
6.1.3.2 L'insurrection de Budapest
6.1.4 Limites de la déstalinisation et rupture avec la Chine
6.1.4.1 L'URSS sous Krouchtchev
6.1.4.2 Rupture sino-soviétique
6.1.4.3 De Krouchtchev à Brejnev
6.2 Évolutions du bloc de l'Est
6.2.1 Diversité des voies politiques en Hongrie, en RDA et en Roumanie
6.2.1.1 Hongrie : libéralisation relative
6.2.1.2 RDA : de la construction du mur de Berlin à la détente avec l'Ouest
6.2.1.3 Roumanie : de l'autonomie au régime de Ceaușescu
6.2.2 Le Printemps de Prague
6.2.3 Contestations en Pologne : des émeutes de la Baltique à la répression de Solidarność
6.2.4 Les accords d'Helsinki
6.3 Les cas de la Yougoslavie et de l'Albanie
6.4 La révolution castriste à Cuba
6.4.1 Prise du pouvoir par Castro
6.4.2 Affaire de la baie des Cochons et crise des missiles
6.4.3 Politiques intérieure et extérieure du régime castriste
6.5 La Chine sous Mao et l'après-Mao
6.5.1 Les Cent fleurs
6.5.2 Le Grand Bond en avant
6.5.3 La Révolution culturelle
6.5.4 De la fin de la période maoïste à l'ère Deng Xiaoping
6.6 Guerres et basculements politiques en Asie du Sud-Est
6.6.1 Conflits au Viêt Nam et au Laos
6.6.2 Massacre des communistes en Indonésie
6.6.3 Victoires communistes dans la péninsule indochinoise
6.6.4 Massacres au Cambodge et nouveaux conflits en Asie du Sud-Est
6.7 Dans le reste de l'Asie et dans le monde arabo-musulman
6.7.1 Mongolie
6.7.2 Corée du Nord
6.7.3 Inde
6.7.4 Népal
6.7.5 Japon
6.7.6 En Asie de l'Ouest et en Afrique du Nord
6.7.6.1 Israël
6.7.6.2 Iran
6.7.6.3 Monde arabe
6.7.6.4 Turquie
6.7.7 Intervention soviétique en Afghanistan
6.8 Le communisme en Afrique subsaharienne
6.8.1 La difficile implantation du communisme en Afrique
6.8.2 Nouveaux régimes et conflits militaires
6.8.2.1 Basculements de pays africains dans le camp communiste
6.8.2.2 Guerres et terreur en Éthiopie
6.8.2.3 Guerres civiles en Angola et au Mozambique
6.8.2.4 Des pays d'orientation socialiste
6.9 Guérillas, coups d'État et révolutions sur le continent américain
6.9.1 Première vague de guérillas
6.9.2 Coup d'État au Chili contre la coalition socialistes-communistes
6.9.3 Deuxième vague de guérillas
6.9.4 Le régime sandiniste au Nicaragua
6.9.5 Révolution et invasion à la Grenade
6.10 Dans les démocraties occidentales
6.10.1 Situations des partis communistes
6.10.1.1 France
6.10.1.2 Italie
6.10.1.3 Finlande
6.10.1.4 Grèce
6.10.1.5 Saint-Marin
6.10.1.6 Espagne
6.10.1.7 Chypre
6.10.1.8 Portugal
6.10.1.9 Belgique
6.10.1.10 Royaume-Uni
6.10.1.11 Suède
6.10.1.12 Autres pays d'Europe du Nord
6.10.1.13 États-Unis
6.10.1.14 Canada
6.10.1.15 Australie et Nouvelle-Zélande
6.10.2 L'eurocommunisme
6.10.3 Déclin électoral des partis italien, français et finlandais
6.10.4 Variations et renouvellements du marxisme
6.10.5 L'extrême-gauche occidentale
6.10.5.1 Développement et déclin du maoïsme
6.10.5.2 Les mouvements trotskystes
6.10.5.3 De l'âge d'or du gauchisme européen aux années de plomb
7 Chute de la majorité des régimes communistes
7.1 Mouvement de réformes en URSS
7.2 Écroulement des régimes européens
7.2.1 Hongrie
7.2.2 Pologne
7.2.3 RDA
7.2.4 Tchécoslovaquie
7.2.5 Bulgarie
7.2.6 Roumanie
7.2.7 Yougoslavie
7.2.8 Albanie
7.3 Transitions politiques en Asie et en Afrique
7.4 L'écrasement du Printemps de Pékin
7.5 Fin de l'URSS
8 Le communisme après 1989
8.1 Les régimes communistes actuels
8.1.1 Chine
8.1.2 Viêt Nam et Laos
8.1.3 Corée du Nord
8.1.4 Cuba
8.2 Dans les pays ex-communistes
8.2.1 Russie et autres pays de l'ex-URSS
8.2.2 Autres anciens pays du bloc
8.2.3 Cambodge
8.2.4 Afrique
8.3 Les mouvements communistes dans le reste du monde
8.3.1 Italie
8.3.2 France
8.3.3 Scandinavie
8.3.4 Chypre
8.3.5 Grèce
8.3.6 Afrique du Sud
8.3.7 Inde
8.3.8 Népal
8.3.9 Autres pays
8.3.10 Les diverses tendances de l'extrême gauche
8.3.11 Permanence des références communistes
9 Notes et références
10 Annexes
10.1 Articles connexes
10.2 Bibliographie
10.2.1 Ouvrages généraux
10.2.2 Histoires nationales
10.2.3 Biographies
10.2.4 Familles idéologiques
10.2.5 Articles
10.3 Liens externes"</h1>
  </div>
  
 </body>
 
 
</html>


Note : j'ai pris la page la plus longue de wikipédia, donc aucun lien avec autre-chose

@font-face{ 
 font-family: 'subway';
 src: url('Subway-Black.eot');
 src: url('Subway-Black.eot?#iefix') format('embedded-opentype'),
      url('subway-black-webfont.woff') format('woff'),
      url('Subway-Black.ttf') format('truetype'),
      url('Subway-Black.svg#Subway-Black') format('svg');
}



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 {
 background-color: #7CFC00;
    color: white;

}

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



.logo {
 text-align: middle;
 height: 70px;
 width: 70px;
}

.banner {
 
 position: fixed;
}





.texte_barre {
 display:inline-block;
 border: 1px solid #555;
    list-style-type: none;
    margin: 10px;
    padding: 10px;
    width: 97%;
    background-color: #f1f1f1;
 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);
 top: 500px;
 
}


0