Responsive qui ne marche pas

Sujet résolu

15 décembre 2021 à 5:43:42

Bonjour! Je suis jeune et je suis en train d'apprendre le php, donc pour m'entraîner j'ai fait un petit site du coup pour le tester sur téléphone

je teste le media responsive. Sur firefox quand on simule un téléphone il marhce très bien mais sur un vrai téléphone il affiche la version pc. Je vous mets donc mon code html (je n'ai pas affiché le code php ni js):

<!DOCTYPE html>




<html>
<div class="conteneur">
<header>
	<link rel="stylesheet" href="style acceuil.css">
    <meta name="viewport" content="with-device-width, initial-scale=1">
	<title>Acceuil</title>
	<h1>Edwina</h1>
	<a href="deconnexion.php" id="affichageSession"><?php echo $_SESSION['nom']; ?></a>
	<a href="deconnexion.php" id="deconnexion">Se Deconnecter</a>
</header>

<body>



<form name="form"  method="post" action="">



<div class="produits"><h2>Figurine HP 25€</h2><img src="images/hp.jpg"> <input type="submit" value="Envoyer Demande" name="hpInput" id="hpInput" onclick="hp()"></div>

<div class="produits"><h2>Figurine Naruto 50€</h2><img src="images/naruto.jpg"> <input  type="submit" value="Envoyer Demande" name="narutoInput" id="narutoInput" onclick="naruto()"></div>
</form>

<a href="demandes.php" id="admin">Admin</a>
</div>
</body>

et voici le code CSS

@media (max-width: 700px) {
	html{width: 679px;}
	body{width: 679px;}
    .produits{ width: 80%; height: 50%;}ù
    input {width: 70%;}
    img{width: 10%; height: 10%;}
    form{width: 679px; height: 500px;}
    header{ text-align: center}
    #admin{display: none;}
    #deconnexion{display: none;}

}




html
{
	color: white;
	background: linear-gradient(240deg, blue, pink);
	font-family: Arial;
    height: 100%;
	width: 100%;
}

body{
	margin: 0;
    width: 100%;
}

header
{
	border: 1px solid;
	border-color: white;
	border-right: 0px;
	border-left: 0px;
	border-top: 0px;
	width: 100%;
}
h1
{
	margin-left: 2%;
	font-weight: bold;
	font-size: 280%;
	font-family: Trattatello, fantasy;
	font-style: italic;
	
}

#affichageSession
{
	text-decoration: underline;
	color: white;
}

#deconnexion 
{
	text-decoration: underline;
	color: white;
	left: 85%;
	position: absolute;
	top: 5%;
	font-style: oblique;
	font-size: 150%;
}

#deconnexion:hover
{
	text-decoration: underline;
}

.produits
{
margin: 2%;
color: black;
text-align: center;
background-color: white;
border-radius: 20px;
height: 30%;
width: 15%;

}
form
{
flex-wrap: wrap;
margin: 5;
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
position: absolute;
top: 20%;

}

img
{    width: relative;
	width: 60%;
	height: 60%;
	text-align: center;
}

input
{
	background: linear-gradient(240deg, blue, pink);
        border: 0px;

		color: white;
        font-family: Arial;
        font-size: 100%;

		border-radius: 20px;
		height: 15%;
		width: 60%;
}



input:hover{
		animation-name: hover;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}


@keyframes hover {
		from{
        font-size: 100%;
		}
		to{
		font-size: 110%;
		}
	}

#admin
{
	position: absolute;
    margin-top: 80%;
}

Merci d'avance pour l'aide.

-
Edité par YatoutIci 15 décembre 2021 à 5:44:15

AbcAbc6

15 décembre 2021 à 10:12:15

Bonjour, passez votre code au validateur pour voir et corriger vos erreurs. => https://validator.w3.org/

Aucune balise d'affichage dans le <head>, elle doivent ce trouver dans le body.

La balise <img> ne sort jamais sans sont attribut alt obligatoire.

Le fichier .css est lu de haut en bas. si vous indiquer une propriété pour un sélecteur donner dans la media queries puis que vous le redéfinissez par après c'est la dernière déclaration qui est prise en compte.

Placer la media queries en fin de fichier.

Lamecarlate

15 décembre 2021 à 10:26:29

Bonjour,

en sus de ce qu'indique mon camarade AbcAbc6, relis le cours et notamment ce petit point : 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#/id/r-1612619 Tu as une toute petite faute de frappe

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YatoutIci

15 décembre 2021 à 10:36:45

Mercii beaucoup je teste tout ça tout de suite.

EDIT: Malheureusement ça ne marche pas et le validateur me met une erreur

-
Edité par YatoutIci 15 décembre 2021 à 10:59:44

YatoutIci

18 décembre 2021 à 9:14:14

Lamecarlate

18 décembre 2021 à 9:22:40

Qu'est-ce que tu as changé, du coup ? Donne ton nouveau code.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YatoutIci

18 décembre 2021 à 9:59:01

oui excuse moi:




<!DOCTYPE html>




<html>
<div class="conteneur">
<header>
	
	<title>Acceuil</title>
	<h1>Edwina</h1>
	<a href="deconnexion.php" id="affichageSession"><?php echo $_SESSION['nom']; ?></a>
	<a href="deconnexion.php" id="deconnexion">Se Deconnecter</a>
</header>

<body>


<link rel="stylesheet" href="style acceuil.css">
 <meta name="viewport" content="width=device-width" />
<form name="form"  method="post" action="">



<div class="produits"><h2>Figurine HP 25€</h2><img src="images/hp.jpg" alt="Harry Potter avec sa baguette"> <input type="submit" value="Envoyer Demande" name="hpInput" id="hpInput" onclick="hp()"></div>

<div class="produits"><h2>Figurine Naruto 50€</h2><img src="images/naruto.jpg" alt="Naruto qui est debout"> <input  type="submit" value="Envoyer Demande" name="narutoInput" id="narutoInput" onclick="naruto()"></div>
</form>

<a href="demandes.php" id="admin">Admin</a>
</div>
</body>

	


</html>

et:




html
{
	color: white;
	background: linear-gradient(240deg, blue, pink);
	font-family: Arial;
    height: 100%;
	width: 100%;
}

body{
	margin: 0;
    width: 100%;
}

header
{
	border: 1px solid;
	border-color: white;
	border-right: 0px;
	border-left: 0px;
	border-top: 0px;
	width: 100%;
}
h1
{
	margin-left: 2%;
	font-weight: bold;
	font-size: 280%;
	font-family: Trattatello, fantasy;
	font-style: italic;
	
}

#affichageSession
{
	text-decoration: underline;
	color: white;
}

#deconnexion 
{
	text-decoration: underline;
	color: white;
	left: 85%;
	position: absolute;
	top: 5%;
	font-style: oblique;
	font-size: 150%;
}

#deconnexion:hover
{
	text-decoration: underline;
}

.produits
{
margin: 2%;
color: black;
text-align: center;
background-color: white;
border-radius: 20px;
height: 30%;
width: 15%;

}
form
{
flex-wrap: wrap;
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
position: absolute;
top: 20%;

}

img
{
	width: 60%;
	height: 60%;
	text-align: center;
}

input
{
	background: linear-gradient(240deg, blue, pink);
        border: 0px;

		color: white;
        font-family: Arial;
        font-size: 100%;

		border-radius: 20px;
		height: 15%;
		width: 60%;
}



input:hover{
		animation-name: hover;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}


@keyframes hover {
		from{
        font-size: 100%;
		}
		to{
		font-size: 110%;
		}
	}

#admin
{
	position: absolute;
    margin-top: 80%;
}

@media all and(max-device-width: 700px) {
	html{width: 679px;}
	body{width: 679px;}
    .produits{ width: 80%; height: 50%;}
    input {width: 70%;}
    img{width: 10%; height: 10%;}
    form{width: 679px; height: 500px;}
    header{ text-align: center}
    #admin{display: none;}
    #deconnexion{display: none;}

}

ChrisLebure

18 décembre 2021 à 11:21:53

Bonjour,

la structure du document HTML est complètement fautive !

il faut une partie <head></head> avant le <body>

si tu mets une section <header>, elle va dans le <body>

les balises link et meta se mettent dans le <head>, pas dans le <body>

pour le CSS : les width:100% ne servent à rien sur des éléments qui prennent toute la largeur disponible, à supprimer

#admin: trop lourd, utilise une classe

position absolute : délicat à utiliser, la plupart du temps inutile, de même que des hauteurs en pourcentage... pourcentage de quoi ?

-
Edité par ChrisLebure 18 décembre 2021 à 12:52:36

YatoutIci

18 décembre 2021 à 12:49:41

Merci beaucoup je teste ça et je vous tiens au courant

YatoutIci

23 décembre 2021 à 9:38:15

Re bonjour, alors déjà merci pour toutes vos réponses qui m'ont permis de mieux structurer mon code, mais malheureusement cela n'a pas reglé mon problème. J'ai donc essaye une autre technique qui a fonctionne:

au lieu de faire UN fichier css qui gère pc et mobile, j'ai utilsé une feuille de style pour chaque plateforme. Je les ai ensuite relié à mon code html avec des balises <meta>.

Ca donne donc:

<link rel="stylesheet" href="style acceuil.css">
<link rel="stylesheet" media="screen and (max-width: 679px)" href="petite_resolution.css" />

Merci encore d'avoir pris de votre temps pour m'aider et bonne journée. (Je passe ls sujet en résolu)