Problème de responsive

**Dan229** · 30/07/2023, 08h33

Bonjour,
Pas très doué en html, je tente d'adapter mon nouveau site sur les smartphones.
Je regarde des tutos sur internet mais c'est toujours la brasse coulée.
Pouvez-vous m'aider, s'il vous plaît ?
www.fongbebenin.com

**Dan229** · 30/07/2023, 08h36

Je vous donne mon codage CSS actuel :

Code HTML:

body {
  background-color: orange;
  font-size: 1em;
  margin: 8px;
}

header {
  text-align: center;
  height: 200px;
}

header img {

  height: 200px;
  border: 0;
}

.mobile {
  display: none;
}

@media (max-width: 480px) {
    p {
        font-size: 0.85em;
        line-height: 100%
    }
}

}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

nav {
  display: inline-block;
  width: 30%;
  background-color: #90EE90;
  font-size: 0.9em;
}

section {
  display: inline-block;
  width: 66%;
  text-align: justify;
  font-size: 1.25em;
  padding-left: 5px;
  margin-left: 15px;
}

footer {
  font-size: 0.9em;
  width: 67.4%;
  height: 8em;
  padding-left: 10px;
  float: right;
  bottom: 0;
  background-color: #87CEFA;
}

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

  body {
    margin: 0;
    padding: 0;
  }

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

  header {
    height: 8.1em;
  }

  header img {
    height: 8.1em;
  }

  nav {
    position: absolute;
    left: 0;
    word-wrap: break-word;
  }

  section {
    margin-left: 0;
  }

  div.big {
    line-height: 0.9;
  }

  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;
  }
  
  table thead {
    display: none;
  }
  
  table tr {
    display: flex;
    flex-wrap: wrap;
  }
  
  .richard {
    float: right;
  }
}

**Dan229** · 30/07/2023, 16h28

Je rajoute de la balise HTML comme on me l'a conseillé :

Code HTML:

 <meta name="keywords" content="fon, fongbe, Bénin, grammaire, audio, bible, vodoun, vocabulaire, éwé, aja, vezo, folklore béninois">
  <meta name="author" content="Gerard Poirot">
  <meta name="robots" content="index,follow">
  <meta http-equiv="Pragma" content="no-cache">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="google-site-verification" content="np3KmGMI4WlGoNuZnOpAdIBN03Cu4wkXmSzXy9eqdZk">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Fongbe</title>
  <style>
    table {
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>


	
	<body>
		<header>
  <a href="https://beninfongbe.com/" target="_self">
    <img src="village.jpg" alt="Image du village">
    <span class="blank"></span>
	<body style="background-color: orange;">
	
	
	
	
  <!-- Contenu de la page ici -->
</body>
  </a>
</header>




			
			<a name="haut" id="haut"></a>
			<div>
  <a id="cRetour" class="cInvisible" href="#haut"></a>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.onscroll = function(ev) {
      document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
    };
  });
</script>
</div>

				
			<nav class="menu">
				<h2>LE BENIN</h2>
				<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="benin_presentation/le-benin-presentation.html">Présentation</a> </h4>

**Dan229** · 01/08/2023, 13h21

Je me casse la tête sur ce problème. J'ai revu mon code source :

Code HTML:

<body>
<header>
<a href="https://beninfongbe.com/" target="_self">
<img src="village.jpg" alt="Image du village">
<span class="blank"></span>
<body style="background-color: orange;">




<!-- Contenu de la page ici -->
</body>
</a>
</header>

Il me semble qu'il y a une erreur. La voyez vous ? J'ai corrigé mais quand je lance mon site après avoir fait filezilla, elle réapparaît toujours même en vidant le cache.

A voir en vidéo sur Futura · Aujourd'hui

**Ikhar84** · 01/08/2023, 15h31

Attends cette semaine, ce week end au plus tard (pas de promesse ferme, hein ?) je jettes un oeil et te propose des trucs pour comprendre et apprendre (je penses aux flexbox notamment, et éventuellement à Bootstrap)...

En jettant un oeil à ton code, on voit que les balises html sont mal imbriquées.

Tu dois inclure des élements les uns dans les autres (principe du DOM) et non "alterner" les balises...

**Ikhar84** · 01/08/2023, 15h39

Trop tard pour éditer...

Regardes ce qu'est un squelette HTML 5, et les balises sémantiques :
- header
- main
- footer

Code HTML:

<body style="background-color: orange;">

     <!-- Contenu de la page ici -->

    <header>
        <a href="https://beninfongbe.com/" target="_self">
            <img src="village.jpg" alt="Image du village">
            <span class="blank"></span>
        </a>
    </header>
   
</body>

**Dan229** · 01/08/2023, 16h54

Exact ! Les balises sont mal imbriquées.
J'avais corrigé, transféré, vidé le cache.
Le problème est que ça n'est pas corrigé sur mon site quand je le visualise.

De même pour les responsives que j'ai travaillées longuement. Pas de répercussion sur mon site.

**Ikhar84** · 01/08/2023, 17h12

Si tu as bien corrigé et transféré les fichiers au bon endroit, essaies avec un autre navigateur que celui déjà testé.

Ça eliminera toutes les hypothèses de cache, hors cache serveur, mais vu que tu ne fais que du html nu, peu probable...

**Dan229** · 01/08/2023, 17h29

J'ai essayé d'autres navigateurs même en fenêtre privée. Rien.
C'est quoi du html nu ?
Je crée aussi des CSS.

**Ikhar84** · 01/08/2023, 21h36

Je veux dire que tu n'utilises pas de langage de programmation côté serveur qui génère du HTML, ou un CMS comme Wordpress. Le serveur peut se contenter d'envoyer directement tes fichiers, pas besoin de mettre en oeuvre des mécanismes compliqués côté serveur.

Supprimes tes fichiers sur le serveur, attends quelques minutes (1/2 heure, lances ton site avec tol navigateur, tu devrais avoir une page d'erreur (comme avant), remets proprement la nouvelle version de tes fichiers, attends encore un peu et relances ton navigateur.

Mets ici ton fichier index.html au complet, si tu le souhaites, entre les balises [ html ]...

**Dan229** · 07/08/2023, 09h20

Enfin ! J'ai résolu le problème après des jours de galère. On peut enfin voir mon site sur ordi.

Problème de responsive

Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Re : Problème de responsive

Discussions similaires

Problème de santé qui peut donner un problème de rate et globules blanc élevé...

rendre iframe responsive