Partage

Bug de liens hypertexte et d’espacement :'(

1 2 >>

Sujet résolu

21 janvier 2020 à 13:05:33

Bonjour, je vous remercie de lire mon message, je suis en train de crée un site internet, pour une mini-entreprise dans le cadre scolaire (c’est pour cela qu’il y a des parenthèses écris noms de l’entreprise ou autre).

J’ai deux problèmes dont je ne comprends pas la cause, j’ai beaucoup de page donc je vous conseille d’aller sur l’url pour mieux comprendre: http://mesitou.fr/

Mon premier problème est que quand je clique sur le bouton "notre équipe" l’espace entre le bouton "accueil" et le "notre équipe" augmente. Si nous revenons sur la page accueil, l’espace se rétrécie.

J’aimerais que la taille ne change pas, le problème n’arrive que sur cette page (accueil) toutes les autres pages on le même écartement.

Mon deuxième problème est que certains liens hypertextes ne fonctionnent pas, je ne sais pas pourquoi ?

J’utilise du php, si cela peut poser problème, il n’est pas très utile donc je peux le supprimer si nécessaire.

(Pour avoir le code, vous pouvez sur l’url http://mesitou.fr/ clic droit, afficher code source de la page et pour le css, clic droit, inspecter, sources, format.css)

Merci de votre réponse.

Voici au cas-ou le code css

/* Navigation PC */
#navig 
{
   margin:0;
   padding:0;
   list-style-type:none;
   background:rgba(0,32,96,0); /* modifier le fond 1 rgb(x,x,x,x) par (voir document), cela modifiera le bleu foncée sur le site */
   float:left;
   width:19%;
   /*border:1px solid rgb(0,32,96,0.2); /* mettre la même couleur que fond 1 */
   border-width:1px 1px;
}
 
#navig li 
{
   display:inline;
   padding:0;
   margin:0;
   font-size: 1.35em;
}

#navig a:link, #navig a:visited 
{
   color: white; /* modifier la couleur du texte */
   /*background: rgba(0,32,96,0.5); /* mettre la même couleur que fond 1 */
   padding: 7px 21px 7px 10px;
   float:left;
   width:auto;
   /*border-right:1px solid rgba(0,32,96,0.2); /* mettre la même couleur que fond 1 */
   text-decoration:none;
   font:bold 1em/1em Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   text-shadow: 2px 2px 2px #555;
}

#navig li:first-child a 
{
   /*border-left:1.5px solid rgb(0,32,96,0.2); /* mettre la même couleur que fond 1 */
}

#navig a:hover 
{
   color:#fff;
   background:rgba(0,50,150,0.5); /* mettre la couleur du fond 2, cela modifiera la couleur du fond en bleu plus claire mais pas encore bleu ciel */
}
      
#accueil #navig-accueil a, #equipe #navig-equipe a, #produit #navig-produit a, #parcour #navig-parcour a
{
  background:rgba(0,115,150,0.5); /* mettre la couleur du fond 3, cela modifiera la couleur du fond en bleu ciel très claire */
  color:#fff;
  text-shadow:none;
}
 
#accueil #navig-accueil a:hover, #equipe #navig-equipe a:hover, #produit #navig-produit a:hover, #parcour #navig-parcour a:hover
{
  background:rgb(0,115,150,0.75); /* mettre la même couleur que fond 3 */
}

#navig a:active 
{
   background:rgb(0,115,150,0.75); /* mettre la même couleur que fond 3 */
   color:#fff;
}

#nav
{
   position: fixed;
   width: 100%;
   height: 100px;
   top: 250px;
   bottom: 0px;
}

.menu
{
   float:left;
   background-color:rgba(0,32,96,0.75); /* mettre la même couleur que fond 1 */
   height:754px ;
   width:18% ;
   text-align: center;
   top: 0px;
}
/* Fin Navigation PC */









/*#tel-menu a 
{
   background-color: white; 
   border: none;
   color: black;
   padding: 1px 320px;
   text-decoration: none;
   display: inline-block;
   font-size: 10px;
 }
*/
 #tel-menu a, #bars{
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Trebuchet MS;
	font-size:15px;
	font-weight:bold;
	padding:1px 2px;
	text-decoration:none;
}
/*#tel-menu a:hover, #bars a:hover{
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}*/
#tel-menu a:active, #bars a:active{
	position:relative;
	top:1px;
}


#tel-menu
{
   width:125px ;
   height: 100%;
   float:left;
   z-index: 2;
   position:relative;
}
 
#hidden_1, #hidden_2, #hidden_3, #hidden_4, #hidden_tel_1, #hidden_tel_2, #hidden_tel_3, #hidden_tel_4, #hidden_tel_5, #hidden_tel_6, #hidden_tel_7
{
   visibility: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}


@media all and (max-width: 1425px)
{
   #none_1, #none_2, #none_3,  #hidden_1, #hidden_2, #hidden_3, #hidden_4 
   {
   display: none;
   }
}


@media all and (max-width: 1200px)
{
   .logo
   {
      display: none;
   }
   #nav
   {
      top: 10px;
   }
}

#bars, #tel-menu
{
display:none;
}

@media all and (max-width: 1011px)
{

   .menu
   {
      display: none;
   }
   
   #bars, #tel-menu
   {
      display: inline;
   }
   
}

>_<

-
Edité par Sytorex 23 janvier 2020 à 16:10:54

Nyut

21 janvier 2020 à 16:29:28

Bonjour,

Avant d'aller plus loin, corrige toutes les erreurs HTML. Le W3C est la pour t'aider. Il y en a environ 60 rien que sur la première page. Donc la je me dis qu'il y a déjà un souci. Tu mélange le CSS et HTML alors que tu as fais des pages en CSS. Pourquoi ne pas tout mettre dans tes pages CSS

Precision la balise <hidden> n'existe pas. Il faut la remplacer par une <div>. J'arrete la car il y a vraiment trop d'erreur

-
Edité par Nyut 21 janvier 2020 à 16:37:27

arf !!!

Bug de liens hypertexte et d’espacement :'(

Bug de liens hypertexte et d’espacement :'(

Supprimer

Modérer

Signaler le message aux modérateurs