Salut à tous,
je galère sur une truc de base comme un C..
je suis sur que c'est simple mais je trouve pas.
je voudrais que lorsque je survole les liens du menu cela affiche une icon (ca c'est bon)
mais que quand on clique sur le lien, l'icone reste également sur le lien actif.
petit code :

....
<li>
<a class="nav-link underlined lelien" href="prestations/">PRESTATIONS</a><span class="inv"><i class="icon-feuille"></i></span>
</li>
...



.inv{
  visibility:hidden;
}
.navbar-custom .navbar-nav > li> .lelien:hover:after{
font-family: 'lafamille';
content: "\ea05";
color: #f9ad1a;
position: absolute;
top: -6px;
right: -4px;
}


il faut surement ajouter un .active dans le CSS mais je n'arrive pas à trouver...

Merci d'avance de votre aide
Cdt
Modifié par spawns (04 Dec 2020 - 10:48)
Bonjour Raphaël et Jean-Pierre,

En effet, cela me paraît compliqué, je lis, cherche des articles à ce sujet et essaye différentes solutions, mais je n'ai pas encore trouvé celle qui permet d'adapter la taille des images à l'écran tout en évitant le mouvement des éléments pendant le chargement. Il est possible que je doive restructurer ma page avec une Grid qui contiendrait les images. Merci pour l'article, je vais le lire.

Bonne journée,

Laure
laurerocherluna a écrit :
Sinon, connaissez-vous une autre astuce pour éviter le mouvement des éléments pendant le chargement ?


Bonjour Laure,

Le sujet est très délicat à traiter et dépend de beaucoup de choses (et de tes contraintes)

Il y a eu récemment un excellent article de Hubert Sablonnière à ce sujet, il devrait t'intéresser : https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/

Jean-Pierre-Bruneau a écrit :

Je te mets juste un mot pour te dire que je n'utilises pas ces usines à gaz, préfèrent de beaucoup

img {width:90%;max-width:1000px;;}



Oui Jean-Pierre, mais ta piste ne fait que "masquer" le problème et ne permet pas du tout de charger des images différentes selon les tailles d'écran. Sans oublier les problèmes de performance que cela engendre.

Bonne journée,

Raphaël
Arrival a écrit :
Chers Alsanautes,
veuillez savoir que la gestion des cookies javascript .


Je suis très ennuyé par ta réponse, en effet je traites mes Cookies par PHP ,le javascript étant visible par affichage du source.
D'autre part étant un gros mangeur d'internet, j'aimes bien lorsque je vais lire mon journal être accueilli par bonjour Jean-Pierre donc que mon journal ait mis un cookies . en quoi ce serait idiot ???? jamais je n'ai lu un avis pareil ? je penses que tu n'a pas vraiment compris ma question, désolé.
Bonjour,

J'ai actuellement une page HTML qui utilise ce type de codes :

 <ul class="header-main-menu" id="header-main-menu">
                            <li><a class="active" href="#accueil"><i class="fas fa-home"></i> Accueil</a></li>
                            <li><a href="#contact"><i class="fas fa-user"></i>Contact</a></li>
                        </ul> 

                    <section id="accueil" class="sub-page start-page"> </section>
                    <section id="contact" class="sub-page"> </section>


Sur la page, j'ai un menu (ici composé de "accueil" et "contact"). Lorsque je clique sur "contact" toute la section "accueil" disparait et inversement.

Mon problème est le suivant : google ne référence pas ma page car il n'aime plus les #. Par conséquent il ne prend en compte que ma page d'accueil.

J'ai créé mon site sans savoir ça, et mtn je me retrouve bien embêté.

Je cherche depuis quelques jours activement comment remédier à ce problème en passant par d'autres formules mais je n'y arrive pas.
Notamment avec "history.pushState" par exemple.

Auriez-vous une solution pour moi ? Ou le lien d'un tutoriel adéquat pour un débutant ?
Je souhaite garder ce système de "single page", je le trouve très intuitif et réactif.

J'ai commencé le développement Web par le "code" depuis vraiment très peu de temps.

Merci d'avance pour vos réponses et votre indulgence.

Maxime Smiley smile
Chers Alsanautes,
veuillez savoir que la gestion des cookies javascript est, et demeure une bêtise insensée qui n'oblitère en rien du .php
Si je veux de la fréquentation de mon site ? et la marquer ? Comment je fais : autrement que de la CNIL : je fais un iframe .php par html ... par exemple.
Bien évidemment, le .php me renseigne par mail de la visite.
Les choix ou autres options de visites sont, selon moi non-intéressantes.
Les cookies javascript web sont gravement idiots ... qui ne renseignent que du rien.
La CNIL est idiote.
Modifié par Arrival (03 Dec 2020 - 23:21)
Cette petite conversation m'a fait réfléchir (comme quoi une petite intervention sur le forum n'est jamais inutile et remet les idées en place lorsqu'on a la tête dans le guidon) : je vais réécrire toute ma fonction avec des objets date plutôt qu'en m'appuyant sur une chaîne de caractère 'ddMM' (ça allège bien le code au passage) :
const { DateTime } = luxon,
      year = DateTime.local().toFormat('yyyy'),
      date = DateTime.local(),
      //date = DateTime.fromFormat('0312' + year, 'ddMMyyyy'), // pour tester
      dayMonth = DateTime.local().toFormat('ddMM'),
      christmas = DateTime.fromFormat('2512' + year, 'ddMMyyyy'),
      sundayBeforeChristmas = christmas.startOf('week'),
      firstAdventSunday = sundayBeforeChristmas.plus({days: -22})

let data = {}

// Périodes liturgiques :
data.period = "Temps ordinaire"
if (date >= firstAdventSunday && date < christmas) data.period = "Temps de l'Avent"

const el = document.querySelector('.output')
el.innerHTML = `${data.period}<br>${date}<br>${christmas}`

Comme ça tout le calendrier s'appuiera sur la même logique, et surtout cela me permettra de prendre en compte les événements qui commencent la veille au soir (par exemple la veillée de Nöel ou celle de Pâques).

Sujet résolu pour ce qui est de la fonctionnalité. Il reste ouvert pour ce qui est de la compréhension de l'intérêt des intervalles proposé dans les librairies de dates.
Modifié par Olivier C (04 Dec 2020 - 10:32)
Hi !
Génération prémâchée +1 Smiley lol Clear_Front_Variable c'est clairement une variable custom du dev. Le sujet traite de la bonne utilisation de PDO pour s'éviter les injections SQL Smiley cligne pas de preg_match, ni de son petit frère diabolique que je suppose être utilisé correctement dans Clear_Front_Variable.

Le second point que tu soulèves est important, étant dans les deux cas (je suis lead dev full stack pour une boite qui à 5 sites de Ecommerce et j'ai mon auto entreprise en parallèle).
Tu es soumis à beaucoup, beaucoup,beaucoup de choses sur le plan légal.
Entre la RGPD et ta responsabilité de professionnel si la base de données tombe et que les données sont exfiltrées par négligence ou mauvaise pratique. Ou si la base de données est perdue genre tu perds 2 jours de commandes soit un CA de 20K va l'expliquer à tes clients ou à ton boss. Bonne chance même s’il est concilient Smiley smile ! Tu es clairement dans la m**** sur la plan juridique. Ta comparaison devrait plutôt être "je construis des voitures et... allé pas d'airbag parce que je ne sais pas faire" accident > 2 morts. "Ha?? Dommage".

Après je peu comprendre que tu doute des informations que tu lis ici et là et c'est une bonne chose mais contrôle TOUJOURS tes données qui proviennent du front, et celles qui proviennent de la base, c'est le BABA pour pas passer pour un kikoulol. Smiley biggrin
Donc j'ai régler le soucis, mais j'en ai un autre.
$travels = array(
    0 => array(
        [
            'departure' => 'Paris',
            'arrival' => 'Nantes',
            'departureTime' => '11:00',
            'arrivalTime' => '12:34',
            'driver' => 'Thomas'
        ],
        [
            'departure' => 'Paris',
            'arrival' => 'Orléans',
            'departureTime' => '03:00',
            'arrivalTime' => '05:26',
            'driver' => 'Clément'
        ],
        [
            'departure' => 'Paris',
            'arrival' => 'Nice',
            'departureTime' => '10:00',
            'arrivalTime' => '12:09',
            'driver' => 'Audrey'
        ],
    ),

    1 => array(
            'departure' => 'Orléans',
            'arrival' => 'Nantes',
            'departureTime' => '05:15',
            'arrivalTime' => '09:32',
            'driver' => 'Mathieu'
    ),

    2 => array(

            'departure' => 'Dublin',
            'arrival' => 'Tours',
            'departureTime' => '07:23',
            'arrivalTime' => '08:50',
            'driver' => 'Nathanaël'
    ),

    3 => array(
        [
            'departure' => 'Nice',
            'arrival' => 'Nantes',
            'departureTime' => '10:40',
            'arrivalTime' => '13:00',
            'driver' => 'Pollux'
        ],
        [
            'departure' => 'Nice',
            'arrival' => 'Tours',
            'departureTime' => '11:00',
            'arrivalTime' => '16:10',
            'driver' => 'Edouard'
        ],
        [
            'departure' => 'Nice',
            'arrival' => 'Nantes',
            'departureTime' => '12:00',
            'arrivalTime' => '16:00',
            'driver' => 'Charlotte'
        ],
    ),

    4 => array(
            'departure' => 'Tours',
            'arrival' => 'Amboise',
            'departureTime' => '16:00',
            'arrivalTime' => '18:40',
            'driver' => 'Priscilla'
    ),
);

var_dump($travels[$_GET['city']] );
$travels = $travels[$_GET['city']];



foreach( $travels as $travel => $value){
     echo "$travel => $value. <br>";
 }


J'ai donc des tableaux à 2 niveaux et tableaux à 3 niveaux. J'arrive à faire afficher les tableaux à 2 mais pour les tableaux à trois je n'y arrive pas Smiley sweatdrop
Dans ton passage de variable (GET) c'est le name de ton select qui va apparaitre d'où le 'departure'.


dump( $_GET['departure'] ); // donne la valeur de la variable passée par ton formulaire


Si je me trompe pas

$travel = $travels[$_GET['departure']]; // valeur 0, devrait te donner un nouveau tableau de valeurs contenant les données du voyage de Paris


Tu ne devrais plus qu'à avoir à itérer sur $travel et afficher les différente données

Un truc dans le genre (désolé je fais ça de tête)

foreach( $travel as $k=> $v){
    echo $k . " => " . $v;
}
totoche89 a écrit :
voila ce que j'ai fait:

&lt;td class="border_principal "&gt;&lt;a class="shadowbox" href="Machinegun_Optimizations.php"&gt;&lt;div class="Machine_Gun"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/td&gt;

tout marche sauf.....class="shadowbox" j'ai rajouter dans le css
display:block; ou display:inline-block;
cela agrandit tout mon tableau et ouvre shadowbox dans une autre page donc j'ai encore rien compris Smiley decu


shadowbox donne une taille de 592 x 613 , si c'est trop grand , réduit les dimensions.

si tu clique sur le lien, tu vas sur la page Machinegun_Optimizations.php

A priori il n'y a pas d'erreurs.

Que veut tu faire en fait ? transformer ton a en div ?

Alors :
<td class="border_principal "><a class="shadowbox" href="Machinegun_Optimizations.php"><div class="Machine_Gun"></div></a></td>

deviens
<td class="border_principal "><div class="shadowbox"  ><div class="Machine_Gun"></div></div></td>

sans href bien entendu Smiley smile

Ou pour revenir au debut, pour styler un lien a partir de la valeur de son href
<td class="border_principal "><a class="shadowbox" href="toto.php"><div>toto</div></a></td>

le selecteur CSS est
a[href="toto.php"] {/* styles */}

Modifié par gcyrillus (03 Dec 2020 - 20:04)
Bonjour,

Je tente de réaliser une animation dynamique un peu complexe avec du HTML et du CSS et je ne m'en sors pas, c'est un vrai casse-tête.

Pour faire au plus simple : imaginez une image qui servirait de lien, lorsque qu'on passerait dessus l'image disparaîtrait, laissant apparaître un mot en son centre ayant comme couleur de police l'image précédemment présente. L'image disparaitrait et deviendrait la couleur de la police. Quand on n'aurait pas le curseur sur l'image, la police ne serait donc pas visible, mais lorsqu'on passerait sur l'image elle apparaîtrait et l'image partirait.

Je pense que l'utilisation d'une opacity à 0 pour la police pourrait être une piste, puisqu'elle prendrait la couleur de l'image. Je coince pour faire disparaître l'image mais qu'elle soit encore présente comme couleur de police.

N'hésitez à me demander si vous avez besoin de plus d'éléments.

Je vous remercie à l'avance de votre aide Smiley smile
Bien !
Ton site a du succès, et la qualité de ton entreprise le mérite, mais c'est pour cela que nous avons épluché ton site.
Plein de points importants ont étés signalés, et il faut les maintenir, cependant je me doit d'ouvrir le débat :
1) sentiment du visiteur et l'importance de l'infographie:
je cherche pour moi un PRO pour me faire une belle rénovation de mon magasin ,alors je cherche et tombe chez toi, je vois quoi ?
Sous deux bandes inutiles, des réalisations pas très accrocheuses, qui me bouchent toute ma page, avec des couleurs non accordées et ordinaires.
Heureusement si je ne fermes pas la page pour aller chercher ailleurs, alors j'ai des produits bien présentés, très sobrement et très PRO .

Alors tout est à refaire ? quel boulot !! ?????
NON pas du tout juste revoir le haut et pour qu'il ouvre la porte à la sobriété du corp de ta page aucune couleur sauf la photo et le logo.
reste un bas bien trop haut ,et voila une page ou le visiteur se dira Houlà ! la classe !

2) le Référencement il est à revoir car tu as des anomalies, plus de pages référencées par rapport au nombre réel de pages ?? et mal placé ...
Je peux t'aider assez facilement pour changer cela tu as vraiment matière à être haut placé.

Ton site est très bien pour le moment alors prenons le temps de faire ça IMPEC même si ça prends une semaine.

J'ai avec tes ressources commencé une solution pour l' infographie, je te mettrais un lien d'ici demain, ça c'est pour le client.
Coté Google est-tu inscrit aux outils webmaster ? et veux tu me mettre en MP ton mail ,ce sera plus facile Smiley cligne
Bonjour,
donc voilà mon soucis, j'ai une page index.php qui contient mon formulaire, le but est selon ce que l'utilisateur sélectionne dans la liste déroulante, tel et tel résultat doit s'afficher dans mon target.php. Je n'arrive pas à cibler tout le premier tableau par exemple
Voici mon index
        <form action="target.php" method="GET">
            <fieldset>
                <legend>M'inscrire et partir</legend>
                <div>
                    <input type="text" name="name" placeholder="Nom" required>
                </div>
                <div>
                    <input type="text" name="firstName" placeholder="Prénom" required>
                </div>
                <div>
                    <input type="email" name="email" placeholder="E-mail" required>
                </div>
                <div>
                    <input type="tel" name="phone" id="phone" placeholder="Téléphone" required>
                </div>
                <div>
                    <select name="departure">
                        <option>Ville de départ</option>
                        <option value="0">Paris</option>
                        <option value="1">Orléans</option>
                        <option value="2">Dublin</option>
                        <option value="3">Nice</option>
                        <option value="4">Tours</option>
                    </select>
                </div>
                <div>
                    <input type="submit" value="Envoyer le formulaire">
                </div> 


et voici mon target
<?php

$travels = array(
    0 => array(
        [
            'departure' => 'Paris',
            'arrival' => 'Nantes',
            'departureTime' => '11:00',
            'arrivalTime' => '12:34',
            'driver' => 'Thomas'
        ],
        [
            'departure' => 'Paris',
            'arrival' => 'Orléans',
            'departureTime' => '03:00',
            'arrivalTime' => '05:26',
            'driver' => 'Clément'
        ],
        [
            'departure' => 'Paris',
            'arrival' => 'Nice',
            'departureTime' => '10:00',
            'arrivalTime' => '12:09',
            'driver' => 'Audrey'
        ],
    ),

    1 => array(
        [
            'departure' => 'Orléans',
            'arrival' => 'Nantes',
            'departureTime' => '05:15',
            'arrivalTime' => '09:32',
            'driver' => 'Mathieu'
        ],
    ),

    2 => array(
        [
            'departure' => 'Dublin',
            'arrival' => 'Tours',
            'departureTime' => '07:23',
            'arrivalTime' => '08:50',
            'driver' => 'Nathanaël'
        ],
    ),

    3 => array(
        [
            'departure' => 'Nice',
            'arrival' => 'Nantes',
            'departureTime' => '10:40',
            'arrivalTime' => '13:00',
            'driver' => 'Pollux'
        ],
        [
            'departure' => 'Nice',
            'arrival' => 'Tours',
            'departureTime' => '11:00',
            'arrivalTime' => '16:10',
            'driver' => 'Edouard'
        ],
        [
            'departure' => 'Nice',
            'arrival' => 'Nantes',
            'departureTime' => '12:00',
            'arrivalTime' => '16:00',
            'driver' => 'Charlotte'
        ],
    ),

    4 => array(
        [
            'departure' => 'Tours',
            'arrival' => 'Amboise',
            'departureTime' => '16:00',
            'arrivalTime' => '18:40',
            'driver' => 'Priscilla'
        ],
    ),
);


J'espère que quelqu'un pourra m'aider car je suis à court d'idées
Modifié par Don-pasqual (03 Dec 2020 - 14:23)
25 Dernières réponses