Bonjour,

Déjà, je ne mettrais pas le @font-face dans le @media. Même si ça pouvait marcher partout, ce que je n'ai pas vérifié, ce @font-face est mal placé vu qu'on utilise roboto aussi en dehors de ce @media.

Ensuite, pour tester, je ne mettrais dans le font-family que robot et sans-serif.
body {font-family: roboto,sans-serif}

Il sera bien temps une fois cela marchera de remettre les autres machins qui soit dit en passant ne servent à rien puisqu'en théorie, roboto sera forcément disponible du fait du @font-face.

Ensuite, je testerais sans le @media et avec une page de test toute simple pourvoir si le @font-face marche.

EDIT: et je ne vois pas pourquoi tu ne te contentes pas de la police .ttf qui est téléchargeable à https://fonts.google.com/
EDIT2: et retire les espaces entre url et (, et entre format et (

Amicalement,
Modifié par parsimonhi (02 Mar 2021 - 18:02)
connecté
Bonjour à tous,

J'utilise Laragon pour mes sites WordPress et je n'arrive pas à installer un nouveau site WP.

dans le dossier www,
- je crée un sous dossier test dans lequel je copie WordPress
- je crée ma base de donnée my-test en utf8_general_ci
- je lance mon localhost dans chrome

à la fin de l'installation il me dit : Il y a eu une erreur critique sur ce site.

En apprendre plus sur le débogage de WordPress.

Comment résoudre le problème ?

J’accède à mon site via : http://localhost:8080/

Merci pour votre aide
Modifié par WPMAMP (02 Mar 2021 - 16:52)
Bonjour,
Je n'arrive pas à updater une variable déclarée au préalable.

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if( session_id()=='' ){ session_start(); }
//if (isset($_SESSION['id']) AND isset($_SESSION['pseudo']))
//{
//session_start();
// connexion a la bdd
require_once 'config.php';
/* Initialisation de la variable avatar*/
$avatar= "/avatars/0001.png";
$pdostat = $bdd->prepare('UPDATE membres SET avatar = :avatar WHERE id = :id');
$pdostat->bindValue(':avatar', $avatar, PDO::PARAM_STR);
$pdostat->bindValue(':pseudo', $pseudo, PDO::PARAM_STR);
$pdostat->execute(array(
'avatar' => $avatar,
'id' => $id));
$_SESSION['avatar'] = $avatar;
header('page_test.html');
exit;
?>


Undefined variable: id in C:\wamp64\www\register_av0001.php on line 15
C'est ce qui ressort de ce que je lis un peu partout. Sous-répertoire ou sous-domaine, du point de vue de l'hébergeur, ce n'est toujours qu'un dossier sur la racine du site original. Après, c'est à nous de bien renseigner la balise hreflang, comme tu le précise.

La différence entre les deux se ressent dans le travail qu'il faut faire au niveau du référencement. Un sous-répertoire va bénéficier tout de suite du site parent, puisqu'il n'est qu'un répertoire de ce site. Un sous-domaine, c'est un autre site, ou presque. Un sous-dossier est très pertinent pour un blog qui se rapporte au site parent. De gros comptes ont choisis les sous-dossiers pour l'international, Microsoft par exemple. Si Microsoft se trompait, ça se saurait Smiley lol Smiley biggrin

Ajout : C'est bon, j'ai testé sur https://technicalseo.com/tools/hreflang/
Tout est ok. Ne pas oublier de changer le sitemap et robots.txt qui pointe le sitemap
Modifié par Bongota (01 Mar 2021 - 21:09)
Je ne pense pas que ça ait une quelconque incidence qu'on passe par un sous domaine ou par un sous-dossier, tant qu'on renseigne bien les balises hreflang en tout cas.

Quand je passe sur Google anglophone, j'ai bien mes pages en version anglaise, et sur le Google francophone, j'ai les mêmes pages en version française, et je n'ai jamais reçu d'erreur de la search console.

D'ailleurs, sur cette page Google liste les façons de gérer les URL selon les langues et voilà ce qu'il en ressort :
upload/1614613607-68566-capturedaeacran2021-03-01aa16.png

Techniquement et au niveau du référencement, je pense que nos deux méthodes se valent et sont parfaitement fonctionnelles.
Merci Laurent d'avoir pris le temps de répondre,
Concernant les input je voulais dire que mon alert(); s'exécutait avant la validation du formulaire ce qui était assez embêtant (en gros même si l'email était vide j'avais le popup)
J'ai cherché de mon côté et j'ai essayé en mettant un id à mon <form id="devisun"></form> et un button type submit. Côté JS j'ai mis ça :
document.getElementById("devisun").addEventListener("submit", function(e) {
    e.preventDefault();
    alert('test');
})

Mais j'ai juste un message de re-validation d'un formulaire. J'ai un button type submit j'ai essayé de le passer en input type submit mais ça ne change rien. Mon code final ressemble à ça
                <form id="devisun">
                <h1>Nous contacter</h1>
                <input type="text" class="name" maxlength="20" placeholder="Votre Nom" onfocus="this.placeholder=''" onblur="this.placeholder='Votre Nom'" required>
                <input type="email" class="email" placeholder="Indiquez une adresse email valide" onfocus="this.placeholder=''" onblur="this.placeholder='Entrez une adresse email valide'" required>
                <textarea rows="1" placeholder="Soyez clair dans votre ..." class="message" onfocus="this.placeholder=''" onblur="this.placeholder='Soyez clair dans votre ...'" required></textarea>
                <button type="submit">Envoyer votre devis</button>
                </form>

et côté js c'est toujours la même. Smiley confus

(pour les apostrophes c'est niquel merci des explications)
Modifié par Efeelios (01 Mar 2021 - 17:14)
Bonjour,

1) background-attachement: fixed; fonctionne avec safari sur mac, mais pas avec safari sur ios effectivement.

2) je ne ferais rien de spécial si ce n'est veiller à ce que la position initiale du background permette de voir une partie de la photo acceptable avec un safari sur ios.

- avec les navigateurs qui connaissent background-attachement: fixed;, ça fonctionnera comme tu l'attends lors d'un scroll.

- avec les navigateurs qui ne connaissent pas background-attachement: fixed;, on verra toujours la même partie de la photo lors d'un scroll. C'est un fonctionnement dégradé très acceptable.

3) on peut cibler uniquement safari sur ios en css (pour par exemple positionner la photo de manière appropriée) avec des instructions du genre :

@supports (-webkit-touch-callout: none) {
  /* mettre ici du css spécifique pour safari sur ios */
}


4) Il existe des combines pour faire comme si background-attachement: fixed; fonctionnait, en particulier à base de javascript. Je te déconseille de te lancer là-dedans. Attends plutôt tranquillement que background-attachement: fixed; soit supporté par safari pour ios (c'est n'est pas demain la veille, vu qu'ils ont fait exprès que ça ne puisse pas marcher pour des questions de performance, mais un jour peut-être, ils finiront par implémenter cette fonctionnalité).

Amicalement,
Modifié par parsimonhi (01 Mar 2021 - 13:35)
Salut,

background-attachement: fixed; à bien l'air d'être fonctionnel sur Safari :
https://caniuse.com/background-attachment

Attention cependant ca background-attachement: fixed; et background-size: cover; va faire en sorte que ton image prenne la totalité de ta fenêtre. Ton image étant en paysage, sur un format en portrait elle sera donc très zoomée.

De plus en format mobile ( < 480px) ton image (ta bannière) disparait totalement pour moi...

Bonne journée
Bonjour,

Enfaite, je voudrais le résultat de ma page sur chrome ou firefox, sur safari, donc il faut que #banniere_image soit fixed. Or background-attachment fixed ne marche pas sur safari mais marche sur les autres navigateurs.

Est-ce que j'ai été plus claire ?
Salut !

Efeelios a écrit :
cependant il ignore les required des input, si quelqu'un peut m'éclairer comment je peux les vérifier avant d'afficher la pop up?

Il ignore les required ?
Quand je copie colle ton code il garde bien les required une fois que tu as fermé l'alert : https://jsfiddle.net/5tfx2vjw/
Ce n'est peut etre pas le comportement que tu attends ?


Efeelios a écrit :
et aussi j'en profite Smiley murf si quelqu'un peut me dire comment mettre des Apostrophe dans un champ de caractère
onblur="this.placeholder='test'"
j'ai essayé de les doubler mais apparement je suis encore à côté de la plaque Smiley eek

Il faut mettre des backslash normalement mais c'est que quand tu veux echapper des quotes du même genre que ceux utilisé pour le JS... Ici tu n'en a pas besoin normalement vu que " et ' cohabitent très bien : https://jsfiddle.net/maovqhLt/

Tu en aurais besoin si tu voulais afficher :
'test'
avec des quotes
onblur="this.placeholder='\'test\''"
pour ne pas que les guillemets autour de test coupe ton string.
https://jsfiddle.net/maovqhLt/1/
(et encore ca ne marche pas avec lez double, surement parceque c'est en inline dans le html)

Bonne journée
Modifié par _laurent (01 Mar 2021 - 05:50)
up : j'ai réussi par un simple
<button type="submit" class="btnfootersubmit" onclick="popup()">Envoyer</button>
suivi de
function popup() {
    onclick = alert('test');
}
c'était vraiment simple en fait Smiley hum

cependant il ignore les required des input, si quelqu'un peut m'éclairer comment je peux les vérifier avant d'afficher la pop up?

et aussi j'en profite Smiley murf si quelqu'un peut me dire comment mettre des Apostrophe dans un champ de caractère
onblur="this.placeholder='test'"
j'ai essayé de les doubler mais apparement je suis encore à côté de la plaque Smiley eek
Modifié par Efeelios (01 Mar 2021 - 03:19)
Bonsoir ! (Cette partie a finalement été réussie lol)

J'aimerais savoir s'il est possible de créer un alert de JS par un button d'un formulaire de contact ? C'est sûrement flou car j'ai sûrement pas les bons mots mdr en résultat ça donne ça

            <div class="rightfooter boxfooter">
                <h2>Demande de devis</h2>
                <div class="contentfooter">
                    <form action="">
                        <div class="emailfooter">
                            <div class="textfooter">Email *</div>
                            <input type="email" placeholder="gngngng." required>
                        </div>
                        <div class="msgfooter">
                            <div class="textfooter">Message *</div>
                            <textarea cols="25" rows="2" placeholder="gngngn" required></textarea>
                        </div>
                        <div class="btnfooter">
                            <button type="submit">Envoyer</button>
                        </div>


upload/1614558702-77403-capture.png Voilà en photo car 'jai pas mis tout le code (je ne crois pas que c'était nécessaire) Smiley sweatdrop
C'est sûrement vague, vous devriez avoir compris le concept Smiley sweatdrop . Je ne connais pas beaucoup les fonctionnalités de JS c'est du début. J'ai essayé par
function popupBasique(page) {
    window.open(page);
  }
avec un href
javascript:popupBasique('popup.html')


Mais non, j'ai également essayé de donner une class btnfootersubmit à mon button et de faire
var btnfootersubmit = document.getElementsByClassName('btnfootersubmit');

btnfootersubmit.addEventListener('click',openModal);

function openModal(){
    overlay.style.display = 'block';
}
mais ça ne fonctionne pas.
Voilà voilà si quelqu'un peut trouver la patience de me diriger sur un tutoriel ou m'expliquer comment m'y prendre, merci à vous Smiley sweatdrop
Modifié par Efeelios (01 Mar 2021 - 03:18)
Salut Bongota,

Sur un site bilingue anglais/français, j'avais aussi mis ça en place et il faut indiquer toutes les variantes de langue de la page, y compris la langue actuelle.

Peu importe que la page soit FR ou EN, on mettra toutes ces balises sur les deux versions :
<link rel="alternate" hreflang="fr" href="https://www.monsite.fr/fr/" />
<link rel="alternate" hreflang="en" href="https://www.monsite.fr/en/" />


Et puis Google l'explique mieux que moi Smiley smile

Google a écrit :
Ajoutez des éléments <link rel="alternate" hreflang="lang_code"... > à l'en-tête de la page pour indiquer à Google toutes ses variantes linguistiques et régionales. Cette méthode est utile si vous n'avez pas de sitemap ou si vous n'avez pas la possibilité de spécifier des en-têtes de réponse HTTP pour votre site.

Chaque variante de page doit inclure un ensemble d'éléments <link> dans l'élément <head>, soit un lien pour chaque variante, y compris la page elle-même. L'ensemble de liens est identique pour chaque version de la page.

Modifié par Loraga (28 Feb 2021 - 22:38)
Bonjour,

je lis les docs, mais j'ai un doute sur la balise hreflang. J'ai créé un sous-domaine chez mon hébergeur.
Si j'ai bien compris, pour un site bilingue par exemple (français/Anglais), on doit mettre dans chaque page html de chaque site une balise hreflang. Et chacune de ces balises doit pointer l'une vers l'autre. Exemple :
<link rel="alternate" href="https://en.monsite.fr" hreflang="en-us"/> 
à mettre sur la page html en Français.
<link rel="alternate" href="https://monsite.fr" hreflang="fr"/>
à mettre sur la page html en Anglais.
Ou l'inverse. ? J'ai déposé tout ça sur les deux sites, ils fonctionnent toujours et les performances n'ont pas bougé. Par contre, je n'arrive pas à pointer aucun des deux sites avec http://hreflang.ninja/ qui permet d'effectuer une vérification sur ces balises.
J'ai aussi lu qu'il ne fallait pas mélanger la balise hreflang avec la balise canonical.
C'est un peu obscure pour moi, surtout que ça fonctionne toujours, c'est pas comme une erreur de code qui bouleverse tout. Et si j'ai fait une erreur, je vais rapidement être déclassé par les moteurs de recherche.
Modifié par Bongota (28 Feb 2021 - 21:55)
Bonsoir,

Aujourd'hui, flex ou grid permettent ce genre de chose aisément: voici un exemple : https://codepen.io/gc-nomade/pen/jOVzzXJ

le CSS de base ressemble a ceci:
en flex :
wrapper {
   height:100vh;
   display:flex;
   flex-direction:column
}
.a { /* on laisse le contenu faire */}
.b{
   flex-grow:1;
   overflow:auto;
}


en grid
.wrapper {
   height:100vh;
   display:grid;
   grid-template-row: auto 1fr ;
}
.a {/* on laisse le contenu faire */}
.b {
   overflow:auto;
}


Cdt
Chers Alsacocréationnistes,

j'ai un souci de hauteur de div que je n'arrive pas à régler malgré mes recherches sur qwant.
J'expose direct le problème :

1) j'ai une div principale (appelons- la A) dont la hauteur est relative à celle de la fenêtre moins la hauteur de l'en-tête de ma page :
height: calc(96vh - 90px)


2) dans celle-ci j'en ai deux
- une contenant du texte (appelons-la B1) et dont la hauteur est dynamique de manière à ne pas tronquer ce texte :
height: auto

- une seconde (appelons-la B2, celle qui me Broute) qui contient des illustrations des tableaux… bref un tas de trucs dont on s'en fout et pour laquelleje voudrais que la hauteur occupe au maximum la hauteur de ma div principale (A) moins la hauteur de la div dynamique (B1)

évidemment j'ai activé
overflow: auto

ça fonctionne bien lorsque le contenu de B2 depasse la largeur de A, mais ça ne fonctionne pas verticalement.
En effet plutôt que de restreindre la hauteur B1+B2 à la hauteur de A, quitte à afficher les ascenseurs sur B2, ma div B2 dépasse verticalement de la div A qui la contient. sans que l'ascenseur Y s'affiche.

évidemment j'ai testé tout un tas de trucs et de combinaisons de height, de display de flex etc mais j'arrive à rien.

Quelqu'un peut t-il m'aider ?


Cordialement,

Kashlm

PS c'est dimanche je suis devant le PC pour encore 1h, ensuite je déconnecte jusqu'à jeudi, donc vous vexez pas si je réagis pas de suite à vos futures magnifiques réponses.
Modifié par kashlm (28 Feb 2021 - 21:11)
Bonsoir.

le plus simple est probablement d'enlever tous tes width , au moins ceux de 90 a 100% et de faire un reset sur tout les margin et padding.

Une fois cela fait, tu peut soit mettre un margin, soit un padding horizontal sur le parent principal de la zone que tu veut décoller des bords. Ce sera plus simple à effectuer et aligneras tout ses enfant en même temps. par exemple section {padding:0 2.5%} hx,p, ul,li , ... ont tous des margin ou padding par défaut. un reset global est plus facile à gérer que d'ajouter un width/margin/padding approximatif ici ou là Smiley smile

Cdt
Modifié par gcyrillus (28 Feb 2021 - 21:09)
En gros, quand je met
    #banniere_image
    {
        width: 90%;
        margin-top: 3%;
        height: 180px;
        position: fixed;
        margin-bottom: 4%;
    }
pour la version mobile, ça donne ce que l'on voit.
Je ne peux pas envoyer de vidéo dsl ni de photo car elles sont trop grosse.
Modifié par Louis_9876 (28 Feb 2021 - 19:52)
Bonjour,

Je suis allé sur GitHub et j'ai téléchargé 6 fichiers :

roboto-bold.woff
roboto-bold.woff2
roboto-italic.woff
roboto-italic.woff2
roboto-regular.woff
roboto-regular.woff2

Les 6 fichiers sont mis dans un dossier font Dans www

body  {font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", arial, helvetica, verdana, sans-serif}

@media screen and (min-width: 769px)
{
@font-face
{
font-family: roboto;
src :
url ("../font/roboto-regular.woff2") format ("woff2"),
url ("../font/roboto-regular.woff") format ("woff"),
url ("../font/roboto-italic.woff2") format ("woff2"),
url ("../font/roboto-italic.woff") format ("woff"),
url ("../font/roboto-bold.woff2") format ("woff2"),
url ("../font/roboto-bold.woff") format ("woff");
}

body {font-family: roboto, arial, helvetica, verdana, sans-serif}
}



Cela ne marche pas du tout.
Je veux dire que sur grand écran je me prends la police Arial alors que Roboto est supposé être disponible.

Voyez-vous où est l'erreur ?
Modifié par boteha_2 (28 Feb 2021 - 16:13)
voila c est regler via cette astuce
merci de l aide

<form method="post" id="sectionForm">
<input type="checkbox" name="techniques[]" value="valeur1"> Technique 1<br/>
<input type="checkbox" name="techniques[]" value="valeur2"> Technique 2<br/>
<input type="checkbox" name="techniques[]" value="valeur3"> Technique 3<br/>
<input type="checkbox" name="techniques[]" value="valeur4"> Technique 4<br/>
<input type="submit">
</form>
<script>
//on selectionne notre form sur lequel on souhaite écouter les évenements
const formulaire = document.querySelector('#sectionForm');
//si on clic sur "Envoyer" on vérifi si il y a un minimum de case cochées:
formulaire.onsubmit = function(){
if(verifier_si_cochee('techniques[]'))
return true;
else {
//on affiche un petit message
formulaire.append("Vous devez cocher au moins une case");
//et on bloque le soumission du form:
return false;
}
}
function verifier_si_cochee(name_input) {
//avec cette fonction, on boucle chaque case et retourne true si ya une case cochée
let input=formulaire.querySelectorAll('input[name="'+name_input+'"]')
for (let i = 0; i < input.length; i++) {
if(input[i].checked)
return true;
}
//sinon on retourne false
return false;
}
</script>
Salut,

Dans ton exemple il va récupérer toutes les checkbox du form :
    const form = document.querySelector('#sectionForm');
    const checkboxes = form.querySelectorAll('input[type=checkbox]');


Toi il faut que tu ne récupères qu'un partie. Il faut que tu différencie tes checkbox (en les regroupant dans un élément ou en leur donnant une classe commune) et que tu changes ces sélecteurs pour que tu ne sélectionne que les checkbox que tu veux.
Bonjour Niuxe
je viens de revenir et vais me re-pencher sur le sujet .
mon wamp semble bien fonctionner et, comme dit précédemment le rendu est correct avec Opéra et IE et il était aussi correct avec FF il y a peu de temps ; mais, hélas , ça n'est plus le cas ... j'ai plusieurs projets sur le wamp et tous fonctionnent correctement avec IE et Opéra et .. plus aucun avec FF . C'est la raison qui me fait penser que le problème viendrait plutôt de FF . Je vais d'abord sauvegarder mes favoris et mdp et j'essaierai de réinstaller FF.. Qui sait !!
Étant plus que très moyennement compétent en informatique, je commence à savoir un petit peu me servir de wamp et préfèrerais le garder .. et .., pour moi , vhost ?????
bonjour a tous
j ai un formulaire dans lequel
j ai plusieurs listes avec des choix de checkbox je souhaiterais savoir comment je peux obliger l utilisateur a devoir au minimum faire un choix par liste
voici mon fichier pour démarrer
<form method="post" action="">
<br />
<h2 >esches utilisees </h2>
<input type="checkbox" name="technique[]" value="perle">perle
<input type="checkbox" name="technique[]" value="graine">graines
<input type="checkbox" name="technique[]" value="asticot">asticot/pinkies
<input type="checkbox" name="technique[]" value="pelets">pelets
<br />
<h2>meteo: </h2>
<input type="checkbox" name="meteo[]" value="vaseux">vaseux
<input type="checkbox" name="meteo[]" value="vent">vent
<input type="checkbox" name="meteo[]" value="pluie">pluie
<input type="checkbox" name="meteo[]" value="neige">neige
<input type="checkbox" name="meteo[]" value="soleil">soleil
<input type="checkbox" name="meteo[]" value="nuageux">nuageux
<br />
<input type="submit" name="submit" value="Valider" />



j'ai essaye pas mal de choses , cela fonctionne avec une liste mais pas avec deux
ou alors faut connaître javascript et de ce cote , j'y connais rien

dans mon exemple je souhaites rendre obligatoire au moins un élément de la liste météo et au moins un élément de la liste technique

j avais trouve cette solution mais je n arrive pas a l appliquer pour mes deux lites

https://vyspiansky.github.io/2019/07/13/javascript-at-least-one-checkbox-must-be-selected/

merci de l aide
Ca y est Niuxe, j'ai encore rebidouillé le script et cette fois il fonctionne.



<?php
if( session_id()=='' )
{
session_start();
 }
require_once 'config.php';
$err_connexion = array();
if(isset($_POST['connexmembre']) )
{
		if( !empty($_POST["pseudo"]) && !empty($_POST["password1"]) )
	{
		// requete : username existe ?
		$pdostat = $bdd->prepare("SELECT pseudo, password1 FROM membres WHERE pseudo = [langue]seudo");
		$pdostat->bindvalue(':pseudo',$_POST['pseudo'],PDO::PARAM_STR);
		$pdostat->execute();
		if( $pdostat->rowCount()>0 ) // username OK
		{
			$row = $pdostat->fetch();
			// on compare le mot de passe entré avec celui enregistré en bdd
			if( password_verify($_POST['password1'], $row['password1']) ) // pwd OK
			{
				// Mise en SESSION
				$_SESSION['id'] = true;
				$_SESSION['pseudo'] = $POST['pseudo'];
				// ATTENTION ! ON NE MET JAMAIS LE MOT DE PASSE EN SESSION !!
				// on redirige vers l'espace membre
				header('Location:page_test.html');
				exit();
			} else{
				$err_connexion = 'Identifiant et/ou mot de passe incorrect.';
			}
		} 
	} 
	}

?>
Bonjour,

Louis_9876 a écrit :
La position fixed ne marche pas sur safari tel que :
background: url(exemple) no-repeat fixed;
        background-size: 200%;
        background-position: center top;

J'aimerais que le background prenne la largeur de la div, mais pas la hauteur.
Background-size cover marche sur la version grand écran de mon site iconic-i-clash.com, mais zoom énormément sur la tête du model sur la version mobile.

Je n'arrive pas à reproduire ce que tu décris.

Louis_9876 a écrit :
Je sais que position: fixed; marche très bien sur safari mais quand je le met, dans #banniere_image, les 2 divs se mettent en position sticky en dessous des autres élément de la page.

Pareil que le point précédent : je n'arrive pas à reproduire ce que tu décris.

Tu as changé quelque chose ?

Amicalement,
Bonjour,

S'il s'agit de https://iconic-i-clash.com/ tu as 2 (au moins) problèmes :

1) Par défaut, la balise <body> peut avoir un margin et un padding (ça dépend des navigateurs éventuellement). Il faut mettre margin:0 et padding:0 sur la balise body.

2) Ton <h1> contient
<h1><strong>Nous&nbsp;sommes&nbsp;des&nbsp;GEEKS&nbsp;!</strong></h1>

Or il n'y a pas assez de place pour afficher cette chaine de caractères sur les écrans étroits, et les &nbsp; empêchent les retours à la ligne.

De plus, d'une manière générale, tu ne devrais pas utiliser &nbsp; pour empêcher un retour à la ligne. Tu devrais utiliser l'instruction css white-space:nowrap. Par exemple :
h1 { white-space:nowrap;}

Mais comme dit plus haut, c'est une mauvaise idée pour les écrans étroits.

En résumé, supprime les margin et padding sur le<body>, et retire les &nbsp; dans le <h1> et teste si c'est bien ça.

EDIT: tu as aussi un max-width:90% qui traine dans le style de #banniere_image (max-width est prioritaire sur width)

Amicalement,
Modifié par parsimonhi (27 Feb 2021 - 08:22)
1. Dans le fichier, code cette fonction :

function dd($x){
    echo '<pre>';
    print_r($x);
    echo '</pre>';
}

2. commente la ligne header("Location: page_test.html?");, et met pour le moment à la place :

//header("Location: page_test.html?");
echo '<h1>connected</h1>'; die;

Tant que ton souci n'est pas résolu, tu laisses ce bout de code. Par la même occasion, vire le "?" puisque tu n'envoies pas de querystring.

3. je ne sais pas sous quel environnement tu codes (Linux / Window / Mac) ? Là, où je veux en venir, c'est regarder les logs apache et/ou php.

4. Je n’ai pas fait attention, mais tu as une erreur (display_errors) :

ini_set('display_errors', 1); 
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL);


5. au-dessus du isset($_POST['connexmembre']), fait ceci (et dis moi ce que ça te retourne lorsque tu soumets le <form>):

dd($_POST);

6. peux-tu mettre sur le forum, le html du formulaire de connexion stp ?
7. Si tu fais un dd($insertion), ça donne quoi ? (juste en dessous de)

$insertion = $req->fetch();
dd($insertion);

8. peux-tu mettre sur le forum, le code de la fonction password_verify($password1, $insertion['password1']) stp ?

function  password_verify($password1, $password2){
.....
}


9. présente mieux ton code stp. Parce que là, c'est un peu n'importe nawak (accolade à la ligne, indentation anarchique, etc.) Si tu ne sais pas comment présenter ton code, je te convie à regarder la PSR1 et PSR2.
Modifié par niuxe (27 Feb 2021 - 00:24)
hello, mon script inscription est OK à présent. c'est le script de login qui ne fonctionne pas.
(c'est pour cela que j'ai créé un nouveau topic).
voici le contenu de config.php

<?php
$dbname= 'mondeideal';
$user = 'root';
$password = '';
$host = '127.0.0.1';
try {
    $bdd = new PDO('mysql:host='.$host .';dbname='.$dbname, $user, $password );
    $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $bdd->exec("SET CHARACTER SET utf8");
} catch (PDOException $e) {
    echo "<p>Erreur : " . $e->getMessage() . "</p>";
    exit();
}
?>


et voici le script d'authentification (login) qui ne donne rien. (rien ne se passe la page se rafraichit)

<?php
error_reporting(E_ALL);
ini_set("display-errors",1);
if( session_id()=='' )
{
session_start();
}
// connexion a la bdd
require_once 'config.php';
unset($_SESSION['islogged']);
unset($_SESSION['pseudo']);
// --------------
//Connexion
if(isset($_POST['connexmembre']) )
{
if (!empty($pseudo) && !empty($password1)) {
	$pseudo = $_POST['pseudo'];
    $password1 = $_POST['password1'];
 $req = $bdd->prepare('SELECT id FROM membres WHERE pseudo = ?');
        $req->execute(array($pseudo)); 
        $insertion = $req->fetch();
        if ($insertion && password_verify($password1, $insertion['password1'])) {
                        session_start();
                        $_SESSION['id'] = $insertion['id'];
                        $_SESSION['pseudo'] = $pseudo;
						 header("Location: page_test.html?");
                             }   
else {
                     echo '<div class="error-login">IDENTIFICATION KO !</div>';    
        }
}
}
?>
Salut,

Je programme depuis un mois en html et css avec openclassroom.
Ils font des cours clairs et simples. Leurs formations sont gratuites.

J'ai personnellement choisi de ne pas utiliser wordpress car je l'on est très restreint niveau graphisme, mis en page, c'est pourquoi je programme actuellement mon site.

Il faut que tu crées un responsive design pour tout les écrans. Tu as dû crée un model sur-mesure que pour ton écran et il faut que t'en crées qui s'adapte plus ou moins à la taille de la fénêtre en fonction de palier d'écran.

J'espère que je t'ai aidée. Je ne savais pas que l'on pouvait coder avec élémentor, juste qu'il y avait un système de glisser-déposer et tout et tout.

Les gens sont un peu gonflés de ne pas te répondre.
D'ailleurs j'ai aussi besoin d'aide svp : position fixed sur safari et supprimer marge blanche.
Modifié par Louis_9876 (26 Feb 2021 - 21:33)
Et l'eau,

Comment as tu installé ton linux ? à partir de windows depuis le store ? En partition de ton disque dur ?
Si tu l'as installé depuis le store de windows, il y a cet article : Windows 10 : installation d’un environnement LAMP avec WSL. Est ce que ça fonctionne ? J'en sais vraiment rien.

Pour ma machine principale, je suis en double boot windows et une SLED/SLES (Pourquoi Suse ? Parce que Yast entres autres). Mon windows me sert seulement pour 2 - 3 broutilles. Pour bosser, je passe sur ma distribution et je ne suis pas du tout brider (je souhaite avoir la toute dernière version d'une techno, c'est vraiment pas un problème).

Pour les autres machines, c'est soit Suse soit Debian.

Là, où je veux en venir est je t'invite à switcher sur GNU/Linux. Debian est un excellent choix et beaucoup mieux qu'Ubuntu/Mint/Elementary/pop/etc. !. Mais il faut connaître le sujet (système plus austère) pour exploiter/administrer pleinement cette distribution.
Modifié par niuxe (26 Feb 2021 - 20:54)
Bonjour,

Je travaille sur WordPress avec Elementor Pro. Je ne connais rien aux CSS, mais il semblerait que ce soit la solution à mon problème selon Elementor.

Ma situation :
- Je travaille à partir d'un écran 15"
- Les pages que je crée s'affichent comme je le souhaite sur tous mon écran 15", sur tablette et sur Smartphone, grâce à la fonctionnalité Responsive d'Elementor. Pourtant, dès que j'affiche mon site sur un écran 19 ou 21 pouces, cela devient problématique. Les écarts entre éléments ne sont plus respectés (même si je règle le positionnement avec du %, EM ou REM).

Elementor m'a répondu qu'il fallait se tourner du côté des CSS. Mais, comme je n'y connais rien, que je sais pas appliquer une feuille de style à une page ou un site sur WP et avec Elementor, je m'en remets à votre bienveillance !

Merci par avance pour vos lumières et votre aide !

Patrice
Bonjour,
La position fixed ne marche pas sur safari tel que :
background: url(exemple) no-repeat fixed;
        background-size: 200%;
        background-position: center top;

J'aimerais que le background prenne la largeur de la div, mais pas la hauteur.
Background-size cover marche sur la version grand écran de mon site iconic-i-clash.com, mais zoom énormément sur la tête du model sur la version mobile.
Je sais que position: fixed; marche très bien sur safari mais quand je le met, dans #banniere_image, les 2 divs se mettent en position sticky en dessous des autres élément de la page.
Voici mes codes css :
#banniere_image
{
    margin-top: 30px;
    height: 250px;
    background: url(/telecharger.php?fichier=foreach.jpg&dossier=1) fixed no-repeat;
    background-size: cover;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    -webkit-max-width: 90%;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}

Merci de votre aide !
Bonjour,
J'ai un petit problème de marge sur mon article version mobile.
En effet, je voudrais qu'il prenne toute la largeur de la page mais le #bloc_page{width: 90%} l'en empêche. J'ai mis à mon article un width: 100vw; pour qu'il prenne la largeur de la page mais il dépasse de la page et la marge gauche reste.
Impossible de le caler avec un right: 0; ou un left: 0;
Je ne sais pas qu'elle valeur mettre dans margin-left pour palier à ce problème.
Pour l'instant, il a ce code inutile : margin-left: calc((100% * 10%/9%) / -20%);
La largeur 100% est égale à 90% de la largeur réelle que je multiplie par 10/9 pour qu'il fasse la largeur réelle, le tout divisé par -20, ce qui donne une marge réelle de -5% normalement, mais le margin-left est comme inexistant.
Margin: 0; et Padding: 0; ne change rien.
Voulez-vous des codes ?
Merci de votre aide !
50 Dernières réponses