Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bug de liens hypertexte et d’espacement :'(

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

    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter

      arf !!!

        23 janvier 2020 à 16:04:21

        J'ai réparer toute les erreurs, donc si quelqu'un sait comment réparer mes deux problèmes, je suis intéressé :)
        • Partager sur Facebook
        • Partager sur Twitter
          23 janvier 2020 à 16:21:05

          Bonjour,

          Test fais avec Chrome et internet Explorer, l'espacement entre les liens de ton menu est le même quand on passe d'une page a une autre.

          Par contre, pourquoi tous ces <br /> les uns a la suite des autres. Le <br /> sert juste à aller à la ligne. Si tu veux faire un paragraphe utilise la balise <p>.

          Pourquoi 2 body différents dans format.css et bg.css

          Pourquoi 4 css différents pour le <li id="navig...>. Je pense que si tu utilises le même pour tes 4 menus, ca doit le faire ou alors j'ai pas compris la subtilité :-)

          tu mets aussi encore du css dans ton html dans la div id="nav-menu". Déplace ce css dans ta feuille format. C'est pas que c'est pas juste mais c'est quand même plus propre

          Quels sont les liens qui ne fonctionnent pas car chez moi ils fonctionnent :-)

          • Partager sur Facebook
          • Partager sur Twitter

          arf !!!

            23 janvier 2020 à 18:58:54

            helpclic a écrit:

            Bonjour,

            Test fais avec Chrome et internet Explorer, l'espacement entre les liens de ton menu est le même quand on passe d'une page a une autre.

            Par contre, pourquoi tous ces <br /> les uns a la suite des autres. Le <br /> sert juste à aller à la ligne. Si tu veux faire un paragraphe utilise la balise <p>.

            Pourquoi 2 body différents dans format.css et bg.css

            Pourquoi 4 css différents pour le <li id="navig...>. Je pense que si tu utilises le même pour tes 4 menus, ca doit le faire ou alors j'ai pas compris la subtilité :-)

            tu mets aussi encore du css dans ton html dans la div id="nav-menu". Déplace ce css dans ta feuille format. C'est pas que c'est pas juste mais c'est quand même plus propre

            Quels sont les liens qui ne fonctionnent pas car chez moi ils fonctionnent :-)



            Pour le problème d’espacement, j'ai réussi a le résoudre

            Pour les <br /> mit à la suite

            <br /><br /><br /><br /><br /><br /><br /><br />
            					<div class="evenement">
            						<h3> Évènement : </h3> 
            						<p>
            								Rejoignez nous au marché de noël le <strong> vendredi 13 décembre</strong> dans notre <a href="https://www.google.fr/maps/place/54+Rue+de+Marzelles,+27200+Vernon/@49.0864746,1.4552578,17z/data=!3m1!4b1!4m5!3m4!1s0x47e6cbbb9f74cdb3:0xe8e9c6684776d52a!8m2!3d49.0864711!4d1.4574465">collège</a><br />
            								afin de récolter des fonds pour notre mini-entreprise
            						</p>
            					</div>
            				</div><br /><br /><br /><br />
            				<div id="img_tel">
            			<br /><a href="images/max/equipe_home_max.jpg"><img src="images/equipe_home.jpg" alt="Photo de notre équipe" title="Cliquez pour agrandir" /></a><br />
            			<br /><a href="images/max/produit_home_max.jpg"><img src="images/produit_home.jpg" alt="(Nom du produit)" title="Cliquez pour agrandir" /></a> <!-- Modifier la parenthèse -->
            		</div>

            Il serve a mettre des espacement entre des blocs, si tu as une solution, je suis preneur

            Pour les deux body, je les ai fusionner pour avoir un seul body

            Pour les 4 css différents il servent a détécter quelle page on est (je dirait comme une "forme de condition")

            J'ai enlever le css dans ma feuille nav comme demander

            Pour les liens qui ne fonctionne pas il y a :

            <p>	
            								Instagram : <a href="https://www.instagram.com/?hl=fr">minient</a> <!-- Modifier la parenthèse -->
            								<br>Notre mail : (email@gmail.com)<!-- Modifier la parenthèse -->
            								<br> Tel: 02 32 21 40 29 
            							</p>
            <p>
            								FaceBook : <a href="https://fr-fr.facebook.com/">minient</a> <!-- Modifier la parenthèse -->
            								<br />Nous sommes <a href="https://www.google.fr/maps/place/54+Rue+de+Marzelles,+27200+Vernon/@49.0864746,1.4552578,17z/data=!3m1!4b1!4m5!3m4!1s0x47e6cbbb9f74cdb3:0xe8e9c6684776d52a!8m2!3d49.0864711!4d1.4574465">ici</a>
            								<br />Fax: 02 32 21 07 90
            							</p>

            L'instagram et le facebook (de la page d'accueil sur pc/contacter sur téléphone) et l'email (de la page produit sur pc/contacter) qui est clickable mais que dans un coins, (je ne m'explique pas du tout ce bug)

            Merci du temps que tu utilise pour m'améliorer/ améliorer le site

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 23 janvier 2020 à 19:26:53

              Bonjour,

              >> Pour les <br /> mit à la suite

              >> Il serve a mettre des espacement entre des blocs, si tu as une solution, je suis preneur

              NON, ce n'est pas le rôle de la balise <br>. Le <br> crée un retour ligne dans une portion de texte, point. Il ne sert nullement à créer des espacement entre les blocks pour cela vous avez les margin et padding en CSS (ou flexbox)  

              • Partager sur Facebook
              • Partager sur Twitter
                24 janvier 2020 à 9:07:00

                Bonjour, j'ai enlever les  listes de <br /> par des padding-top, il y a d'autre problème sur le site ?
                • Partager sur Facebook
                • Partager sur Twitter
                  24 janvier 2020 à 14:35:56

                  Bonjour,

                  Il reste les <br />en début de code Notre mail ... fais plutôt des paragraphes avec des balises <p> et </p>

                  Je pense que l'affichage de tes liens instagram, facebook ... ne se fais pas car tu utilises les medias queries. Et si j'ai bien vu, tu ne fais rien pour les écran au dessus de 1311 px 

                  @media all and (max-width: 1311px)

                  Moi qui est un écran de 1920 px, ben ca ne marche pas

                  Voir le cours sur les medias queries https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

                  • Partager sur Facebook
                  • Partager sur Twitter

                  arf !!!

                    27 janvier 2020 à 10:08:23

                    Bonjour, j'ai enlever encore des <br />, pour l'endroit  où il faut ajoutez des paragraphes, je ne vois pas ou il faut les mettre, pour les media queries, je ne vois pas ce que je dois faire en ajoutant une media queries

                    • Partager sur Facebook
                    • Partager sur Twitter
                      27 janvier 2020 à 16:07:35

                      Bonjour,

                      Essai ce code et tu va voir pas toi même que pour un écran ca ne fonctionne pas

                      /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1311px */
                      @media all and (max-width: 1311px)
                      {
                        body{bakground-color:yellow;}
                      }
                      
                      /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
                      @media all and (min-width: 1024px) and (max-width: 2000px)
                      {
                        Body {background-color:red;}
                      }

                      Adapte les media queries en fonction de ton écran.

                      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

                      -
                      Edité par Nyut 27 janvier 2020 à 16:10:55

                      • Partager sur Facebook
                      • Partager sur Twitter

                      arf !!!

                        28 janvier 2020 à 11:04:25

                        Je pense ne pas avoir tout compris, j'ai fais cela : 

                        #conteneur
                        {
                            display: flex;
                            justify-content: space-around;
                            text-align: center;
                            color: white; /*couleur du texte*/
                            font-family: "Times New Roman"; /*format du texte*/
                            background-attachment: fixed;
                            background-repeat: no-repeat;
                            background-position: top right;
                            
                        }
                        
                            #section
                            {
                                width: 70%;
                                height: 754px;
                            }
                            #section_contact
                            {
                                width: 100%;
                                height: 754px;
                            } 
                                .titre
                                {
                                    width: 100%;
                                }
                            
                                h1  
                                { 
                                color: black; /* couleur à écrire en anglais qui modifie le (nom de l'entreprise)*/
                                font-size: xx-large;
                                }
                        
                                h2
                                {
                                    color: white; /*couleur a écrire en anglais pour le slogan*/        
                                }
                        
                                h3
                                {   font-weight: bold;
                                    text-decoration: underline;
                                    color:blue;
                                    font-size: 2.5em;}
                        
                                p
                                {   color:white; /*couleur du texte en générale (il faudras toujour le mettre en anglais, je ne le répéterai plus)*/
                                    font-size: x-large;
                                    font-style: italic;
                                }
                        
                                body
                                {   
                                    background-color: rgb(199, 196, 196);
                                    background-size: 100% ;
                                    margin:0;
                                    padding:0;
                                }
                                
                                /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1311px */
                                @media all and (max-width: 1311px)
                                {
                                body
                                    {
                                        background: url(images/bg_ico_aside/bg.png) no-repeat center fixed;
                                        -webkit-background-size: cover;
                                        background-size: cover;;
                                    }
                                }
                         
                                /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
                                @media all and (min-width: 1024px) and (max-width: 2000px)
                                {
                                body 
                                    {
                                        background: url(images/bg_ico_aside/bg.png) no-repeat center fixed;
                                    -webkit-background-size: cover;
                                    background-size: cover;
                                    }
                                }
                        
                                /*@media screen
                                {
                                    body
                                    {
                                    background: url(images/bg_ico_aside/bg.png) no-repeat center fixed;
                                    -webkit-background-size: cover;
                                    background-size: cover;
                                    }
                                }*/
                        
                                strong
                                {
                                    color: black; /*couleur de la page du "notre produit" en dessous du  Notre Produit*/
                                    font-size: xx-large;
                                } 
                        
                                .prix
                                {
                                    color: red; /*Couleur du prix*/
                                    font-size: 1.75em; /*Taille du prix*/
                                    font-weight: bold; /*Mit en gras*/
                                }
                        
                                .photo_produit
                        
                                {
                                    font-size: x-large;
                                    flex-direction: column; 
                                }
                        
                                .tablette
                                {
                                    display: none;
                                }
                        
                                #img_pc
                                {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-around;
                                }
                        
                                #img_produit
                                {
                                    padding-top: 50px;
                                }
                            #aside_index, #aside_produit
                        
                            {
                            float: left;
                            width: 30%;
                            height: 754px;
                            background-color: rgba(0,32,96,0.75); 
                            }
                        
                            #aside_index a:link, #aside_produit a:link, #aside a:visited, #aside_produit a:visited
                            {
                                color: white /*couleur des liens sur la partie du côté*/
                            }
                        
                        
                                .coordonnees
                        
                                {
                                    height: 12%;
                                }
                        
                                .evenement
                                {
                                    height: 0px;
                                    padding-top: 175px;
                                }
                        
                                #hidden2
                                {
                                    visibility: hidden;
                                }
                        
                                #slider_tel, #img_tel
                                {
                                    display: none;
                                }
                        
                                
                        @media all and (max-width: 1311px)
                        {
                            #aside_index
                            {
                                display: none;
                            }
                        
                            .tablette
                            {
                                display: inline;
                            }
                        
                            #section
                            {   
                                width: 82%;
                            }
                        }
                        
                        @media all and (max-width: 1011px) /*Format du tel*/
                        {
                            .tablette
                            {
                                display: none;
                            }
                            
                            #aside_produit, #slider_pc, #img_pc
                            {
                                display: none;
                            }
                        
                            #slider_tel, #section_team
                            {   
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;
                            }
                            .section_tel
                            {
                                position: absolute;
                                top:20px;
                                left:35px;
                                z-index: 1;
                            }    
                            #img_tel
                            {
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;
                            }
                            #tel
                            {
                                display: inline;
                            }
                        }
                        Merci du temps que tu prends pour m'aider :-°
                        • Partager sur Facebook
                        • Partager sur Twitter
                          28 janvier 2020 à 14:50:24

                          Mais tu l'as pas mis en ligne ce code pour tester.

                          Un autre conseil, enlève les positions relative, absolute, fixed ... si il y a. C'est un peu casse gueule à la présentation si tu ne les mets pas comme il faut. Utilise plutot la balise float ou flex pour positionner tes div. C'est beaucoup plus facile et au moins pas d'erreur

                          #menu-tel a:active, #bars a:active{
                          	position:relative;
                          	top:1px;
                          }
                          
                          #menu-tel
                          {
                             width:125px ;
                             height: 100%;
                             float:left;
                             z-index: 2;
                             position:relative;
                          }

                          Le souci d'affichage peut se trouver la dedans je pense

                          -
                          Edité par Nyut 28 janvier 2020 à 15:08:00

                          • Partager sur Facebook
                          • Partager sur Twitter

                          arf !!!

                            29 janvier 2020 à 10:24:01

                            Bonjour, j'ai mis en ligne les modif que j'ai fais, j'ai enlever le position relative car il ne sert à rien.

                            Mes liens ne fonctionne toujours pas

                            • Partager sur Facebook
                            • Partager sur Twitter
                              Staff 29 janvier 2020 à 11:38:12

                              Bonjour, je viens de regarder en petite résolution et effectivement il y a un problème, pour le découvrir utilise l'inspecteur des éléments (F12 pour la plupart des navigateur)

                              Clic droit sur les liens qui ne fonctionnent pas puis examiner l'élément. Dans l'inspecteur qui s'ouvre tu vois que un élément recouvre tes liens. C'est <section id="section" class="section_tel">

                              Dans format.css L200 tu indiques pour .section_tel une position absolute pourquoi? Supprime les positions absolute ce n'est pas une technique de positionnement des éléments surtout si il n'y à aucun élément référent c'est à dire un parent ou ancêtre  en position relative.   

                              • Partager sur Facebook
                              • Partager sur Twitter
                                30 janvier 2020 à 9:07:52

                                Bonjour, merci pour cette très grande aide, j'ai réussi a réglée le problème des lien hypertex, j'ai juste un dernier problème (enfin je l'espère), pour ma barre de navigation, j'utiliser une technique moche (utiliser des lettres en invisible pour avoir un background de la bonne taille)

                                <ul id="navig">
                                         <li id="navig-accueil"><a href="index.php">Accueil<div id="hidden_1">mmmmmmmmi</div></a></li>
                                         <li id="navig-equipe"><a href="equipe.php"> équipe<div id="hidden_2">mmmmmmmmsi</div></a></li>
                                         <li id="navig-produit"><a href="produit.php"> Produit<div id="hidden_3">mmmmmmssii</div></a></li>
                                         <li id="navig-parcour"><a href="parcour.php"> Parcours<div id="hidden_4">WWD;--DD;;</div></a></li>
                                      </ul> 


                                (je parle des mmmmmmmmi)

                                J'aimerai supprimer ses suites de lettre (qui servent a avoir un background de la bonne taille)

                                Si vous avez une idée, je suis preneur, après pas besoin de cherchez pendant très longtemps car cela fonctionne très bien mais j'aimerai m'améliorer et trouver un moyen de faire cela (si ce n'est pas possible, dite le moi car je renderai clos le sujet).

                                J'ai dû utiliser des z-index et donc des position:relative;

                                -
                                Edité par Sytorex 30 janvier 2020 à 9:10:39

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  Staff 30 janvier 2020 à 11:25:24

                                  Bonjour, effectivement je me demandais pourquoi ce truc bizarre.

                                  Cela dépend ou tu places ton background. Le principe général est de changer le display du lien pour le passer en block de sorte qu'il prenne toute la place de son parent.

                                  Dans nav.css L105 #menu-tel a, #bars  pourquoi les liens sont en display: inline-block? tu souhaites qu'il soit l'un à coté de l'autre ou l'un en dessous de l'autre? Passe en display: block. (le style du cursor est inutile les liens on par défaut cette propriété).

                                  Pour l'autre menu #navig pour quelles raison un display: inline; sur le #navig li ? (L16) Ne change pas le display du li si tu souhaites le item les un en dessous des autres.

                                  C'est un bordel ta navigation!!!!  Il y a des flotants, des changements de display sans trop savoir pourquoi??

                                  Un truc pour voir tes éléments plus facilement est de leurs donner provisoirement une couleur de font ou une bordure de couleur;

                                  Voici une tentative de solution : (j'ai commenté le code )

                                    /* 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; pourquoi faire floter la liste? l'alignement est en haut à gauche par défaut  */ 
                                                  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; ne change pas le display si tu souhaites la liste vertical, un li est en display: list-item  et ce place comme des block l'un en dessous de l'autre'*/
                                                  /*padding:0; inutile la balise li n'a pas de padding par défaut */
                                                  /*margin:0; inutile la balise li n'a pas de marge par défaut*/
                                                  font-size: 1.35em;
                                                  line-height: 1.5; /* AJOUT créer un espacement entre les items pour qu'il soit lisible et pas l'un sur l'autre'*/ 
                                              }
                                  
                                              #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 Meme observation que plus haut ;*/
                                                  /*width:auto; auto est la valeur par défaut donc inutile de le préciser */
                                                  /*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 
                                              {
                                                  display: block;
                                                  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 */
                                              }
                                              /* met la couleur du nom de la page comme par exemple accueil qui est en bleu quand on est sur la page  dans la navigation */
                                               #navig-accueil a,  #navig-equipe a,  #navig-produit a,  #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;
                                                  display: block; /* AJOUT Pour que les liens prennent la hauteur et largeur de leurs parent*/ 
                                              }
                                  
                                              #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 
                                                  background:rgba(0,115,150,0.75); /*  correction c'est rgba pas rgb si tu veux la trasparence alpha' */ 
                                              } 
                                  
                                              #navig a:active 
                                              {
                                                  /*background:rgb(0,115,150,0.75);  mettre la même couleur que fond 3 */
                                                  background:rgba(0,115,150,0.75); /* CORRECTION c'est rgba pas rgb si tu veux la trasparence alpha' */
                                                  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 */
                                  
                                  
                                  
                                  
                                  
                                  
                                  
                                  
                                  
                                              /*#menu-tel a 
                                              {
                                                 background-color: white; 
                                                 border: none;
                                                 color: black;
                                                 padding: 1px 320px;
                                                 text-decoration: none;
                                                 display: inline-block;
                                                 font-size: 10px;
                                               }
                                              */
                                              #menu-tel 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;
                                              }
                                              /*#menu-tel a:hover, #bars a:hover{
                                                      background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
                                                      background-color:#e9e9e9;
                                              }*/
                                              #menu-tel a:active, #bars a:active
                                              {
                                                  top:1px;
                                              }
                                  
                                              #menu-tel
                                              {
                                                  width:125px ;
                                                  height: 100%;
                                                  float:left;
                                                  z-index: 2;
                                              }
                                  
                                              /*INUTILE PUISQUE SUPPRIMÉ DANS LE HTML*/
                                  /*            #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: inline-block;
                                                  flex-direction: column;
                                                  justify-content: space-around;
                                              }*/
                                  
                                  
                                              @media all and (max-width: 1425px)
                                              {
                                                  #hidden_1, #hidden_2, #hidden_3, #hidden_4 
                                                  {
                                                      display: none;
                                                  }
                                              }
                                  
                                  
                                              @media all and (max-width: 1200px)
                                              {
                                                  .logo
                                                  {
                                                      display: none;
                                                  }
                                                  #nav
                                                  {
                                                      top: 10px;
                                                  }
                                              }
                                  
                                              #bars, #menu-tel
                                              {
                                                  display:none;
                                              }
                                  
                                              @media all and (max-width: 1011px)
                                              {
                                  
                                                  .menu
                                                  {
                                                      display: none;
                                                  }
                                  
                                                  #bars, #menu-tel
                                                  {
                                                      display: inline;
                                                  }
                                  
                                              }

                                  Tu devrais faire attention au poids de tes sélecteurs

                                  Utilise de préférence des class et laisse le identifiants pour les ancres et le javascript. ( J'ai réduis le poids d'un selecteur ciblant les liens puisque l'ID parent n'étais pas présent dans ma page de test. )

                                  J'espère que cela ira comme ca.

                                  -
                                  Edité par AbcAbc6 30 janvier 2020 à 11:31:22

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    30 janvier 2020 à 16:07:26

                                    J'ai fais ce que tu m'a conseiller, j'ai utiliser des class au lieu des id, juste, la sorte de condition que j'avais crée ne fonctionne plus :'( aurait tu une idées comment faire ?
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      Staff 30 janvier 2020 à 18:38:39

                                      Bravo, tu avances bien.

                                      Une sorte de condition? je ne vois pas de quoi tu parles. Mis à part les @media je ne vois pas de condition....

                                      J'ai l'impression que nav.css s'est épurée, c'est pas mal je trouve.

                                      Le width: 100% sur les lien est inutile comme dans la plupart des cas (en block) .

                                      J'ai vu ce sélecteur à rallonge 

                                      .li-accueil a, .li-equipe a, .li-produit a, .li-parcour a, .li-acheter a, .li-contacter a, .li-evenement a {}

                                      Supposons que tu ajoutes une page à ton site et de facto un item à ton menu.php (j'imagine que tu utilises les include en php) tu vas devoir également  modifier ta CSS? Ce n'est pas tout à fait comme cela que l'on procède, la feuille de style doit être conçue peut importe le nombre de page. Si tu ajoutes du contenu qui ne nécessite pas un nouveau style, tu ne dois pas toucher au CSS.

                                      Tu as eu la bonne idée de préfixé tes class spécifique par un "li-" c'est une bonne pratique. Tu vas pouvoir utiliser les sélecteurs d'attribut pour cibler toutes tes class commencent par "li-", cela s'écrit comme ceci : 

                                      [class^="li-"] a { }

                                      Cela est plus court à écrire et cela fait le même taf, on utilise au maximum la séparation du style et de la structure des fichiers

                                      Garde sous le coude ce lien qui te servira tout au long de tes développements ;)

                                      https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048




                                      -
                                      Edité par AbcAbc6 30 janvier 2020 à 18:41:32

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        30 janvier 2020 à 21:15:44

                                        Bonjour, je m'occuperai de cela demain, mais j'ai plusieur question :

                                        - Premièrement je ne répond plus a la question du titre de mon sujet, cela ne nuit pas au forum pour que les personnes qui cherche la réponse de ce que je demande depuis hier ne répond plus du tout au sujet, vaudrait-il pas mieux fermée le sujet et en relancé un ?

                                        - Deuxio, je n'ai pas bien compris la partis de code que tu ma envoyer ([class^="li-"] a { }) pourais tu m'écrire dans la feuille css car je me sent bête mais je n'ai pas très bien compris

                                        - Tercio (ce n'est pas une quesiton mais), ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.

                                        Je veux que quand on est sur la page exemple mettre en bleu quand on est sur l'onglet accueil

                                        (Désolé, s'il y a des fautes, je n'ai pas pris le temps de me relire)


                                        EDIT : J'ai compris pour le Deuxio, et voici le code de ma sorte de condition : 

                                        .accueil .navig-accueil a:hover, .equipe .navig-equipe a:hover, .produit .navig-produit a:hover, .parcour .navig-parcour a:hover {
                                            background: rgba(0,115,150,0.75); /*mettre la meme couleur que fond 3 background:rgba(0,115,150,0.75)*/
                                        



                                        -
                                        Edité par Sytorex 31 janvier 2020 à 10:47:18

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          31 janvier 2020 à 9:53:30

                                          Bonjour,

                                          > Deuxio, je n'ai pas bien compris la partis de code que tu ma envoyer ([class^="li-"] a { }) pourais tu m'écrire dans la feuille css car je me sent bête mais je n'ai pas très bien compris

                                          ^ veut tout simplement dire, de sélectionner toutes les classes qui commencent par la chaine li- (plus d'infos : https://www.geeksforgeeks.org/wildcard-selectors-and-in-css-for-classes/)

                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

                                            31 janvier 2020 à 12:48:34

                                            J'ai modifier ce que vous m'avez dit

                                            EDIT : Il y a d'autre chose a faire ?

                                            -
                                            Edité par Sytorex 3 février 2020 à 8:49:13

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              4 février 2020 à 8:47:13

                                              Ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                Staff 5 février 2020 à 8:14:56

                                                Bonjour, Oups j’avais zappé ce sujet, vous faite bien de relancer.

                                                Sytorex a écrit:

                                                - Premièrement je ne répond plus a la question du titre de mon sujet, cela ne nuit pas au forum pour que les personnes qui cherche la réponse de ce que je demande depuis hier ne répond plus du tout au sujet, vaudrait-il pas mieux fermée le sujet et en relancé un ?

                                                Normalement c’est un sujet par problématique. Ici je trouve que l’on n’a pas trop dévié du sujet. On reste toujours sur la problématique de l’affichage des liens.

                                                EDIT : J'ai compris pour le Deuxio, et voici le code de ma sorte de condition : 

                                                .accueil .navig-accueil a:hover, .equipe .navig-equipe a:hover, .produit .navig-produit a:hover, .parcour .navig-parcour a:hover {
                                                    background: rgba(0,115,150,0.75); /*mettre la meme couleur que fond 3 background:rgba(0,115,150,0.75)*/
                                                

                                                Je vois, tu souhaites que la couleur de fond de l’item du menu change au passage de la souris si on se trouve uniquement sur la page courante.

                                                En fait il faut faire une réel condition en PHP sur ton menu, le principe est d’afficher une class spécifique que si on est sur la page courante.

                                                Je pense qu’il existe plusieurs possibilité pour ce faire (Mehddii corrige-moi si tu as une solution plus simple.)

                                                Fichier menu.php

                                                <?php
                                                // récupération du nom du fichier courant
                                                $file = basename($_SERVER['PHP_SELF']);
                                                $pos = strrpos($file, '.');
                                                $pageCourante =  substr($file, 0, $pos);
                                                ?>
                                                <ul class="navig">
                                                         <li class="navig-accueil <?php echo ($pageCourante === 'index')? 'current' : ''  ?>"><a href="index.php">Accueil</a></li>
                                                         <li class="navig-equipe <?php echo ($pageCourante === 'equipe')? 'current' : ''  ?>"><a href="equipe.php"> équipe</a></li>
                                                         <li class="navig-produit <?php echo ($pageCourante === 'produit')? 'current' : ''  ?>"><a href="produit.php"> Produit</a></li>
                                                         <li class="navig-parcour <?php echo ($pageCourante === 'parcour')? 'current' : ''  ?>"><a href="parcour.php"> Parcours</a></li>
                                                </ul>


                                                Dans ta CSS ajoute

                                                    .current a:hover {
                                                        background: rgba(0,115,150,0.75);
                                                    }

                                                Sytorex a écrit:

                                                Ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.

                                                Par contre je ne comprends pas bien quand tu parles du body. Que souhaites tu faires en fonctions du changement de page? Une class différente pour le body sur chaque page peut être? Pourrais tu explicités mieux ton souhais. Merci

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  5 février 2020 à 9:16:47

                                                  AbcAbc6 a écrit:

                                                  Par contre je ne comprends pas bien quand tu parles du body. Que souhaites tu faires en fonctions du changement de page? Une class différente pour le body sur chaque page peut être? Pourrais tu explicités mieux ton souhais. Merci



                                                  Bonjours, pour ma barre de navigation, j’avais utilisé ce site, qui m’a beaucoup aidée : https://css.developpez.com/tutoriels/liste-navigation/#LIII, si tu peux aller à la dernière étape, je pense que tu comprendras ce que je veux faire, quand j’avais commencé mon site, j’avais copié collé le code que j’ai modifié mais normalement on s’y retrouve.

                                                  PS : je suis désolé des incompréhensions (et des problèmes d’orthographe) je suis dyspraxique (je sais comme dirait mon frère : je me cache derrière mes problèmes).

                                                  Merci de ton aide :-°



                                                  -
                                                  Edité par Sytorex 5 février 2020 à 9:25:04

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    Staff 5 février 2020 à 10:52:59

                                                    D'accord.  C'est en fait ce que j'avais compris en lisant le code que tu as rajouté lors de ton édit. C'est en lisant ton explication en français que c'était moins claire pour moi, mais en fait c'est la même chose : avoir un style différent pour le lien du menu quand on se trouve sur  la page courante

                                                      J'ai l'impression que ce tuto ne donne qu'une solution pour des sites statiques (le tuto date de 2008 -2005 article d'origine). Tu peux faire comme ce tuto indiques mais il y à des inconvénients si ton site évolue. Comme tu utilises des fichiers .php et non des fichiers .html sur ton site c'est autant profiter de la puissance de PHP coté serveur pour faire les conditions.

                                                      INCONVÉNIENT : Tu réalises ton site aujourd'hui, tu connais le nombre de page qu'il te faut, dans 6 mois il y a nécessité  d'ajouter du contenu 2 pages supplémentaires.  Que faire? Un copier/coller des parties commune et modifier la CSS en fonction des pages ajoutés? Non, cela est du travail inutile. PHP te donne la possibilité de créer des conditions coter serveur et renvoyer de l’ HTML en fonction de ses conditions. En réalisant ce que j'indique aujourd'hui comme code, tu t'épargnes la modification du CSS à l'ajout de nouvelle page. C'est ce que je recommande.

                                                    Si toutefois tu désires suivre ce tuto à la lettre, effectivement il faut une class (une class possède un poids inférieur à un identifiant) spécifique sur le body pour chaque page de manière à identifier la page courante et indiquer un style particulier pour un lien dans cette page.

                                                      Ce qui donne

                                                    .equipe .nav-equipe a {
                                                        /* style du lien pour la page équipe */ 
                                                    }

                                                    Idem pour toute les pages.

                                                    Tu adoptes la solution qui te parais le mieux pour ton projet en fonction de tes capacités.  Si tu as des difficultés, je réexpliques en fonction de ton choix de techno.

                                                    -
                                                    Edité par AbcAbc6 5 février 2020 à 10:58:49

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      5 février 2020 à 11:22:03

                                                      Bonjour, je pense que la solution la plus simple pourrait rester, mais je préfère apprendre et donc utiliser la technique en PHP.

                                                      Donc je reprends le code que tu m'as envoyé il y a 3 heure ?.

                                                      -
                                                      Edité par Sytorex 5 février 2020 à 11:33:05

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        Staff 5 février 2020 à 11:36:20

                                                        Donc je reprends le code que tu m'as envoyé il y a 1 heure ?.

                                                        Oui, tu as bien un fichier .php qui reprends le menu (que j'ai appelé menu.php plus haut) et qui est inclut dans toutes tes pages. (juste pour m'assurer de la structure de tes fichiers.)

                                                        Il faut également que tu comprennes le code, si c'est pour faire un copier/coller c'est pas très intéressant.

                                                        Édit : Tant que l'on est à parler de ta structure de fichiers du site, on en parle dans ce sujet en cours.

                                                        -
                                                        Edité par AbcAbc6 5 février 2020 à 11:47:20

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          6 février 2020 à 9:32:17

                                                          Voilà la structure de mes fichiers :

                                                          • slider.css
                                                          • nav.css
                                                          • format.css
                                                          • produit.php
                                                          • parcour.php
                                                          • navigation.php
                                                          • index.php
                                                          • evenement.php
                                                          • equipe.php
                                                          • contacter.php
                                                          • acheter.php
                                                          • images/

                                                          il ne faut pas crée un dossier styles pour le css ?

                                                          et il y a d'autre chose à faire car j'ai vu pour le MVC

                                                          EDIT : j'utilise un include navigation.php comme tu peux le deviner

                                                          -
                                                          Edité par Sytorex 6 février 2020 à 9:37:07

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            Staff 6 février 2020 à 10:12:58

                                                            Bonjour,

                                                            >> il ne faut pas crée un dossier styles pour le css ?

                                                            Si ce serait bien.

                                                            >> et il y a d'autre chose à faire car j'ai vu pour le MVC

                                                            Si tu as vu pour le MVC alors tu as vu que l'architecture n'est pas du tout la même. A toi de voir si tu adoptes l’architecture MVC dans ce projet (auquel cas il y a beaucoup à modifier) ou si tu gardes cette structure.

                                                            >> j'utilise un include navigation.php comme tu peux le deviner

                                                            Comme c'est un fichier inclut et non une page compète, je te recommande de l'indiquer dans le nom du fichier ou son emplacement. Soit (l'un ou l'autre)

                                                            • /navigation.inc.php
                                                            • /include/navigation.php

                                                            J'ai une préférence pour la deuxième option.

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              6 février 2020 à 14:18:18

                                                              J'ai crée un dossier pour le styles et pour l'include, pour le MVC, j'ai lu le cour, mais je ne vois pas ce que je dois séparer. Après j'ai regardé sans trop de détaille donc il faut que j'approfondie s'il le faut

                                                              -
                                                              Edité par Sytorex 7 février 2020 à 14:49:31

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              Bug de liens hypertexte et d’espacement :'(

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              • Editeur
                                                              • Markdown