Font-size qui ne bouge pas

philippef -
philippef - 30 août 2016 à 17:44

Bonjour,
Je suis entrain de refaire un site pour qu'il soit lisible sur pc, tablette et smartphone.
donc qu'il soit responsive design.
Presque tout fonctionne correctement selon les tailles que j'affiche. La taille des images varie, ainsi que les div. Par contre la taille des lettres cad les font-size restent les mêmes.
ma page index


<!DOCTYPE HTML>
<html>
<head>
<title>Association pour l'Animation Culturelle de Troissy~Bouquigny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Association culturelle, Culture, Histoire, Troissy, Bouquigny, Champagne"/>
<meta name="keywords" content="Association, Culturel, Histoire, Crypte, Brocante, Champagne, Troissy, Bouquigny, Dormans, 51, 51700 "/>
<meta name="Robots" content="index, follow, all"/>
<meta name="Revisit-after" content="5 days"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

<div id="bandeau">
 <img src="images/logo_association.jpg" alt="" id="imgbandeau" />
 <img src="images/crypte.jpg" alt=""  id="imgbandeau1" />
 <img src="images/bandeau.jpg" alt="" id="imgbandeau2" />
 <span class="span-bandeau"> Jean-Pierre déconnexion </span>
</div>
<div id="filariane">
  <span class="span-ariane">Vous êtes ici </span><img src="images/ariane.jpg" alt="" class="span-ariane-img" /> 
  <?php 
  if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
   switch($page){
    case 'accueil': echo("Accueil");break;
  } 
  ?>
</div>
<div id="mainpage">
 <div id="menu"><br />
  <nav>
  <ul>
   <li><a href="index.php?page=accueil" rel="nofollow" target="_blank">Accueil</a></li>
   <li><a href="index.php?page=association" rel="nofollow" target="_blank">L'Association</a></li>
   <li class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li>
   <ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=histoire" rel="nofollow" target="_blank" class="couleur">L'Histoire de Troissy</a></li>
    <li><a href="index.php?page=photos" rel="nofollow" target="_blank" class="couleur">Cartes anciennes</a></li>
    <li><a href="index.php?page=eglise" rel="nofollow" target="_blank" class="couleur">Église St-Martin</a></li>
    <li><a href="index.php?page=crypte" rel="nofollow" target="_blank" class="couleur">La Crypte</a></li>
    <li><a href="index.php?page=temple" rel="nofollow" target="_blank" class="couleur">Le Temple</a></li>
    <li><a href="index.php?page=abbaye" rel="nofollow" target="_blank" class="couleur">Abbaye de l'Amour-Dieu</a></li><br />
   </ul>
    <li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu5'));">Évènements récents</span></li>
   <ul class="sousmenu" id="sousmenu5" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=brocante_2016" rel="nofollow" target="_blank" class="couleur">2016 : brocante</a></li>
    <li><a href="index.php?page=chorales_2016" rel="nofollow" target="_blank" class="couleur">2016 : chorales</a></li>
    <li><a href="index.php?page=patrimoine_2015" rel="nofollow" target="_blank" class="couleur">2015 : journées du patrimoine</a></li>
    <li><a href="index.php?page=brocantes_2015" rel="nofollow" target="_blank" class="couleur">2015 : brocantes</a></li>
    <li><a href="index.php?page=conference_2014" rel="nofollow" target="_blank" class="couleur">2014 : conférence climat</a></li><br />
   </ul>
       <li><a href="index.php?page=visites" rel="nofollow" target="_blank" style="color:yellow">Visites</a></li>
      <!---<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu6'));">Archives</span></li>
   <ul class="sousmenu" id="sousmenu6" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=2012" rel="nofollow" target="_blank" class="couleur">Évènements 2012</a></li>
    <li><a href="index.php?page=2011" rel="nofollow" target="_blank" class="couleur">Évènements 2011</a></li>
    <li><a href="index.php?page=2010" rel="nofollow" target="_blank" class="couleur">Évènements 2010</a></li>
   </ul>---!>
    <li><a href="index.php?page=contacts" rel="nofollow" target="_blank">Nous contacter</a> </li>
    <li><a href="index.php?page=devenir_membre" rel="nofollow" target="_blank">Devenir membre</a></li>
       <li><a href="index.php?page=ailleurs" rel="nofollow" target="_blank">Ailleurs dans la région</a></li>
   </ul>
  </ul>
  </nav>
 </div>
 <div id="contenu" class="clearfix">
  <?php 
  switch($page){
   case 'accueil': include ('accueil.php');break;
   case 'association': include ('association.php');break;
  }
  ?>
 </div>
</div>
<div id="pied_page"><br />se connecter | Plan du site | Mentions légales
</div>
</body>
</html>

ma feuille de style


a{text-decoration:none;color:yellow;}
.blue:hover{color:blue; }
.blue{color:blue;}

html, body {
    height: 100%;
 font-size : 0.9em;
    background-color: #FFF;
    border: 0;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

#bandeau {
 overflow : auto;
 background-color : #A52A2A;
}
/* LE BANDEAU */
#imgbandeau {
 width : 10%; 
 margin-left : 0.8em;
 float : left;
}
#imgbandeau1 {
 width : 14.2%; 
 margin-left : 0.8em;
 float : left;
}
#imgbandeau2 {
 width : 40%; 
 margin-left : 0.8em;
 margin-top : 1%;
 float : left;
}
/*  LE FIL D'ARIANE */
#filariane {
 height : 1.3em;
 color : #FFFFFF;
 background-color : #8E514D;
}
.span-ariane {
 margin-left : 15.5%;
}
.span-ariane-img {
 margin-left : 0.5em;
} 
/*  MENU ET CONTENEUR */
#mainpage {
 display:flex;
 flex-direction:row;
 min-height : 43.2em;

}
/*    MENU   */
#menu {
 width : 15%;
 padding : 0;
 background-color:#A52A2A;
}
ul { padding:0em; margin-left:1.1em; font-family:verdana; list-style-type:none;}
li { padding-bottom:1.2em;}
li a:hover{text-decoration:underline;color:yellow}

ul.menu, ul.sousmenu { list-style-type:none;margin:0em;padding:0em;}
ul.menu li.titre { margin-bottom:0em; }
ul.sousmenu li { margin-left:0.9em; padding-bottom:0em;}
.menuli { cursor:pointer;color:yellow;}
.menuli:hover { text-decoration:underline;}
.couleur {color:#FFF;}

#ul_liste {
 text-align:center;

}

#ul_liste li { /* liste */
 list-style-type:none; 
 list-style-position:inside;
 display:inline-block;
 padding:5px;
 text-align:center;
 vertical-align:top;

}

#contenu {
 width : 85%; /*68%;*/ /*68em;*/
 min-height:90em;
 background-color:#FFF;
 font-family : verdana;
}
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }

/*    PIED DE PAGE   */
div#pied_page {
 clear : both;
 width :100%;
 height : 3.8em;
 background-color : #A52A2A;
 text-align : center;
 font-family : verdana;

 color : #FFF;
}
/*--------*/
img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
 height: auto;
       _width: 100%; /* IE6 seulement */
}

/* à supprimer */
.span-bandeau {
 color : #FFFF00; /*jaune*/
 margin-left : 10%; /*15em;*/
 }

Merci d'avance de votre aide

Afficher la suite

A voir également:

Font-size qui ne bouge pas
Image en 3d qui bouge - Télécharger - Thèmes & Fonds d'écran
System font size changer - Télécharger - Personnalisation
Mon curseur ne bouge plus pc portable - Guide
552 size limit exceeded ✓ - Forum Mail
Three size - Télécharger - Gestion de fichiers

1 réponse

Réponse 1 / 1
totodunet Messages postés 1513 Statut Membre 201

salut,

dans ton css la taille des lettres restent fixes à 0.9em (14px)

je suis surpris de ne pas voir l'utilisation de media queries - tu utilises des % pour les tailles de tes conteneurs ce qui fait "l'effet responsive" car il s'agit de tailles sur un rapport de résolution de l'écran. Mais pour le texte, la taille en % ne marche pas.

https://www.alsacreations.com/article/lire/930-css3-media-queries.html
0
1. philippef
  
  Merci pour la réponse.
  J'ai lu un tuto sur responsive design et sur celui tue tu indiques. Tout cela m'a l'air bien compliqué et je crois que je vais continuer sans me préoccuper des petites tablettes et des smartphones.
  
  0
2. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  Bonjour
  déjà tu dois mettre le font-size dans html et body en % (entre 90 et 100%)
  ensuite que ce soit em ou rem le font size s'exprime en fonction des options du navigateur (préférence de taille du texte de l'utilisateur) et pas de la taille d'écran.
  donc si tu veux varier le font size suivant la taille d'ecran tu devras utiliser les media querie par exemple sur le font-size de html et body en augmentant le % (ex 120%) pour les mobiles.
  
  0
3. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  Salut voici la solution
  
  body html { font-size:100%;} @media screen and (max-width: 500px) { body html { font-size:150%;} }
  
  tu peux aussi utiliser rem au lieu de em c'est plus simple (pas de cascade de taille dans les div imbriquées)
  
  0
4. philippef > animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention
  
  Merci
  C'est bien sympa de continuer cette discussion.
  Avec de l'aide je veux bien essayer de continuer. Je ne suis pas tout jeune et j'avoue qu'à certains moments je désespère un peu car la technologie va vite !!
  Donc encore merci et je vais reprendre tout ça.
  
  0
5. philippef
  
  Je reprends la discussion.
  Avant de faire varier le font-size je voudrais déjà que le site occupe toute la largeur de l'écran pour les smartphones.
  voici ce que j'ai
  
  html, body {
  height: 100%;
  font-size : 90%;
  background-color: #FFF;
  border: 0;
  margin: 0;
  min-height: 100%;
  padding: 0;
  }
  @media screen and (max-width: 500px) {
  body {
  font-size:150%;
  }
  }
  #global {
  width : 80%;
  margin-left : auto;
  margin-right : auto;
  }
  
  Voici la structre de la page index
  
  <body>
  <div id="global">
  <div id="bandeau">
  </div>
  <div id="filariane">
  </div>
  <div id="mainpage">
  <div id="menu">
  </div>
  <div id="contenu" class="clearfix">
  </div>
  </div>
  <div id="pied_page">
  </div>
  </div>
  </body>
  </html>
  
  Merci de votre aide
  
  0

Font-size qui ne bouge pas

1 réponse

Discussions similaires

Newsletters