concevoir une page

Version imprimable

10/01/2006, 21h05
henri68

concevoir une page

bjr.
j'ai une question au sujet de l'affichage d'une page.
qd on conçoit une page, on la conçoit de façon à ce que tout le monde puisse la lire.. c'est à dire en taille de texte logiquement 11 ou 12..

mais le problème, qd on navigue soit avec firefox ou ie, dans le menu outils des navigateurs, affichage, il y a taille du texte.
si des internautes visualise la page en mettant taille de texte "plus grande"
et que vous avez conçu votre site normalement en la visualisant avec taille de texte normal, en plaçant, "taille de texte plus grande", il y a le texte soit qui chevauche le calque que l'on a placer sur la page, soit qui chevauche l'image que l'on a placé..

y a t'il une façon de faire, que les textes ne se chevauchent pas, ou ne chevauchent pas les images lorsque un internaute visualise le site en taille de texte plus grande?

je veut dire, lorsque l'on clique sur affichage "taille de texte plus grande" le texte ne change pas de grandeur..

:arrow: c'est comme sur ce forum, je clique sur affichage, taille de texte plus grande ou plus petite, le texte ne change pas de grandeur..
comment fait'on ceci?

merci
10/01/2006, 22h56
N3odyme

Mais il change de grandeur chez moi, ça marche :roll: (Win XP SP1, FireFox 1.0.7)

C'est un fonction native du navigateur, je ne pense pas qu'on puisse la desactiver. Et même si l'on pouvait, je pense qu'il ne faudrait pas, pour des raisons d'accessibilité pour les personnes mal-voyantes.

Si les internautes veulent foutre le bordel sur la page qu'ils regardent, libre à eux :D

Fais-leur un bô site lisible, et il n'auront aucunes raisons d'agrandir le texte...

@++
11/01/2006, 01h17
goran kajfes

Bonsoir.

J'ai exactement le même problème. Quand j'augmente la taille du texte avec mon navigateur, l'image contenu dans le bloc de droite passe carrément à gauche.

En gros le site a la structure suivante: 3 blocs: gauche, milieu et droite positionnés de façon relative grâce à "float:left;". Ils ont tous une largeur fixe en pixels et une hauteur: "height:100%".

Je n'y comprends plus rien.
J'avais entendu parler de la propriété max-width pour indiquer à firefox de ne pas dépasser une certaine largeur pour un bloc, mais cela ne fonctionne pas du tout.

IE quand à lui, limite l'extension des blocs, mais dans ce cas aussi des chevauchements apparaissent.

Bref je ne vois pas pourquoi le navigateur fait grossir des blocs qui ont une taille fixe. Il devrait faire grossir le texte jusqu'à ce qu'il occupe tout le bloc et voilà.

J'ai aussi utilisé "overflow:auto;" pour faire apparaître une barre latérale dans un bloc quand la taille du texte devient trop importante, là encore un chevauchement se produit.

Mon site est http://romanoblog.free.fr
11/01/2006, 01h42
goran kajfes

J'avais oublié de dire que j'ai également un conteneur avec un width fixe en px.

En fait j'ai partiellement résolu le problème en mettant "width:100%" dans le conteneur. Dans ce cas avec IE le texte grossit jusqu'aux limites du bloc, puis s'arrête -> pas de chauvauchement.
Par contre avec firefox, le problème persiste.

Mais bon cela pose également d'autre problèmes car avec un conteneur où width est défini en % il est impossible d'utiliser "margin-left: auto;" et "margin-right: auto;" pour centrer le contenu de la page.

Citation:

Envoyé par goran kajfes

Mais bon cela pose également d'autre problèmes car avec un conteneur où width est défini en % il est impossible d'utiliser "margin-left: auto;" et "margin-right: auto;" pour centrer le contenu de la page.

Ça fonctionne si la largeur est inférieur à 100%.

Exemple avec 80% :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>XHTML 1.0 Strict (ISO-8859-1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
        margin: 0;
        text-align: center;
}
 
#conteneur {
        position: relative;
        width: 80%;
        margin: 0 auto 0 auto;
        text-align: left;
        background: #ff0;
}
</style>
</head>
 
<body>
 
<div id="conteneur">
CONTENU DU SITE
</div>
 
</body>
</html>

Vérifié avec Firefox et Internet Explorer.

11/01/2006, 10h43
henri68

bjr.
c'est interressant..

dans mes pages, j'applique des calques..

ceci est un calque dans le css

Code:

#calque14 { background-image: url(index/yellowlightening.jpg); border: solid 1px #0000c0;position: relative; width: 80%; position: absolute; top: 388px; left: 16px; width: 134px; height: 734px; visibility: visible; }

je l'applique comment et ou le

Code:

80% :

merci
11/01/2006, 13h39
goran kajfes

Citation:

Envoyé par balu

Ça fonctionne si la largeur est inférieur à 100%.

Exemple avec 80%

Le problème initial reste posé: l'image ou le texte change de position avec firefox quand on grossit la taille des caractères.
11/01/2006, 14h13
balu

Ce que j'avais écrit était à cause de ce que tu avais dit (en gras) :

Citation:

Envoyé par goran kajfes

Mais bon cela pose également d'autre problèmes car avec un conteneur où width est défini en % il est impossible d'utiliser "margin-left: auto;" et "margin-right: auto;" pour centrer le contenu de la page.

Je voulais montrer qu'il était possible d'utiliser les marges automatiques avec une largeur en pourcentage. ;)
11/01/2006, 14h55
goran kajfes

J'ai résolu le problème.

En fait j'avais défini les tailles des width, margin et padding, border de façon aléatoire en em et en px, font-size ayant été fixé en em. Or 1 em correspond à la taille d'un "M". Donc quand je demandais au navigateur d'augmenter la taille de la police, les tailles de certains blocs augmentaient automatiquement car elle avaient été définies proportionnellement à la taille des caractères. Par conséquent il y avait un conflit entre les blocs dont la taille pouvait croître et les blocs avec une taille "rigide" en px, d'où le chevauchement observé.

Conclusion il faut tout mettre en px ou tout mettre en em, mais ne pas mélanger ces 2 unités (le conteneur mis à part).

Pour chipoter un peu, on peu s'apercevoir que firefox fait un peu déborder les textes des blocs si on lui demande d'augmenter fortement la taille de la police. Pour éviter cela, il suffit de rajouter la propriété: "overflow:auto;" ou "overflow:hidden;" dans tous les blocs contenant du texte. Avec "overflow:auto;", le navigateur choisit de créer une barre de défilement quand il estime qu'il en a besoin. Avec "overflow:hidden;", le navigateur va choisir de cacher la partie du texte qui va dépasser du cadre.

henri68: j'espère que ton problème venait de là.

Citation:

Envoyé par balu

Je voulais montrer que c'était possible d'utiliser les marges automatiques avec une largeur en pourcentage.

Tu as raison, j'avais écrit une bêtise.
11/01/2006, 15h02
SpaceFrog

mets une image pour chaque page ...
et encore sur certains navigateurs on peut doubler la tailles des images ...
11/01/2006, 15h18
SpaceFrog

sinon mettre un piège à loup sur le ctrl et le + ... :idea:
11/01/2006, 21h26
henri68

Citation:

Envoyé par goran kajfes

J'ai résolu le problème.

En fait j'avais défini les tailles des width, margin et padding, border de façon aléatoire en em et en px, font-size ayant été fixé en em. Or 1 em correspond à la taille d'un "M". Donc quand je demandais au navigateur d'augmenter la taille de la police, les tailles de certains blocs augmentaient automatiquement car elle avaient été définies proportionnellement à la taille des caractères. Par conséquent il y avait un conflit entre les blocs dont la taille pouvait croître et les blocs avec une taille "rigide" en px, d'où le chevauchement observé.

Conclusion il faut tout mettre en px ou tout mettre en em, mais ne pas mélanger ces 2 unités (le conteneur mis à part).

Pour chipoter un peu, on peu s'apercevoir que firefox fait un peu déborder les textes des blocs si on lui demande d'augmenter fortement la taille de la police. Pour éviter cela, il suffit de rajouter la propriété: "overflow:auto;" ou "overflow:hidden;" dans tous les blocs contenant du texte. Avec "overflow:auto;", le navigateur choisit de créer une barre de défilement quand il estime qu'il en a besoin. Avec "overflow:hidden;", le navigateur va choisir de cacher la partie du texte qui va dépasser du cadre.

henri68: j'espère que ton problème venait de là.

Citation:

Envoyé par balu

Je voulais montrer que c'était possible d'utiliser les marges automatiques avec une largeur en pourcentage.

Tu as raison, j'avais écrit une bêtise.

merci, oui en effet en plaçant le overflow:auto;, ça créé une barre de défilement..

mais bon, c'est pas tellement génial l'éstétique.. surtout si au mileir de page tu a une image et à côté du texte..

par contre j'ai trouvé une autre solution..

je conçois ma page avec une grille de mise en page.. à l'intérieur, je place des zones de textes qui vont reçvoir les textes, une autre zone de texte qui va reçevoir la barre de navigation ect.. si je place une zone qui reçoit du texte, à gauche de cette zonede texte je peut placer par exemple une image
et j'ai remarquer qu'avec la grille de mise en page et les zones de textes, qd on place la taille du texte la plus grande, le texte ne dépasse pas, mais c'est la zone qui s'agrandit en descendant..
et ce qui est bien, la zone de texte qui est en dessous de la première, descend avec, et l'image qui est endessous, descend également avec, donc, c'est qu'il n'y a pas de chevauchement..
12/01/2006, 13h14
goran kajfes

Les grilles de mises en page utilisent la mise en page par tableau. C'est un peu dommage d'en revenir là. Il n'y a plus de véritable séparation entre le contenu et la présentation. En plus cela rend dépendant de logiciels commerciaux alors que les éditeurs de textes peuvent très bien faire l'affaire quand on maîtrise les feuilles de style.

Sinon tu peux peut-être essayer de refaire ta mise en page en utilisant des positions relatives et des width en % pour tous les blocs.

Je testerai ça ce soir sur mon site.
13/01/2006, 11h37
henri68

Citation:

Envoyé par goran kajfes

J'ai résolu le problème.

En fait j'avais défini les tailles des width, margin et padding, border de façon aléatoire en em et en px, font-size ayant été fixé en em. Or 1 em correspond à la taille d'un "M". Donc quand je demandais au navigateur d'augmenter la taille de la police, les tailles de certains blocs augmentaient automatiquement car elle avaient été définies proportionnellement à la taille des caractères. Par conséquent il y avait un conflit entre les blocs dont la taille pouvait croître et les blocs avec une taille "rigide" en px, d'où le chevauchement observé.

Conclusion il faut tout mettre en px ou tout mettre en em, mais ne pas mélanger ces 2 unités (le conteneur mis à part).

Pour chipoter un peu, on peu s'apercevoir que firefox fait un peu déborder les textes des blocs si on lui demande d'augmenter fortement la taille de la police. Pour éviter cela, il suffit de rajouter la propriété: "overflow:auto;" ou "overflow:hidden;" dans tous les blocs contenant du texte. Avec "overflow:auto;", le navigateur choisit de créer une barre de défilement quand il estime qu'il en a besoin. Avec "overflow:hidden;", le navigateur va choisir de cacher la partie du texte qui va dépasser du cadre.

henri68: j'espère que ton problème venait de là.

Citation:

Envoyé par balu

Je voulais montrer que c'était possible d'utiliser les marges automatiques avec une largeur en pourcentage.

Tu as raison, j'avais écrit une bêtise.

j'ai réglé le problème..

en fait, la zone de texte s'élargit vers le bas si l'on clique sur affichage texte plus grand , c'est à dire que le cadre de couleur qui comprend le texte suis la grandeur en plaçant dans l'atribut heigt

Code:

heigt: auto;