Discussion :

[Mister Paul]

Bonjour,

j'ai un petit souci avec la largeur d'un DIV…
J'aimerais que le <div id="content"> ait une largeur de 537px au lieu des 300px d'origine du template.

Si je modifie le style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#content {
	float: left;
	width: 537px;
}

je n'ai pas de souci apparemment sur les navigateurs.
Mais par contre sur smartphone (en tous cas sur l'iPhone) dès que je dépasse des 300px la taille des polices augmente aussi...

Je ne comprends pas du tout ce qui se passe...


Le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#wrapper {
	position: relative;
	width: 740px;
	margin: 0 auto;
	text-align: left;
}
#header {
	position: relative;
	height: 110px;
}
#menu {
	position: absolute;
	right: 190px;
	bottom: 10px;
}
#wrapper_content {
	float: left;
	width: 537px;
	background: #fff;
	padding-top: 10px;
}
#content {
	float: left;
	width: 300px;
}
#content-padding {
	padding: 10px;
}
#footer {
	text-align: left;
}
#logo img {
	display: block;
}
.space {
	height: 50px;
}
.clear {
	clear: both;
}

Et le html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
      <div id="wrapper_content">                      
          <div id="content">                        
           	<div id="content-padding">
            <!-- Début article en page intérieure -->         
			<h2 class="contentheading ">Le titre</h2>
				<div class="contentpaneopen ">
				<span class="introduction">Introduction</span><br /><span class="titre_paragraphe">Le titre du paragraphe</span><br />Du texte
				</div>
				<span class="article_separator"></span>
             </div>
           </div>                            
           <div class="clear"></div>
       </div><!-- end wrapper_content div -->
       <div class="clear"></div>

Votre aide serait la bienvenue.


Paul

[rodolphebrd]

Bonjour,

Avez-vous renseigné la meta viewport ?

[Mister Paul]

Oui j'ai mis

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="initial-scale=0.5">

Mais ça ne règle pas le problème…


Edit :
j'ai essayé depuis

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=yes" />

pas d'amélioration

[rodolphebrd]

et avec ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="initial-scale=1.0">

[Mister Paul]

Ça change juste le rapport de zoom (on est plus zoomé et les lettres sont plus grosses). Mais le problème est toujours là :
quand on met un width supérieur à 340px la typo s'agrandit…

[Mister Paul]

Pour illustrer :
#content avec un width jusqu'à 340px
#content avec un width supérieur ou égal à 341px

[rodolphebrd]

Avez-vous une page en ligne, car il me semble qu'il manque quelque chose.

[Invité]

Bonjour,
une page en ligne serait utile.
[Edit] Oups ! Hello rodolphebrd !

[Mister Paul]

une page en ligne serait utile.

Voilà une page de test avec la typo plus grande qu'elle devrait sur iPhone
(désolé pour la redirection de discrétion…)

Edit :
C'est bien la page que vous me demandiez ?

[Invité]

Ce que je peux en dire au premier coup d’œil :
Un site "responsive design" ne se construit pas avec des largeurs fixes (en pixels), ni des tailles de polices en pixels aussi.

On voit partout dans le CSS : font-size:11px;...

Il faudrait passer les largeur de <div> en %, et les font-size en % ou em.

Enfin... le lien fourni n'affiche pas une page adaptée aux smartphones (?)

Et en parlant de "coup d’œil" : il me faut prendre des jumelles pour lire les textes, tellement ils sont petits sur mon écran !)

[rodolphebrd]

jreaux62
Je viens de tester sur iphone en enlevant la taille de font et le line-heigth de 145%!!!

Ça fonctionne bien.

[Mister Paul]

Oui à tout ce que tu remarques-là jreaux62
Mais avant de faire ces modifs, j'aimerais comprendre ce qui provoque cette saute de taille de typo lors de l'augmentation du width du #content...
Je ne comprends pas.

[Invité]

...j'aimerais comprendre ce qui provoque cette saute de taille de typo lors de l'augmentation du width du #content...

Sans doute parce qu'une directive CSS modifie la valeur du font-size entre 300px et 500px.

Avec des <div> en %, la largeur s'adapte au viewport.
Toi, tu imposes une largeur.
La réponse doit se trouver dans les fichiers CSS (?).

Commence avec le conseil de rodolphebrd :
(dans template_css.css, ligne 9)

body, td, th, tr, p, div {
color: #333333;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 145%;
}

[Mister Paul]

:Je viens de tester sur iphone en enlevant la taille de font et le line-heigth de 145%!!!

Ça fonctionne bien.

Là je ne sais pas comment tu arrives à tester ça…

Hum... quels outils as-tu ?

[rodolphebrd]

Sur mac le simulator d'IPhone en natif.

Mais le problème n'est pas là.

[Invité]

Le <div> principal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#wrapper {
...
    width: 740px;
}

Le site a été créé au siècle dernier ?

[Mister Paul]

Sur mac le simulator d'IPhone en natif.

Tu peux enlever des lignes de CSS directement dans le simulateur ?

Mais le problème n'est pas là.

Oui je sais !

[Mister Paul]

Le site a été créé au siècle dernier ?

Oui exactement !

[Mister Paul]

Ah !...
- s'il y a un saut de ligne j'ai le problème
- sans saut de ligne, pas de problème de grossissement de typo…

[Invité]

Mais avant de faire ces modifs, ...

Ce n'est pas la peine de mettre des rustines sur une passoire.

Si tu veux faire du bon travail, efface l'ardoise et reprend sur une base saine.
1/ largeur en %
2/ font-size en % ou em (sachant que la plupart des font-size:11px; sont à supprimer purement et simplement du CSS)

Quelques modif. simples :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#wrapper {
    max-width: 980px; /* ADAPTABILITE jusque 980px */
    min-width: 740px; /* au cas où tu veux limiter aussi la largeur mini */
}
 
#wrapper_content {
    width: 75%;
}
#right { /* menu à droite */
    width: 25%;
}
#content {
    float: left; /* A SUPPRIMER */
    width: auto; /* A SUPPRIMER */
    margin:15px; /* AJOUTER pour aérer... */
}