Imprimer

[Dan229]

Et mes tomates sont en fleurs malgré les intempéries de la semaine dernière.

[alex]

Des intempéries ? Ah !
Ca doit être un coup à Google parce qu'ici, rien à signaler.

[Dan229]

Pas comme dans ma région :
https://www.sudouest.fr/2018/05/30/landes-les-orages-sont-au-rendez-vous-5100967-3452.php

Ce jour-là, tous aux abris chez moi.
Je nourris une cinquantaine de moineaux chaque jour.
Il pleuvait tellement qu'ils se sont installés dans le garage et même quelques-uns au salon (j'ai une mezzanine assez haute avec poutres apparentes)

[alex]

Ah ben oui.

[Dan229]

Bonjour,

après un travail acharné à essayer de comprendre les media queries, j'ai réussi (avec encore quelques imperfections mineures) à mettre la page d'accueil sur mon smartphone.

http://www.testiphone.com/

Te dire que j'ai compris. Loin de là.
Mais je progresse, je progresse.
Heureusement que je suis têtu.
En attendant, un ibuprofène et je vais tondre la pelouse pour m'aérer.

PS. Je laisse ma page ainsi jusqu'à ta réponse pour revenir ensuite à ma page d'origine.
Car le code source est devenu un peu fouillis.
Je repartirai ensuite à l'attaque.

[alex]

Fais attention, utilise @media screen et pas @media seul, sinon ça va donner des résultats très étranges.
Par exemple, la personne qui imprimera ta page (@media print ou @media) imprimera en responsive...

@media screen s'adresse aux écrans.

Exemple :
@media screen and (min-width: 768px)

On s'adresse aux écrans d'une largeur minimum de 768 pixels.

Rien de bien sorcier.

[Dan229]

Rien de bien sorcier.

Pour toi, oui.
Mais pour moi, ça rajoute à ma galère.
Ce n'est pas encore gagné.

[alex]

Mais qu'est-ce qui te tracasse tant avec les media queries ?
Ou alors le problème est en amont. Tu ne comprends pas CSS ?

[Dan229]

Je comprends les CSS mais je ne comprends pas tous ces bidouillages merdiques pour adapter mon site à des portables tous différents les uns des autres.
C'est normal que je maîtrise mal le sujet comme tout nouveau sujet.
Il faut un temps d'adaptation pour que ça devienne ensuite clair et évident.

Quand je lis ce qui suit pour un site tout simple qu'on me donne en exemple, je me demande où l'auteur a bien se procurer sa règle à calcul pour faire des mesures au demi-pixel près selon les portables :

Code

@media (max-width: 700px){

    aside

    {

        top: 100%;

        left: 50%; /* On place la gauche de notre élément au mileu de la <section> */

!!!>>>>>> margin-left:-127.5px;  (sic !!!)/* Et on décale notre élément de la moitié de sa largeur vers la gauche */

    }

    

    article

    {

        margin-right: 0;

        margin-bottom: 470px;

        padding-bottom: 10px;

    }

}


@media (max-width: 600px){

    nav li

    {

        display: block;

        padding-bottom: 5px;

    }

        

    nav

    {

        text-align: left;

        position: static; /* La valeur par défaut */

        padding-bottom: 5px;

    }

    

    nav ul 

    {

        margin-top: 0;

        padding-left: 10px;

    }

}


@media (max-width: 480px){


    #tweet, #mes_photos, #mes_amis

    {

        width: 100%;

    }


}

[alex]

Je ne sais pas où tu as trouvé ça, mais si j'étais toi, j'irais chercher ailleurs. Tu n'es pas sur le bon site, tu vas y apprendre ce qu'il ne faut pas faire.
Rien que les 5 premières lignes sont aberrantes, c'est pas la peine d'aller plus loin.

@media seul, c'est une erreur. Enfin, non, ce n'est pas une véritable erreur mais plutôt une faute.
Quand on parle de taille d'écran, c'est @media screen

Après on a top: 100%
Là aussi, c'est n'importe quoi. On place un élément en dehors de la fenêtre. L'élément se placera 100% de la hauteur écran à partir du haut, ce qui veut dire qu'il se placera en bas, en dehors de l'écran.

Et ce que tu as relevé, ce 127.5px qui est aussi n'importe quoi. Un demi pixel, ça n'existe pas. Ce sera arrondi à 128px par la machine.
On peut rencontrer des décimales en CSS, mais pas avec le pixel.

Vas donc te promener sur le site w3schools.com, tu y trouveras des descriptions complètes, des exemples très intéressants et la possibilité de t'entrainer sur ces exemples en les modifiant.
Tu en oublieras vite que c'est en anglais.

Tu trouveras notamment ce qui suit.
La règle @media (la media querie) : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Exemples de media queries : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Fouille ce site, tu verras, il est très complet et très bien documenté. Je le considère comme un site de référence qu'on peut consulter les yeux fermés, si j'ose dire.


Sinon, ne te mets pas en tête qu'il faut une feuille de style par appareil.
Avec les portables, l'emmerdant, c'est la largeur de l'écran.
Il faut donc créer au minimum un style pour les écrans "normaux" et un autre pour les appareils mobiles avec les media queries. Par exemple, ici, chez oim, on considère que si l'écran a une largeur de moins de 768px, on a à faire à un mobile.

[Dan229]

Je ne sais pas où tu as trouvé ça, mais si j'étais toi, j'irais chercher ailleurs. Tu n'es pas sur le bon site, tu vas y apprendre ce qu'il ne faut pas faire.
Rien que les 5 premières lignes sont aberrantes, c'est pas la peine d'aller plus loin.

Hi hi hi !
Openclassroom figure-toi, la référence paraît-il !

@media seul, c'est une erreur. Enfin, non, ce n'est pas une véritable erreur mais plutôt une faute.
Quand on parle de taille d'écran, c'est @media screen

Après on a top: 100%
Là aussi, c'est n'importe quoi. On place un élément en dehors de la fenêtre. L'élément se placera 100% de la hauteur écran à partir du haut, ce qui veut dire qu'il se placera en bas, en dehors de l'écran.

Et ce que tu as relevé, ce 127.5px qui est aussi n'importe quoi. Un demi pixel, ça n'existe pas. Ce sera arrondi à 128px par la machine.
On peut rencontrer des décimales en CSS, mais pas avec le pixel.

Tu me rassures.

Vas donc te promener sur le site w3schools.com, tu y trouveras des descriptions complètes, des exemples très intéressants et la possibilité de t'entrainer sur ces exemples en les modifiant.
Tu en oublieras vite que c'est en anglais.
Je vais essayer mais je ne promets rien : une difficulté qui s'ajoute à une autre difficulté !!!
Tu trouveras notamment ce qui suit.
La règle @media : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Exemples de media queries : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Fouille ce site, tu verras, il est très complet et très bien documenté. Je le considère comme un site de référence.


Sinon, ne te mets pas en tête qu'il faut une feuille de style par appareil.
Avec les portables, l'emmerdant, c'est la largeur de l'écran.
Il faut donc créer au minimum un style pour les écrans "normaux" et un autre pour les appareils mobiles avec les media queries. Par exemple, ici, chez oim, on considère que si l'écran a une largeur de moins de 768px, on a à faire à un mobile.

Et comme je te l'ai déjà demandé, tu ne peux pas me donner un exemple juste avec ma page d'accueil que je connais bien ?
Ca me sera une catapulte pour les autres pages du site.


Ce qui me casse la tête c'est qu'il faut déplacer au pixel près les éléments de la page : nav, section, header, images, etc. pour qu'ils s'adaptent aux mobiles.

[alex]

Tu as eu ça sur OCR ?! Sur le forum ?
Et ça n'a fait sursauter personne ?!

Tu veux un exemple pour ta page d'accueil ? Désolé, je ne me souviens pas que tu l'ais demandé...
Je te ferai ça ce soir, à la fraiche, enfin quand la chaleur baissera.

[Dan229]

Tu as eu ça sur OCR ?! Sur le forum ?
Et ça n'a fait sursauter personne ?!

C'est ici :

https://openclassrooms.com/courses/adapter-son-site-au-format-mobile-avec-css3/tp-adapter-un-exemple-au-format-mobile

Le site zozor

Tu veux un exemple pour ta page d'accueil ? Désolé, je ne me souviens pas que tu l'ais demandé...
Je te ferai ça ce soir, à la fraiche, enfin quand la chaleur baissera.


Tu feras de moi le plus heureux des hommes. Ca me boostera dans mes études puisque j'expérimenterai sur mon propre site dans les pages suivantes.

[alex]

Ah oui d'accord, c'est les tutos écrits par les membres.
Et ben ! Ce truc a quand même 4 ans, peut-être qu'on faisait comme ça à l'époque ? J'en ai pas le souvenir...


Si tu es abonné à ce sujet, surveille tes mails ce soir. Je posterai ça ici.


En attendant, tu devrais installer le navigateur pour développeurs Opera Mobile Emulator : https://www.opera.com/fr/developer/mobile-emulator
Il est vieux, il n'est plus maintenu à jour, mais il dépanne bien.
Quand tu n'as pas 40 téléphones sous la main, ça peut être une aide assez appréciable.

[Dan229]

Merci.
J'ai installé.
Je surveille ta réponse ce soir.

[alex]

Tiens, voilà un début pour ton accueil.
Copie/colle jusqu'au bloc <header>........</header>, j'ai créé et ajouté une classe pour ce bloc.

Code

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="description" content="Etude approfondie d'une langue du Bénin, le fongbe ou fon avec l'éwé - Grammaire, linguistique, dictionnaire, audio, traductions, contes, proverbes, histoire, cuisine, vaudou">
	<meta name="keywords" content="fongbe, fon, bénin, benin, grammaire, vocabulaire, syntaxe, vodoun, vaudou, bible, contes, proverbes, éwé">
	<meta name="author" content="Gerard Poirot">
	<meta name="robots" content="index,follow">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="google-site-verification" content="np3KmGMI4WlGoNuZnOpAdIBN03Cu4wkXmSzXy9eqdZk">
	<title>Fongbe - Etude des langues fon et éwé du Bénin ainsi que les coutumes de ce pays africain</title>
<style>
	body {
		background-color:orange;
		font-size: 1em;
		margin: 8px;
}

	header {
		text-align: center;
	}

	header img {
		width: 40%;
		height: 200px;
		border: 0px solid black;
		float: left;
}

	img {
		max-width: 100%;
		height: auto;
}

	nav {
		display: inline-block;
		float: left;
		width:22%;
		background-color:#90EE90;
		font-size:.9em;
}

	section {
		display: inline-block;
		margin-left: 15px;
		width:76%;
		text-align:justify;
		font-size:1.25em;
}
	footer {
		font-size: .6em;
		width: 77.4%;
		height:3.5em;
		padding-left: 10px;
		float: right;
		background-color:#87CEFA;
}

	.mobile {
		display: initial;
}

	a#cRetour {
		border-radius:3px;
		padding:10px;
		font-size:15px;
		text-align:center;
		color:#fff;
		background:rgba(0, 0, 0, 0.25);
		position:fixed;
		right:20px;
		opacity:1;
		z-index:99999;
		transition:all ease-in 0.2s;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		text-decoration: none;
}

	a#cRetour:before {
		content: "\25b2";
}

	a#cRetour:hover {
		background:rgba(0, 0, 0, 1);
		transition:all ease-in 0.2s;
}

	a#cRetour.cInvisible {
		bottom:-35px;
		opacity:0;
		transition:all ease-in 0.5s;
}

	a#cRetour.cVisible {
		bottom:20px;
		opacity:1;
}

	@media screen and (max-width: 767px) {
		.mobile {
			display: none;
	}

		body {
			margin: 0;
			padding: 0;
		}

	img, video {
			max-width: 100%;
			height: auto;
	}

		header img {
			height: 8.1em;
}

		nav {
			position: absolute;
			margin-top: 7.8em;
			left: 0;
			word-wrap: break-word;
		}

		section {
			margin-left: 23%;
		}
}

</style>
</head>
	
	<body>

		<header>
			<a href="https://beninfongbe.com/" target="_self"><img src="./Fongbe_files/Ganvie2.jpg"><img class="mobile" src="./Fongbe_files/Ganvie2.jpg"></a>
		</header>

Sur tes pages, le gros problème est que tu utilises sans cesse position: relative/abolute et les pixels pour placer tes éléments. C'est une très mauvaise pratique ! Impossible de faire du responsive avec un élément positionné en pixels.
Si tu veux faire du responsive, il va falloir que tu maitrises les unités relatives, comme l'em ou le %.

Enfin, tu regarderas le bout de code que je te donne. Tu verras que le pixel est utilisé avec parcimonie et seulement quand il est nécessaire.
Je te préviens, c'est fait en 10 minutes, j'ai faim et je veux me laver, je pue . C'est correct, mais c'est pas au millimètre.