Sujet Précédent Sujet Suivant

Font-size qui ne bouge pas

Fermé
philippef - Modifié par philippef le 18/08/2016 à 13:44
 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
A voir également:

1 réponse

Réponse 1 / 1
totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 199
19 août 2016 à 11:17
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
philippef
19 août 2016 à 15:23
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
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
23 août 2016 à 17:19
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
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
23 août 2016 à 17:39
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
philippef > animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019
24 août 2016 à 09:06
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
philippef
30 août 2016 à 14:46
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

Discussions similaires

Score qui s’augmente pas
Lilouch -
Lilouch -

119 réponses
pirate+souris qui bouge tout seule
math -
mon ordi piraté -

18 réponses
la souris ne bouge plus sur mon pc portable
val -
Christine -

37 réponses
Msg d'erreur je dois envoyer par mail
toytoy -
toytoy -

3 réponses
Question au sujet du *Uma Frame Buffer Size*
test1111 -
marcmarais -

3 réponses