Erreur js lors de la mise en ligne de mon site

Hello !
Du coup est ce que tu pourrais nous partager le lien ? Qu'on puisse aller voir :)

bien sur :)

http://www.atypikhouse-cr.com

Je te remercie :)
Du coup effectivement, tu appelles un script mais tu ne l'as pas.
Pourquoi tu as besoin de ce script ?
tu l'appelles ou ? Dans functions.php ?

Hum je sais pas trop j'avoue

je pense que j'ai suivi un cours où on me disait d'écrire ca mais...

en fait j'ai ça dans le fichier Styles.css:
@import url("https://use.typekit.net/ebt2xzg.css");

et dans mon fichier function j'ai ca:
<?php
/Ajouter la prise en charge des images mises en avant/
add_theme_support('post-thumbnails');

/Ajouter automatiquement le titre du site dans l'en-tête du site/
add_theme_support('title-tag');

function atypikhouseSite_register_assets(){
/Déclarer jQuery/
wp_enqueue_script('jquery');
/Déclarer le JS/
wp_enqueue_script(
'atypikhouseSite',
get_template_directory_uri() . '/js/script.js',
[],
false,
true
);
/Déclarer style.css à la racine du thème/
wp_enqueue_style(
'atypikhouseSite',
get_stylesheet_uri(),
array(),
'1.0'
);
/Déclarer un autre fichier CSS/
wp_enqueue_style(
'atypikhouseSite',
get_template_directory_uri(). '/css/main.css',
array(),
'1.0'
);

    /* Déclarer une sidebar*/

register_sidebar(array(
'id'=>'site-sidebar',
'name'=>'Blog',
));
};
add_action('wp_enqueue_scripts','atypikhouseSite_register_assets');

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => ( 'Menu principal' ),
'footer-menu' => ( 'Menu bas de page' )
)
);
}
add_action( 'init', 'register_my_menus' );

(je suis un peu un cas désespéré :) )

J'ai effacé cette partie directement de ftp explorer
/Déclarer le JS/
wp_enqueue_script(
'atypikhouseSite',
get_template_directory_uri() . '/js/script.js',
[],
false,
true
);

je n'ai plus de message d'erreur mais mes polices importées ne se chargent toujours pas dans safari...

En fait il n'y a que sur mon ordinateur que les polices se chargent correctement sur firefox et chrome. (je viens d'essayer sur un autre ordinateur et les polices ne se chargent pas sur chrome et firefox et explorer)

Alors pour le JS tu as bien fait, c'était bien ça qui servait a rien :)
Pour la font, le plus simple c'est de la charger dans le header de ton html, comme ça :

<link href="https://use.typekit.net/ebt2xzg.css" rel="stylesheet">

Normalement ça devrait marcher partout

Je vais essayer merci !! :)
Les modifs de code de ce type je dois les faire dans visual code et apres c'est pris en compte sur mon hébergeur ou je les fais directement sur ftp explorer chez l'hebergeur?

Le mieux c'est quand même de le faire en local.
Le plus simple c'est que par exemple tu modifie le fichier header.php en local. Ensuite tu ré-upload juste ce fichier sur ton ftp, qui remplacera l'existant.

Bien sur c'est une solution rapide et facile que je te conseille uniquement car ce n'est pas un projet pro, et que tu débutes :)

Donc la en gros, tu vas corriger et remplacer les fichiers : header.php, style.css, functions.php

J'ai fais mais rien ne change...

J'ai l'impression que tu utilise mal les propriétés css de la font.
Pour ton h1 par exemple, au lieu de marquer :

font-family: "Korolev Bold", "Roboto Bold";

Il faut décalarer les choses plutôt comme ça :

font-family: korolev, "Roboto", sans-serif;
font-weight: 700;

Et si tu veux qu'en l'absence de la korolev, le navigateur utilise la roboto, il faut que tu l'a charge la font (dans le header pour faire simple, comme l'autre)

AAAAh ça a marché pour le h1 il est bien en korolev en revanche j'ai fais pareil sur mon style pour le reste des textes mais ca reste normal?

.body {
font-family: serenity , "Josefin sans SemiBold";
background-color: var(--blancRose);
}
h1 {
font-family: korolev , "Roboto Bold";
}

Ah c'est bon je pense, j'ai rajouté ca et ca marche:

.content {
font-family: serenity , "Josefin sans SemiBold";
}

Tu m'as sauvée de la depression!!!!!
J'aurai une dernière petite question.... tu me dis si j'abuse un peu...

Quand je vais sur mon site sur mon telephone tout est responsive sauf mon header.. Comment ca se fait? et comment résoudre ca?
merci d'avance

En fait ce qui chi c'est parce que tu mets la graisse avec le nom de la font.

font-family: serenity , "Josefin sans";
font-weight: bold (ou le numéro correspondant à la graisse)

Alors pour le header, déjà, enlève les width 100% du header et du footer.
Ensuite, tu peux rajouter a ton .header_navMenu ul un flex-wrap: wrap;
Mais comme tu as beaucoup de menus, il faudrait rajouter un menu burger en dessous de tant de pixel (quand ça commence a aller a la ligne)
Tu peux aussi ne pas fixer la hauteur du header à 80px, comme ça, quand ça ira à la ligne, le header s'agrandira en même temps.

Mais de manière globale, je pense que tu as mis trop de styles pas forcément utiles, et surtout qui ne vont pas ensemble. par exemple ton footer est en display:flex, mais tu lui assigne un grid template columns, hors c'est une proprété du display grid. Tu as mis aussi beaucoup absolute ou relative, mais ce n'est pas forcément nécessaire. C'est à utiliser dans des cas précis :)

bonjour ! J'ai bien apporté les modifs que tu m'as conseillé. En revanche pour le header responsive les tutos que je trouve montre comment faire en html mais pas en php... (et donc ca n'a pas marché quand j'ai essayé). Ou je peux trouver la doc pour le faire ?

C'est bien du html et du css, pas du php :)
Quand tu modifie tes fichiers header.php, ton fichier est bien en php, mais tu n'écris pas seulement du php à l'intérieur. Il y a aussi du html.
Donc tu peux suivre les tutos que tu as trouvé sans aucun souci :)

Si tu butes sur un point ou si tu ne sais pas ou écrire ce que tu trouves dans le tuto, envoi le bout de code comme ça j'y verrai plus clair

Et c'est là que tu te dis "la mongole" Mddr.

Je vais réssayer alors :) Merci :)

Mais non ça fait un moment que je me suis dit ça :D
Je rigole bien sur ;)

C'est normal de ne pas savoir, on a tous débuté, donc n'ai pas peur de poser des questions "idiotes" ;)

Ahah :D

Hum j'ai suivi un merveilleux tuto tout se met bien mais l'option jquery pour que lorsque je clique sur le hamburger le menu s'affiche ben il s'affiche pas... Sais-tu pourquoi?

Est ce que tu pourrais envoyer le bout de code correspondant stp ? Du html et du js du coup. Pour que je regarde

Moi aussi, j’ai un problème les amies, lorsque je lance une application de bureau Créative Cloud, mes polices ne s’affichent pas dans mes listes, est-ce que vous pouviez m’aider ?

Le plus simple est de créer un sujet, parce que la, ça n'a pas trop de rapport avec le post :)

Hello oui bien sur :)

JS
$('.nav_toggle').click(function(e){
e.preventDefault();
$('.header_navMenu').addClass('.is-open');
})

header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel = "stylesheet"/>
<link href="https://use.typekit.net/ebt2xzg.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>AtypikHouse</title>
<?php wp_head();?>
</head>
<body class="body" <?php body_class();?>>
<header class="header">
<div class="nav_toggle">
<span class="nav_toggle_icon"></span>
</div>

<img class="logoAtypikHouse" src="<?php echo get_template_directory_uri();?>/img/logoBlancST.svg" alt="Logo">
<h1 class="h1">AtypikHouse</h1>

<main class="header_navMenu">

<?php wp_nav_menu(
array(
'theme_location' => 'header-menu',
'container' => 'nav',
'container_class' => 'nav-main nav-collapse',
'container' => 'ul',
'menu_class' => 'header_menu', ) );?>
</main>
</header>
<script src="wp-content/themes/atypikHouseSite/js/app.js"></script>
<?php wp_body_open();?>

CSS

.nav_toggle{
width:40px;
height:50px;
top:0;
margin:20px;
display:none;
align-items: center;
cursor: pointer;
}

.nav_toggle_icon, .nav_toggle_icon:before, .nav_toggle_icon:after{
content:"";
display:block;
width:100%;
height:4px;
background: var(--blancRose);
position:relative;
}

.nav_toggle_icon:before{top:10px;}
.nav_toggle_icon:after{top: -13px;}

.header_navMenu.is-open{
transform: translateX(0);
}

@media only screen and (max-width:880px){
.header_navMenu{
position: absolute;
top:100px; left:0px;
width:300px;
height:500px;
background:var(--violet);
transform: translateX(-100%);
}

.nav_toggle{
    display:flex;
}

.header_navMenu ul, .header_navMenu a{
    display: block;
    text-align:center;
    align-items:center;
    padding: 0; margin: 0 20px;
    height: 50px;

}

}

bonjour,
Vos échanges m'ont beaucoup aidées à comprendre un de mes soucis aussi!!

Hello !
Alors déjà pour commencer, ce n'est pas une bonne pratique d'importer jQuery comme ça dans wordpress, et pas dans le head non plus.
Normalement, tu n'as pas à l'importer d'ailleurs, car WP l'importe d'office.

Ensuite, je crois que dans wordpress, il ne faut pas utiliser l'alias jQuery ($) mais le remplacer par jQuery pour pas qu'il n'y ai de conflit.
Du coup pour ton js j'écrirai ça :

jQuery('.nav_toggle').click(function(){
jQuery('.header_navMenu').toggleClass('is-open');

})

J'utilise toggleClass au moins ça t'ajoute la class et ça te l'enlève automatiquement au clic d'après ;)
Et si tu veux ajouter une class comme tu l'as fait, attention à ne pas mettre le "." avant le "is-open"

Et pour le css, pour la partie qui nous intéresse, j'utilisera juste ça :

.header_navMenu {

  position:relative;
  left: -100%;
  transition: transform .8s;
}
.is-open{
transform: translateX(100%);
  transition: transform .8s;
}

C'est pour l'exemple, après tu lui rajoute les propriétés que tu veux bien sur :)

Ca marche pas ... j'ai du faire une erreur

CSS

.nav_toggle{
width:40px;
height:50px;
top:0;
margin:20px;
display:none;
align-items: center;
cursor: pointer;
}

.nav_toggle_icon, .nav_toggle_icon:before, .nav_toggle_icon:after{
content:"";
display:block;
width:100%;
height:4px;
background: var(--blancRose);
position:relative;
}

.nav_toggle_icon:before{top:10px;}
.nav_toggle_icon:after{top: -13px;}

.header_navMenu.is-open{
transform: translateX(100%);
transition:transform .8s;
}

@media only screen and (max-width:880px){
.header_navMenu{
position: relative;
top:100px;
left:-100%;
width:300px;
height:500px;
background:var(--violet);
transition: transform .8s;
}

.nav_toggle{
    display:flex;
}

.header_navMenu ul, .header_navMenu a{
    display: block;
    text-align:center;
    align-items:center;
    padding: 0; margin: 0 20px;
    height: 50px;

}

}

app.js

jQuery('.nav_toggle').click(function(e){
e.preventDefault();
jQuery('.header_navMenu').toggleClass('is-open');
})

Et j'ai effacé les lignes dans le header.

Ok, qu'est ce que dit ta console dans ton navigateur ?

Ah et, le

.header_navMenu.is-open{
transform: translateX(100%);
transition:transform .8s;
}

Mets le après

.header_navMenu{
position: relative;
top:100px;
left:-100%;
width:300px;
height:500px;
background:var(--violet);
transition: transform .8s;
}

Elle me dit rien concernant cette partie,

on est d'accord que tout ca je dois le mettre dans le @media max 880px ?

yes :) Mais dans le bon ordre, donc donc is-open après

Ca ne marche pas..
Et quand je regarde de mon téléphone je n'ai plus le menu hamburger

Envoi moi ton css, juste l'@media stp

@media only screen and (max-width:880px){
.header_navMenu{
position: relative;
top:100px;
left:-100%;
width:300px;
height:500px;
background:var(--violet);
transition: .8s;
}
.is-open{
transform: translateX(100%);
transition: .8s;
}

.nav_toggle{
    display:flex;
}

.header_navMenu ul, .header_navMenu a{
    display: block;
    text-align:center;
    align-items:center;
    padding: 0; margin: 0 20px;
    height: 50px;

}

}

Ok, c'est parce que tu veux que ta div fasse 300px, mais tu l'a place à - 100%, du coup tu ne l'a vois pas.
donc ton header_navMenu, tu le place à left: -320px par exemple, et pour le is-open, tu met le transform translate à 320px. Et la ça devrait marcher :)

Non toujours pas ... je despère !

Renvoie ton code css maintenant pour voir :)
on va y arriver ;)

Ahah J'espère :D

/
Theme Name: atypikHouseSite
Theme URI:
Author: the WordPress team
Author URI:
Description: theme WordPress AtypikHouse
Requires at least: 4.9.6
Requires PHP: 7.0.0
Version: 1.0
/
@import url("https://use.typekit.net/ebt2xzg.css");

:root {
--violet: #63235A;
--blancRose: #FAE6E6;
--vert: #4AA975;
--gris: #808081;
--noir: #000000;
box-sizing: border-box;
}
*{
box-sizing: inherit;
}

a{
text-decoration: none;
color:var(--noir);
}

.header {
background-color: var(--violet);
height: 100px;
position:relative;
top: 0;
display: flex;
margin:0;
padding:0;
left: 0;
right:0;
z-index: 1000;
width: auto !important;
overflow-x: hidden !important;

}
.footer {
background-color: var(--violet);
position:relative;
bottom: 0;
display: grid;
grid-template-columns: 1fr 30px 40px;
margin: 0;
width: auto !important;
overflow-x: hidden !important;
}

.logoAtypikHouse{
width: 70px;
padding: 5px;
display:flex;
align-items: center;
justify-content: center;
height: 70px;
margin-left: 60px;
top:0;
}
.header h1{
color: var(--blancRose);
font-size: 1.4em;
display: flex;
align-items: center;
height: 80px;
margin: 0;
padding-left: 10px;
position: relative;
bottom: 0px;
}

.has-background{
border-radius: 70px/60px;
}

.body {
font-family: serenity , "Josefin sans SemiBold";
font-size: 1.4em;
background-color: var(--blancRose);
margin:0;
padding:0;
height: 100%;
z-index: 1000;
width: auto !important;
overflow-x: hidden !important;
}

h1 {
font-family: korolev , "Roboto Bold";
}
.content {
font-family: serenity , "Josefin sans SemiBold";

}

.header_navMenu{
background: transparent;
font-size: 1em;
padding-bottom: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
display: flex;
position: absolute;
width: 100%;
left: 20px;
top: 20px;
float: left;
}

.header_navMenu a{
color: var(--blancRose);
font-size: 1em;
text-decoration: none;
padding:0; margin:0 15px;
border-bottom: 2px solid transparent;
position: relative;

}

.header_navMenu a:hover{
border-color: var(--blancRose);
padding-bottom: 2px;

}
.header_navMenu ul{
list-style:none;
font-size: 1em;
padding:50px;
height: 40px;
margin: 0;
display:flex;
flex-wrap: wrap;
position: relative;

}

.footer_navMenu{
background-color: transparent;
position:absolute;
width: 100%;
padding-bottom: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
display: flex;
bottom: 15px;
left:180px;
}

.footer_navMenu a{
color: var(--blancRose);
font-size: 1em;
text-decoration: none;
display:inline-block;
min-width: 30px;
justify-content: space-between;
padding-right:30px;

}
.footer_navMenu ul{
list-style: none;
font-size: 1em;
padding:30px;
height: 40px;
margin: 0;
display:flex;
}

.newsletter-form {
font-family: serenity , "Josefin sans SemiBold";
color: var(--blancRose);
align-content: right;
align-items: right;
}

.nav_toggle{
width:40px;
height:50px;
top:0;
margin:20px;
display:none;
align-items: center;
cursor: pointer;
}

.nav_toggle_icon, .nav_toggle_icon:before, .nav_toggle_icon:after{
content:"";
display:block;
width:100%;
height:4px;
background: var(--blancRose);
position:relative;
}

.nav_toggle_icon:before{top:10px;}
.nav_toggle_icon:after{top: -13px;}

@media only screen and (max-width:880px){
.header_navMenu{
position: relative;
top:100px;
left:-320%;
width:300px;
height:500px;
background:var(--violet);
transition: .8s;
}
.is-open{
transform: translateX(320%);
transition: .8s;
}

.nav_toggle{
    display:flex;
}

.header_navMenu ul, .header_navMenu a{
    display: block;
    text-align:center;
    align-items:center;
    padding: 0; margin: 0 20px;
    height: 50px;

}

}

.flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange{
background-color: var(--violet);
border-color: var(--violet);
}

En plus quand je regarde sur mon telephone le menu hamburger n'apparait plus

Alors, dans ton @media,
pour le header_navMenu : Vire la position relative, et left c'est -320px, pas % ;)

Pareil pour le is-open, le translate c'est en px, pas en %

Ensuite, plus haut (hors de ton @media), tu vire le overflow hidden.

La ça devrait marcher :)

Modifications faites

Alors l'avantage c'est que je retrouve mon menu burger sur mobile (youpi les minis victoires!)

Le overflow si je le mets pas j'ai un gros espace sur la droite de ma page aussi bien sur ordi que portable.

Et donc ca marche toujours pas MAIS (je vais essayer d'être clair car pas facile sans capture vidéo)
quand je clique sur le burger le menu vient toujours pas mais quand je réduis ma page de navigateur pour arriver jusqu'au burger menu je le vois ce con de menu, se barrer vers la gauche alors pourquoi il revient pas ? ^^

Alors oui, le header doit avoir un souci, on va le régler pas de souci ;)
Par contre pour le burger, tu l'as mis ou le bout de code jquery pour ajouter la classe is-open ? Tu modifie ton site en local ou distant ?

J'ai créer un fichier app.js
avec ca dedans

jQuery('.nav_toggle').click(function(e){
e.preventDefault();
jQuery('.header_navMenu').toggleClass('is-open');
})

et sinon c'est juste ce qu'il y a dans le css

.nav_toggle{
width:40px;
height:50px;
top:0;
margin:20px;
display:none;
align-items: center;
cursor: pointer;
}

.nav_toggle_icon, .nav_toggle_icon:before, .nav_toggle_icon:after{
content:"";
display:block;
width:100%;
height:4px;
background: var(--blancRose);
position:relative;
}

.nav_toggle_icon:before{top:10px;}
.nav_toggle_icon:after{top: -13px;}

Et tu l'appelle comment le fichier app.js ?

initialement j'avais mis ca dans le header
<script src="wp-content/themes/atypikHouseSite/js/app.js"></script>

mais je crois que tu m'avais dis d'enlever du coup j'ai rien je pense

alors oui, il faut le mettre avant la fermeture du body, mais sur wordpress c'est un peu différent (si tu le met dans ton html, avant la fermeture du body ça marche).

Pour faire simple, tu vas dans ton functions.php, tout en bas et tu tapes cette fonction :

function script_de_mon_theme()
{
  wp_enqueue_script('app-js', get_template_directory_uri() . '/chemin-vers-ton-fichier-app/app.js', array(), false, true);

}
add_action('wp_enqueue_scripts', 'script_de_mon_theme');

Voici mon fichier function

<?php
/Ajouter la prise en charge des images mises en avant/
add_theme_support('post-thumbnails');

/Ajouter automatiquement le titre du site dans l'en-tête du site/
add_theme_support('title-tag');

function atypikhouseSite_register_assets(){
/Déclarer jQuery/
wp_enqueue_script('jquery');

/*Déclarer style.css à la racine du thème*/
wp_enqueue_style(
    'atypikhouseSite',
    get_stylesheet_uri(),
    array(),
    '1.0'
);
/*Déclarer un autre fichier CSS*/
wp_enqueue_style(
    'atypikhouseSite',
    get_template_directory_uri(). '/css/main.css',
    array(),
    '1.0'
);

    /* Déclarer une sidebar*/

register_sidebar(array(
'id'=>'site-sidebar',
'name'=>'Blog',
));
};
add_action('wp_enqueue_scripts','atypikhouseSite_register_assets');

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => ( 'Menu principal' ),
'footer-menu' => ( 'Menu bas de page' )
)
);
}
add_action( 'init', 'register_my_menus' );

function script_atypikHouseSite()
{
wp_enqueue_script('app-js', get_template_directory_uri() . '/app.js', array(), false, true);

}
add_action('wp_enqueue_scripts', 'script_atypikHouseSite');

Du coup sur le navigateur pas trop de changé et sur mon portable je vois le clic se faire (surbrillance au moment du clic) mais toujours pas de menu en vue !

(je réponds a ta question de tout à l'heure (j'avais zappé) je modifie sur visual code direct et je recharge mes dossiers à chaque fois dans mon hébergeur pour voir le vrai rendu et les erreurs eventuelles (et tu peux voir aussi du coup)

Attention, tu as oublié d'enlever le point dans ta methode jQuery :

jQuery('.header_navMenu').toggleClass('.is-open');

Il ne faut pas mettre le point de la classe en argument, donc comme ça :

jQuery('.header_navMenu').toggleClass('is-open');

Oui oui j'avais remarqué je l'ai retiré mais ca change quand meme rien..

Il faut que tu enlève le overflow hidden du header.
Et pour le translate de .is-open, c'est pas 0px mais 300px

Rien ne change si ce n'est que je retrouve l'espace sur la droite quand je retire le overflow (c'est pas pratique du coup)

Oui mais enlève le, on réglera le problème de l'espace. Mais il faut que je vois d'ou il vient. Donc réglons un problème à la fois :)
Par contre j'ai l'impression que tu charges deux fois le style.css, du coup c'est peut être pour ça que ça ne marche pas.
Donc regarde ce souci de doublons, et enlève l'overflow :)

Ca marche !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! je te connais pas mais tu n'imagines pas comment tu me sauves la vie merci beaucoup pour tout le temps que tu prends pour m'aider !!!

hum du coup maintenant le problème c'est l'espace pour l'espace ? :DDDDDDDD

Ah cool :)
De rien, c'est toujours plaisant d'aider quelqu'un qui galère, et inverssement :)

Alors pour l'espace, déjà, enleve width 100% à ton header_navMenu et à ton footer_navMenu.
Ensuite, est ce que tu as touché au style wc-blocks-style.css ?

Parce qu'il ya un padding bizarre qui fait chier sur le ul.wc-block-grid__products

C'est bon ca marche ! merci beaucoup.

J'aurai une dernière petite question avant de fermer le sujet :)
Connais-tu une façon ou un plugin me permettant de faire une barre de recherche sur la page d'accueil comme Airbnb (où tu peux choisir le type d'hebergement les dates etc et que ce soit lié aux calendriers de mes produits et à mes produits) ? tous les plugins que je vois me permette que de faire une barre basique où tu écris dedans ce que tu cherches?

Ah super si ça marche :) On a fini par y arriver ^^

Franchement je ne sais pas, je n'ai jamais eu à faire ce genre de chose, et en génréal j'éssai de coder à la main au maximum avant d'utiliser des plugins :)
Si tu veux des conseils sur wordpress, tu peux rejoindre le slack wordpress fr. Il y a que des dev WP, de tout niveau, et franchement ils sont souvent réactif, et sympa. (ici aussi tout le monde est sympa hein ;) mais il n'y a pas que des dev WP, bien au contraire

Ok ca marche merci :)

Et merci encore pour toute ton aide qui m'a été précieuse !!

Bonne continuation à toi :)

Je t'en pris, avec plaisir. n'hésite pas si tu as un soucis ;)

Hello, je suis de retour :D

Ultime question :)

Je voulais mettre un pading uniquement au contenu de mes pages (pour pas que tout soit collé au bord)
donc j'avais mis

.body
pading:10px;

Le problème c'est que du coup ca s'applique également à mon header et mon footer et ca je veux pas je veux qu'ils restent collé partout.

As-tu une idée de génie ?

ET biensur de mettre le padding à 0 dans le .header et le .footer ca ne fonctionne pas :)

Je pense que le mieux et le plus simple serait d'englober toute ta page dans une div, et tu appliquera le padding sur cette div.
En gros tu auras un truc qui ressemblera à ça :

<body>
<header></header>
<div class="wrapper">
Tout le contenu de ta page
</div>
<footer></footer>
</body>

J'ai reussi à résoudre ce problème :)

Une dernière petite question : Maintenant (je sais pas pourquoi ou depuis quand..) mon menu burger s'ouvre bien mais on dirait que la page passe par dessus et que lui passe en arrière plan? Sais-tu pourquoi?

/
Theme Name: atypikHouseSite
Theme URI:
Author: the WordPress team
Author URI:
Description: theme WordPress AtypikHouse
Requires at least: 4.9.6
Requires PHP: 7.0.0
Version: 1.0
/
@import url("https://use.typekit.net/ebt2xzg.css");

:root {
--violet: #774470;
--blancRose: #FAE6E6;
--vert: #4AA975;
--gris: #808081;
--noir: #000000;
box-sizing: border-box;
}
*{
box-sizing: inherit;
}

a{
text-decoration:var(--violet);
color:var(--violet);
}

h1, h2, h3, a, p, input{
padding: 10px;
}

.header {
background-color: var(--violet);
height: 100px;
position:relative;
top: 0;
display: flex;
margin:0;
padding:0;
left: 0;
right:0;
width: auto;
}
.div-header{
padding:0;
}

.footer {
background-color: var(--violet);
height: 100px;
position:relative;
bottom: 0;
display:flex;
margin:0;
padding:0;
left: 0;
right:0;
z-index: 1000;
width: auto;
}

.div-footer{
padding: 0;
}

.logoAtypikHouse{
width: 70px;
padding: 5px;
display:flex;
align-items: center;
justify-content: center;
height: 70px;
margin-left: 60px;
top:0;
}

.header h1{
color: var(--blancRose);
font-size: 1.4em;
display: flex;
align-items: center;
height: 80px;
margin: 0;
padding-left: 10px;
position: relative;
bottom: 0px;
}

.has-background{
border-radius: 70px/60px;
}

.body {
font-family: serenity , "Josefin sans SemiBold";
font-size: 1.4em;
background-color: var(--blancRose);
margin:0;
padding:0;
height: 100%;
}

h1 {
font-family: korolev , "Roboto Bold";
}
.content {
font-family: serenity , "Josefin sans SemiBold";
padding: 0;
}

.header_navMenu{
background: transparent;
font-size: 1em;
padding-bottom: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
display: flex;
position: absolute;
left: 20px;
top: 20px;
float: left;
}

.header_navMenu a{
color: var(--blancRose);
font-size: 1em;
text-decoration: none;
padding:0; margin:0 15px;
border-bottom: 2px solid transparent;
position: relative;

}

.header_navMenu a:hover{
border-color: var(--blancRose);
padding-bottom: 2px;

}

.header_navMenu ul{
list-style:none;
font-size: 1em;
padding:50px;
height: 40px;
margin: 0;
display:flex;
flex-wrap: wrap;
position: relative;
}

.footer_navMenu{
background: transparent;
position:absolute;
padding-bottom: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
display: flex;
bottom: 15px;
left:10px;
}

.footer_navMenu a{
color: var(--blancRose);
font-size: 1em;
text-decoration: none;
display:inline-block;
min-width: 30px;
justify-content: space-between;
padding-right:30px;

}
.footer_navMenu ul{
list-style: none;
font-size: 1em;
padding:10px;
height: 60px;
margin: 0;
display:flex;
}

.nav_toggle{
width:40px;
height:50px;
top:0;
margin:20px;
display:none;
align-items: center;
cursor: pointer;
}

.nav_toggle_icon, .nav_toggle_icon:before, .nav_toggle_icon:after{
content:"";
display:block;
width:100%;
height:4px;
background: var(--blancRose);
position:relative;
}

.nav_toggle_icon:before{top:10px;}
.nav_toggle_icon:after{top: -13px;}

@media only screen and (max-width:880px){
.header_navMenu{
top:100px;
left:-300px;
width:300px;
height:500px;
background:var(--violet);
transition: .8s;
}
.is-open{
transform: translateX(300px);
transition: .8s;
}

.nav_toggle{
    display:flex;
}

.header_navMenu ul, .header_navMenu a{
    display: block;
    text-align:center;
    align-items:center;
    padding: 0; margin: 0 20px;
    height: 50px;

}

}

.flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange{
background-color: var(--violet);
border-color: var(--violet);
}

Merci d'avance une fois de plus !!

Re ;)

Met un z-index: 10 à ton header, et ça rentrera dans l'ordre

Mais quel sauveur merci !!!!! :)

Je rends le projet j'ai hate que ca soit terminé !!!

;) Bon courage alors ^^