Discussion :

[Aspic]

Bonjour,

Sur mon site http://www.tutoworld.com quand on zoome avec Ctrl + molette les textes dans les blocs sur la page d'accueil sortent complètement...

A quoi cela pourrait-il être dû ?

Voici le code CSS des blocs :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
#list
{
margin:0 auto;
width:730px;
}
 
#list .elem
{
background-image:url(../images/default/bloc_categ_bleu.png);
background-repeat:no-repeat;
width:320px;
height:110px;
display:block;
margin-bottom:20px;
padding:10px;	
}
 
#list .elem:hover
{
background-image:url(../images/default/bloc_categ_bleu_hover.png);
background-repeat:no-repeat;
}
 
 
#list .elem h2
{
font-size:1em;
font-weight:bold;
background:none;
padding:0;
margin:0 0 10px 0;
border:none;
width:70%;
height:25px;
float:left;
}
 
#list .elem .image_cat
{
width:64px;
height:64px;
float:left;
clear:both;
border:#000000 1px solid;
}
 
#list .elem .description_cat
{
float:right;
width:239px;
height:66px;
padding-left:10px;
padding-right:5px;
text-align:justify;
}
 
#list .elem .nb_tuto
{
width:28%;
height:25px;
float:right;
font-size:0.9em;
line-height:25px;
color:#000000;
font-weight:bold;
font-size:0.8em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:right;
padding-right:2%;
}
 
#list .elem a:hover
{
color:#000000;
}

[devyan]

Bonjour,

En changeant les tailles de polices en px ou pt au lieu de em cela devrait corriger le problème.

[Aspic]

Salut,

Ca ne marche pas

En plus c'est que le texte dans "#list .elem .description_cat" qui se décale et tout est en pixels dans ce bloc....

[Bisûnûrs]

Tu parles des textes dans les blocs bleus ? J'ai remarqué qu'il ne sortaient que lors d'un zoom- et non pas d'un zoom+. C'est un problème d'arrondi au niveau du calcul de la largeur de la boite. En effet, ta classe "description_cat" fait 239px de large, quand tu modifies le zoom et que ces 239px doivent être réduits, ça peut faire du 200.5px, arrondi au-dessus puisque les 1/2px ça n'existe pas. Ce qui fait que ton bloc devient trop grand pour se mettre à côté de l'image et se met donc en-dessous.
En mettant à ces blocs 238px au lieu de 239, le problème disparait (jusqu'à un certain zoom-). Pour être vraiment tranquille, tu pourrais les passer à 234px.

[Aspic]

Merci beaucoup c'est exactement ca
J'avoue ne pas y avoir pensé, bien joué