5545 sujets

Sémantique web et HTML

Bonsoir, mon menu de navigation ne réagit pas et cela est un peu problématique. Je pense que cela vient du CSS "text-align: center;" car en l'enlevant ça re fonctionne mais pourquoi donc et comment y remédier? pouvez vous m'aider svp

code HTML :

<header class="mainheader">
		<div class="bordhaut"></div>	
		<div class="menunav">
				<nav>
<ul class="mainul">
  <li class="active"><a class="activetxt" href="#">Home</a></li>
  <li><a href="page2.html">Photo</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.as">About</a></li>
</ul>
		</div>
	
			</nav>


code CSS :
header.mainheader { background-color: white; }

ul.mainul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  text-align:center;
}

header.mainheader li {
  display: inline-block;
margin-bottom:15px;
}

li {
margin-bottom:15px;/* à adapter */
}

nav.menunav li {
  list-style: none;
}

header.mainheader li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
}

header.mainheader li a:hover {
  background-color: white;
}
.active {
  background-color: #ffff; 
}
ul.mainul a.activetxt {color: black;}


merci d'avance Smiley cligne
Modifié par gab1 (07 Aug 2019 - 00:13)
Modérateur
Salut,

Avant tout tu as mal fermé tes balises :
upload/1565165917-42161-balises.png
C'est pour ca qu'il faut coder avec une bonne indentation du code... il faut d'abord fermer le nav puis la div.

Sinon qu'est-ce qui ne fonctionne pas ?
Avec le code que tu nous a fourni tout fonctionne bien : https://jsfiddle.net/65fpxmqz/
Tu as une version en ligne ?
Modifié par _laurent (07 Aug 2019 - 10:22)
_laurent a écrit :
Salut,

Avant tout tu as mal fermé tes balises :
upload/1565165917-42161-balises.png
C'est pour ca qu'il faut coder avec une bonne indentation du code... il faut d'abord fermer le nav puis la div.

Sinon qu'est-ce qui ne fonctionne pas ?
Avec le code que tu nous a fourni tout fonctionne bien : https://jsfiddle.net/65fpxmqz/
Tu as une version en ligne ?


tout fonctionne bien sauf sur le site en entier ou le menu ne répond pas, rien ne bouge, pas de réaction au survol (sauf pour le dernier bouton) et au clic rien non plu ( sauf pour le dernier encore une foi), comme si la position jouait un rôle sur ça. et maintenant oui regarde : https://artenraw.000webhostapp.com
Modifié par gab1 (07 Aug 2019 - 20:48)
Modérateur
Je m'en doutais. Ton logo passe devant :

upload/1565212423-42161-capture.jpg

Tu n'utilises pas d'inspecteur de code ? Ça aurait été facile pour toi de le voir Smiley cligne
Modifié par _laurent (08 Aug 2019 - 01:00)
Meilleure solution
_laurent a écrit :
Je m'en doutais. Ton logo passe devant :

upload/1565212423-42161-capture.jpg

Tu n'utilises pas d'inspecteur de code ? Ça aurait été facile pour toi de le voir Smiley cligne


Non je n'en utilise pas où puis-je en trouver un? et comment y remédier?
merci, je galère pour si peu depuis tout ce temps, c'est a en perdre la raison aha.
Modérateur
gab1 a écrit :
merci, je galère pour si peu depuis tout ce temps, c'est a en perdre la raison aha.

Haha ou je comprend, c'est toujours comme ça.


gab1 a écrit :
Non je n'en utilise pas où puis-je en trouver un? et comment y remédier?

Pas besoin de chercher c'est intégré à tes navigateurs !
Pour faire apparaitre la console il faut faire F12 (ou clique droit sur la page > "Inspecter" sous Chrome / "Examiner l'élément" sous FireFox / "Inspecter l'élément" sous Edge).
C'est un des outils les plus pratiques pour coder !!

Bonne journée Smiley smile
Modifié par _laurent (08 Aug 2019 - 09:51)
_laurent a écrit :

Haha ou je comprend, c'est toujours comme ça.



Pas besoin de chercher c'est intégré à tes navigateurs !
Pour faire apparaitre la console il faut faire F12 (ou clique droit sur la page &gt; "Inspecter" sous Chrome / "Examiner l'élément" sous FireFox / "Inspecter l'élément" sous Edge).
C'est un des outils les plus pratiques pour coder !!

Bonne journée Smiley smile


merci, cependant je n'arrive pas à y remédier...