Attention ! Ne cliquez pas sur ce lien, c'est un piège à enfoirés du net !

Chez oim, forum libreChez oim, forum libre

 


Pages: 1 ... 10 11 12 [13] 14 15 16 ... 34   En bas

Auteur Sujet: Référencement Google - Aide SEO  (Lu 40585 fois)

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #179 le: mardi 19 juin 2018, 20:24 »
le: mardi 19 juin 2018, 20:24

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 :kd:. C'est correct, mais c'est pas au millimètre.
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #180 le: mercredi 20 juin 2018, 08:03 »
le: mercredi 20 juin 2018, 08:03

Un merveilleux cadeau m'attendait en me levant ce matin ton code.
Je vais pouvoir le déguster toute cette journée.
Enfin ! Du concret avec son application. Je n'ai jamais fait bon ménage avec la théorie.
C'est vrai que je ne maîtrise pas les % et em. J'obtenais toujours des résultats "surprenants" alors que je trouvais les pixels faciles d'emploi.
Ce sera le prochain objet de mes études. Il y a tellement de choses à assimiler et rien n'est évident quand on débute.
Un grand merci et en route pour l'expérimentation.
Excellente journée à toi.
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #181 le: mercredi 20 juin 2018, 08:52 »
le: mercredi 20 juin 2018, 08:52

Je me suis hâté d'expérimenter.
La page d'accueil sur ordi s'est améliorée puisqu'elle occupe tout l'écran.
Mais sur mon smartphone, ce n'est pas au point car si la section est bonne, le nav est trop resserré.
J'avais réussi à placer la section SOUS le nav en bidouillant sur le nombre de pixels mais tu me déconseilles les pixels.
Help !

http://www.testiphone.com/

Remarque : j'ai amélioré l'image d'en-tête qui était trop étirée et le footer trop petit sur page ordinateur.
Mais il reste à répercuter sur les mobiles.
Après, ce sera parfait, je pense.
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #182 le: mercredi 20 juin 2018, 10:24 »
le: mercredi 20 juin 2018, 10:24

Je déconseille, mais je n'interdis pas. Ceci dit, dans ce cas, le pixel n'est pas adapté.
Donne une largeur en em. 1em occupe la place d'un caractère, en hauteur et largeur. La valeur de l'em originel sur une page, si j'ose dire, est fixée par le navigateur (et les paramètres de l'utilisateur dans ses préférences de tailles de polices).

Le plus gros des soucis, c'est que je ne voulais pas toucher au HTML. Il n'y a que la feuille de style qui m'intéressait (hormis la classe .mobile qui était nécessaire. D'ailleurs tu peux utiliser cette classe où ça te chante, elle fait disparaitre des éléments sur portable).

C'est vrai que ton nav est trop petit coincé à gauche. Et c'est difficile de concilier le contenu avec le menu.
Les listes à puces sont gênantes, elles diminuent un peu plus la place disponible.
Une solution serait de lui faire prendre 100% de la largeur, mais il est très long et on risque de ne voir plus que lui.

Sinon, un JS qui permet de cacher ce menu et de le montrer quand on en a besoin serait pas trop mal. Il laisserait 100% de largeur à ton contenu et viendrait se superposer ou pas sur ce contenu quand on "dégaine" le menu.

Une recherche avec les termes menu responsive devrait t'aider.
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #183 le: mercredi 20 juin 2018, 10:45 »
le: mercredi 20 juin 2018, 10:45

Encore une chose.
Vu que tu as modifié l'image d'en-tête, tu devrais modifier le retrait haut de ton nav (margin-top).
A l'origin, c'est margin-top: 7.8em.
Dorénavant, ce serait mieux avec :
Code
margin-top: 9em;
Oui, je sais. j'ai mis un gros bordel en imbriquant l'header, le nav, ta section et ton footer, mais je n'avais pas le choix.
Chaque largeur ou hauteur modifiée entrainera des mouvements sur l'élément voisin...
Enfin bref, je t'ai donné un CSS relativement pourri. Si ça avait été ma page, je rasais tout et je reprenais le HTML aussi.

Encore un truc, j'ai édité mon post précédent pour te parler de l'em. Je ne sais pas si tu as lu.
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #184 le: mercredi 20 juin 2018, 11:06 »
le: mercredi 20 juin 2018, 11:06

J'ai essayé d'améliorer. Le résultat n'est pas trop mauvais sur mon smartphone surtout en mode landscape.
Cependant, peut mieux faire en tâtonnant un peu surtout en séparant un peu plus les liens (interlignes).
J'arrête là car j'ai mal la tête. Je vais couper un peu de haie en emmerdant le voisin avec le bruit de mon taille-haie.
J'ai encore un énorme boulot dans mes études (génial pour éviter la dépression en ruminant des souvenirs désagréables)


Pour l'em, je commence à comprendre.
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #185 le: mercredi 20 juin 2018, 11:22 »
le: mercredi 20 juin 2018, 11:22

Mais oui, l'em n'est pas si compliqué que ça.
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #186 le: mercredi 20 juin 2018, 14:40 »
le: mercredi 20 juin 2018, 14:40

J'améliore, j'améliore.
Le nav de la page principale est plus clair sur smartphone.
J'ai tenté une page secondaire :
https://beninfongbe.com/benin_presentation/le-benin-presentation.html
Plus besoin de nav (retour page principale en haut de la section)
Dis-moi si je peux continuer (Il y a des centaines de pages à refaire. C'est google qui va être content !)
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #187 le: mercredi 20 juin 2018, 15:09 »
le: mercredi 20 juin 2018, 15:09

Ah oui, effectivement c'est bien mieux !
J'ajouterais juste un tout petit décalage entre nav et section, il n'y en a plus en responsive.
Dans section, donc, en responsive :
Code
padding-left: 5px;


Au fait, pourquoi tes vidéos sont aussi petites ? 200 sur 150, ça fait shirt !
Ici, les vidéos sont affichées en 640 sur 360.

Je t'ai même mis les vidéos responsives. Elles s'adaptent toutes seules.

Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #188 le: mercredi 20 juin 2018, 15:31 »
le: mercredi 20 juin 2018, 15:31

C'est ça ?

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

Si oui, ça ne marche pas

C'est fait pour le padding.

OK. Je crois avoir compris. La modification c'est pour l'écran ordi.
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #189 le: mercredi 20 juin 2018, 19:33 »
le: mercredi 20 juin 2018, 19:33

Un petit détail qui me cause problème.
Sur le smartphone, l'image d'en-tête (header) me convient et s'adapte sans problème.
Mais sur l'ordi, est trop étirée.
Si j'essaie de réduire sa largeur et de la center, le nav et la section se baladent dans tous les sens.

Help !
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #190 le: mercredi 20 juin 2018, 20:02 »
le: mercredi 20 juin 2018, 20:02

Ce que tu peux déjà faire, c'est lui donner une taille maximum à ne jamais dépasser. Et là, tu peux utiliser le pixel.
Code
header img {
    max-width: 999px;
}
Bien sûr, tu adaptes cette largeur comme tu veux.

Pour les éléments qui se baladent de partout, c'est pour ça que j'avais placé le nav en position: absolute et que je l'avais décalé du haut pour qu'il n'empiète pas sur l'image avec margin-top: Xem et que le section était lui aussi décalé avec margin-left: Yem pour que nav ne lui marche pas dessus non plus.

Pourquoi t'as tout cassé mon trèèèèèèèèèèèèès joli code qui a demandé des semaines de conception et tests ? :(
 ^-^


OK. Je crois avoir compris. La modification c'est pour l'écran ordi.

Voilà, c'est ça à moitié. Les images et vidéos ne dépasseront jamais 100% de la largeur de l'écran, quelle que soit cette largeur.


EDIT
Ton section est trop large, sous certaines résolutions, il fout le camp tout en bas sous le nav. Place sa largeur à 1% de moins, 67%.


RE-EDIT
Ca, ça ne marchera jamais :
Code
img {
		max-width: 100%:
		height: auto;
c'est point virgule après le 100%, pas deux points !
Code
img {
		max-width: 100%;
		height: auto;
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #191 le: jeudi 21 juin 2018, 08:47 »
le: jeudi 21 juin 2018, 08:47

Marche pas.
 :'(
A la moindre modification, selon tes conseils, le nav et la section partent dans tous les sens.
A moins qu'un truc m'échappe.
Je te renvoie le code pour me dire où je dois modifier, svp.
Code
	body
				{
				background-color:orange;
				font-size: 1em;
				margin: 8px;
				}
	
			header
				{
				text-align: center;
				}
			
			header img
				{
				width: 100%;
				height: 200px;
				border: 0px solid black;
				float : left;
				}
					
			img
				{
				max-width: 100%;
				height: auto;
				text-align:center;	
				}			
					
			nav
				{
				display: inline-block;
				float: left;
				width:30%;
				background-color:#90EE90;
				font-size:.9em;
				}

			section
				{
				display: inline-block;
				margin-left: 15px;
				width:68%;
				text-align:justify;
				font-size:1.25em;
				padding-left: 5px;
				}
			
			footer
				{
				font-size: .9em;
				width: 67.4%;
				height:8em;
				padding-left: 10px;
				float: right;
				bottom:0;
				background-color:#87CEFA;
				}

			.mobile
				{
				display: initial;
				}

Pour les autres pages, ça marche, je continue les modifications.

(Les responsives, c'est vraiment de la cuisine.
Et je te rajoute un pixel là et je t'enlève 3 pixels ici.)
 :iw:
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #192 le: jeudi 21 juin 2018, 09:20 »
le: jeudi 21 juin 2018, 09:20

Pour que les "droits de l'homme" "rentrent" dans le portable, j'ai été obligé de modifier la section ainsi :
https://beninfongbe.com/benin_presentation/le-benin-droits-de-l-homme.html

Code
section {
		display: inline-block;
		margin-left: 1px;
		width:96%;
		text-align:justify;
		font-size:1em;
		}

au lieu de :
Code
section {
		display: inline-block;
		margin-left: 15px;
		width:96%;
		text-align:justify;
		font-size:1.25em;
		}

Est-ce que ma petite cuisine est bonne ?
Signaler au modérateur   IP archivée

alex

  • Administrateur
  • Moulin à paroles
  • ********
  • Hors ligne Hors ligne
  • Sexe: Homme
  • Messages: 23.065
  • Proprio officiel chez oim !
Référencement Google - Aide SEO
« Réponse #193 le: jeudi 21 juin 2018, 10:50 »
le: jeudi 21 juin 2018, 10:50

Arrange toi pour que je n'ai pas à dire deux fois les mêmes choses, s'il te plait, sinon après tu vas dire que je m'énerve.
Et c'est vrai que ça me fout en pétard de me répéter ! :il:

Bon, cette fois ci, on va rester zen, hein ? O:-) :jq:

Hier, je t'ai dit, pour ta page d'accueil :
Ton section est trop large, sous certaines résolutions, il fout le camp tout en bas sous le nav. Place sa largeur à 1% de moins, soit 67%.
Aujourd'hui, rien n'est fait et le problème existe toujours quand je teste ton site.


Pour les éléments qui bougent dans tous les sens comme de beaux diables dès qu'on modifie un truc, on va les clouer en trichant un peu.
On va placer un élément à droite de l'écran, sur la même ligne que l'image, qui fera un pixel de large et exactement la hauteur de  l'image. De cette façon, le nav ne pourra plus jouer à l'abruti en se plaçant à côté de l'image vu qu'il y aura déjà du monde.
Bien sûr, ce sera un élément invisible.
Crée une classe qu'on appellera blank :
Code
.blank {
	float: right;
	border: none;
	padding-right: 1px;
	padding-bottom: 200px;
}

En responsive, cette classe sera comme suit :
Code
.blank {
	padding-bottom: 8.1em;
}

Tu remarqueras que sur ordi ou portable, cette classe blank fait exactement la hauteur de l'image d'entête et c'est très important !
Si tu modifies la hauteur de cette image, il faudra impérativement adapter le padding-bottom de la classe blank pour qu'il soit strictement de la même hauteur aussi !


Ensuite, diminue la largeur de  l'image d'entête. Tant qu'elle fait 100%, notre élément ne pourra pas s'intercaler à côté. Donne lui 99.9% par exemple. Il doit y avoir au moins 1 pixel de disponible à droite !
Tant que tu modifies la largeur, tu n'as pas à modifier blank. Seule la hauteur intéresse blank !


Et pour finir, on va placer notre élément invisible à droite de l'image d'entête :
Code
<header>
    <a href="https://beninfongbe.com/" target="_self"><img src="roseau.jpg" ><span class="blank"></span></a>
</header>


Voilà, tu peux maintenant régler la largeur de cette image sans que les autres éléments ne cavalent de partout. Fais déjà ceci, on verra pour la suite (les droits de l'homme) ensuite. Un problème à la fois.
N'oublie pas ! Le padding-bottom de la classe blank doit toujours faire la hauteur de ton image ! En normal et en responsive !
Signaler au modérateur   IP archivée

Dan229

  • Invité
Référencement Google - Aide SEO
« Réponse #194 le: jeudi 21 juin 2018, 12:02 »
le: jeudi 21 juin 2018, 12:02

Je pense que tu ne dois pas t'énerver à cause d'un quiproquo car j'applique scrupuleusement tes instructions en relisant de nombreuses fois tes conseils.
J'avais bien mis à 67% sans observer de changement.
J'ai juste remis le compteur à 0 en t'envoyant le code pour que tu trouves une erreur éventuelle comme le : à la place du ;
N'oublie que je suis débutant en html que je commence seulement à maîtriser (j'écoute sans cesse OCR)
Alors ce que tu me dis en responsive et qui te paraît évident, la moitié pour moi est du chinois que je tente de comprendre parfois sans succès.

Je viens de faire ce que tu me dis = la présentation est parfaite sur ordi et sur portable.
Je réitère mon "tout petit problème" :
Sur portable, l'image du header (les roseaux) est d'une largeur parfaite.
Mais sur ordi, son étirement me gêne.
Je voudrais seulement qu'elle se place au centre avec une largeur équivalent à 1/3 de la page par exemple quand on est sur l'ordi sans que le nav et la section ne commencent à batifoler.

Alors ne t'énerve pas car je fais tout mon possible pour être bon élève avec ce que j'ingurgite actuellement.
Parfois, je suis sur le point d'abandonner tellement c'est compliqué.
J'en rêve souvent la nuit.

Je te renvoie le code modifié pour voir si j'ai bien suivi tes conseils :

Code
body
				{
				background-color:orange;
				font-size: 1em;
				margin: 8px;
				}
	
				header
				{
				text-align: center;
				}
			
				header img
				{
				width: 100%;
				height: 200px;
				border: 0px solid black;
				float : left;
				}
				
				.blank 
				{
				float: right;
				border: none;
				padding-right: 1px;
				padding-bottom: 200px;
				}

				.mobile
				{
				display: initial;
				}

				.blank {
				padding-bottom: 8.1em;
				}

				img 
				{
				max-width: 99.9%;
				height: auto;
				text-align:center;
				}			
								
				nav 
				{
				display: inline-block;
				float: left;
				width:30%;
				background-color:#90EE90;
				font-size:.9em;
				}

				section 
				{
				display: inline-block;
				margin-left: 15px;
				width:67%;
				text-align:justify;
				font-size:1.25em;
				padding-left: 5px;
				}
			
				footer
				{
				font-size: .9em;
				width: 67.4%;
				height:8em;
				padding-left: 10px;
				float: right;
				bottom:0;
				background-color:#87CEFA;
				}

				@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: 9em;
				left: 0;
				word-wrap: break-word;
				}
			
				section 
				{
				margin-left: 30%;
				}
				}

				div.big 
				{
				line-height: 0.9;
				}

..................................

<header>
    <a href="https://beninfongbe.com/" target="_self"><img src="roseau.jpg" ><span class="blank"></span></a>
</header>



Signaler au modérateur   IP archivée
Pages: 1 ... 10 11 12 [13] 14 15 16 ... 34   En haut
 

Page générée en 0.131 secondes avec 19 requêtes.