une histoire de zone

Bonjour,

Le 22/12/2008 16:13, remy a écrit :

je suis en train de remanier du moins d'essayer de remanier mon site
page perso maintenant qu'il y a des écrans de toutes les tailles
mon affichage est actuellement déplorable

Il y a toujours eu des écrans de toutes les tailles -- et surtout des
fenêtres de toutes les tailles !

donc

je voudrais savoir s'il est possible de limiter l'affichage du texte à
une zone en l'occurrence l'image

Oui. Tu peux limiter l'affichage à la largeur d'une image dont tu
connais la dimension (en pixels), ou bien à la largeur de la fenêtre
si l'image s'étend sur toute la largeur. Mais je ne suis pas sûr de
bien comprendre la question.

en gros un background:url(img/fond.jpg) 0px ;0px; fixed no-repeat #fff;

Attention, tu as mis des points-virgules en trop. Par ailleurs, quoique
l'ordre soit libre, je trouve ça plus clair quand on suit l'ordre de la doc.

Donc :
background: #fff url("img/fond.jpg") no-repeat fixed 0 0;

ou plus simple
http://cjoint.com/data/mwq7ky5yJ7.htm

Euh... tu n'aurais pas un lien vers une page HTMl plutôt que vers un
fichier .zip ?

Olivier Miakinen a écrit :

Bonjour,

Le 22/12/2008 16:13, remy a écrit :

je suis en train de remanier du moins d'essayer de remanier mon site
page perso maintenant qu'il y a des écrans de toutes les tailles
mon affichage est actuellement déplorable

Il y a toujours eu des écrans de toutes les tailles -- et surtout des
fenêtres de toutes les tailles !

donc

je voudrais savoir s'il est possible de limiter l'affichage du texte à
une zone en l'occurrence l'image

Oui. Tu peux limiter l'affichage à la largeur d'une image dont tu
connais la dimension (en pixels), ou bien à la largeur de la fenêtre
si l'image s'étend sur toute la largeur. Mais je ne suis pas sûr de
bien comprendre la question.

en gros un background:url(img/fond.jpg) 0px ;0px; fixed no-repeat #fff;

Attention, tu as mis des points-virgules en trop. Par ailleurs, quoique
l'ordre soit libre, je trouve ça plus clair quand on suit l'ordre de la doc.

Donc :
background: #fff url("img/fond.jpg") no-repeat fixed 0 0;

ou plus simple
http://cjoint.com/data/mwq7ky5yJ7.htm

Euh... tu n'aurais pas un lien vers une page HTMl plutôt que vers un
fichier .zip ?

pas encore je suis en local pour l'instant
une solution qui m'est revenue en mémoire



.scroller {
height: 771px;
overflow:-moz-scrollbars-vertical;
overflow-x:scroll;
overflow-y:scroll;
}

.scroller1 {
height: 100px;
overflow:-moz-scrollbars-vertical;
background-color: #FFFFFF;
overflow-x:scroll;
overflow-y:scroll;
}

#content {
width: 100%;
background: transparent;
padding: 5px;
font-family:Georgia, Times New Roman;
font-size:15px;
color: #505050;
margin-left:20px;

}


en gros cela donbe
http://cjoint.com/data/mwseyf52Lh.htm

merci

Le Mon, 22 Dec 2008 16:50:32 +0100, Olivier Miakinen a écrit :

je suis en train de remanier du moins d'essayer de remanier mon site
page perso maintenant qu'il y a des écrans de toutes les tailles mon
affichage est actuellement déplorable

Il y a toujours eu des écrans de toutes les tailles -- et surtout des
fenêtres de toutes les tailles !

Exact ! Déjà ton image (celle de remy en fait) est trop haute pour ma
fenêtre sous FF (eh non, FF n'a pas droit à la hauteur totale de l'écran).

Et pire, je fais écrire assez gros sur mon écran (plus que tex 15px),
donc il y a trés peu de chance que tout le texte tienne sur l'image (à
moins que tu prévois un repeat y).
Mais on s'habitue à ce que le look de la plupart des sites ne ressemblent
plus à rien avec des tailles d'écriture lisibles. Après tout, seul le
contenu est important ;-)

Je suppose que la série de 0/1 qui fait des km de large, c'est juste pour
tester ?



--
mcc

mcc a écrit :

Le Mon, 22 Dec 2008 16:50:32 +0100, Olivier Miakinen a écrit :

je suis en train de remanier du moins d'essayer de remanier mon site
page perso maintenant qu'il y a des écrans de toutes les tailles mon
affichage est actuellement déplorable

Il y a toujours eu des écrans de toutes les tailles -- et surtout des
fenêtres de toutes les tailles !

Exact ! Déjà ton image (celle de remy en fait) est trop haute pour ma
fenêtre sous FF (eh non, FF n'a pas droit à la hauteur totale de l'écran).

Et pire, je fais écrire assez gros sur mon écran (plus que tex 15px),
donc il y a trés peu de chance que tout le texte tienne sur l'image (à
moins que tu prévois un repeat y).
Mais on s'habitue à ce que le look de la plupart des sites ne ressemblent
plus à rien avec des tailles d'écriture lisibles. Après tout, seul le
contenu est important ;-)

Je suppose que la série de 0/1 qui fait des km de large, c'est juste pour
tester ?

non non se sont bien des nombres premier
le meme en pas jolie

http://remyaumeunier.chez-alice.fr/premier.html

remy

Le 12/22/08 5:17 PM, remy a écrit :

Olivier Miakinen a écrit :

ou plus simple
http://cjoint.com/data/mwq7ky5yJ7.htm

Euh... tu n'aurais pas un lien vers une page HTMl plutôt que vers un
fichier .zip ?

pas encore je suis en local pour l'instant

Je ne vois pas le rapport avec le zip ...?
Puisque tu as l'image chez Alice :
http://remyaumeunier.chez-alice.fr/test.jpg

(snip)

en gros cela donbe
http://cjoint.com/data/mwseyf52Lh.htm

Argghh ! encore un zip !

Bon, je rajoute ma couche :
- j'ai un 20"
- mes brouteurs sont ouverts dans des fenêtres avoisinant le 15"
- mes brouteurs sont réglés pour afficher :
- times en 14px
- arial en 12 px
- rien en-dessous de 10px
- j'apprécie que les lignes de texte ne dépassent pas 650px de large
- à mon avis l'image de fond n'apporte rien à l'agrément du texte
(comme pour n'importe quelle image de fond ... !)
- si tout tient comme tu l'as réglé dans l'image
pas de blème pour moi : Fx.3 agrandit texte *et* image au zoom
- reste à avoir ce qu'en fait IE ...

Ma 1/2 a un pécé 17" et brouteur plein cadre et le nez au raz de la
dalle ! Mieux vaut lui prévoir du bien lisible (taille et contraste)

Alors un truc qui ne fonctionne pas avec IE :
<http://cjoint.com/?mwuB2raNeJ> mais OK FF.3 et Safari.3
et un truc compatible partout :
<http://cjoint.com/?mwuDNl4yiB>

Voilà.
--
sm

Le Mon, 22 Dec 2008 18:04:34 +0100, remy a écrit :

non non se sont bien des nombres premier le meme en pas jolie

http://remyaumeunier.chez-alice.fr/premier.html

remy

Eh ben, il est pas pire que le premier et bien mieux que le modèle avec
des scrollers horizontaux dans des scrollers verticaux dans une page
qu'il faut scroller... Là, t'en as fait un peu trop.

Deux détails, quel que soit ton choix final,
- mettre comme départ une font-size à 100% et pas en px
- diminuer encore l'opacité de l'image de fond, on a du mal à lire dessus

Es-tu allé voir du coté de sites comme
http://www.alsacreations.com/gabarits/liste.html
ou
http://blog.html.it/layoutgala/

tu y trouveras plein d'idées et de modèles de layout en fixe, fluide,
larges ou pas, 2 ou 3 colonnes, etc.
C'est peut-être bien ce que tu demandais dans le 1er message ?

--
mcc

mcc a écrit :

Le Mon, 22 Dec 2008 18:04:34 +0100, remy a écrit :

non non se sont bien des nombres premier le meme en pas jolie

http://remyaumeunier.chez-alice.fr/premier.html

remy

Eh ben, il est pas pire que le premier et bien mieux que le modèle avec
des scrollers horizontaux dans des scrollers verticaux dans une page
qu'il faut scroller... Là, t'en as fait un peu trop.

je fais ce que je peux

Deux détails, quel que soit ton choix final,
- mettre comme départ une font-size à 100% et pas en px
- diminuer encore l'opacité de l'image de fond, on a du mal à lire dessus

Es-tu allé voir du coté de sites comme
http://www.alsacreations.com/gabarits/liste.html
ou
http://blog.html.it/layoutgala/

tu y trouveras plein d'idées et de modèles de layout en fixe, fluide,
larges ou pas, 2 ou 3 colonnes, etc.
C'est peut-être bien ce que tu demandais dans le 1er message ?

SAM a écrit :

Le 12/22/08 5:17 PM, remy a écrit :

Olivier Miakinen a écrit :

ou plus simple
http://cjoint.com/data/mwq7ky5yJ7.htm

Euh... tu n'aurais pas un lien vers une page HTMl plutôt que vers un
fichier .zip ?

pas encore je suis en local pour l'instant

Je ne vois pas le rapport avec le zip ...?
Puisque tu as l'image chez Alice :
http://remyaumeunier.chez-alice.fr/test.jpg

(snip)

en gros cela donbe
http://cjoint.com/data/mwseyf52Lh.htm

Argghh ! encore un zip !

Bon, je rajoute ma couche :
- j'ai un 20"
- mes brouteurs sont ouverts dans des fenêtres avoisinant le 15"
- mes brouteurs sont réglés pour afficher :
- times en 14px
- arial en 12 px
- rien en-dessous de 10px
- j'apprécie que les lignes de texte ne dépassent pas 650px de large
- à mon avis l'image de fond n'apporte rien à l'agrément du texte
(comme pour n'importe quelle image de fond ... !)
- si tout tient comme tu l'as réglé dans l'image
pas de blème pour moi : Fx.3 agrandit texte *et* image au zoom
- reste à avoir ce qu'en fait IE ...

Ma 1/2 a un pécé 17" et brouteur plein cadre et le nez au raz de la
dalle ! Mieux vaut lui prévoir du bien lisible (taille et contraste)

Alors un truc qui ne fonctionne pas avec IE :
<http://cjoint.com/?mwuB2raNeJ> mais OK FF.3 et Safari.3
et un truc compatible partout :
<http://cjoint.com/?mwuDNl4yiB>

Voilà.

merci voila la dernier version


http://remyaumeunier.chez-alice.fr/index.html
remy

remy, le 23/12/2008 a écrit :

[...]

merci voila la dernier version


http://remyaumeunier.chez-alice.fr/index.html

Je n'aime pas trop l'idée d'une image de fond complexe, tout au plus
une vague trame, ou un petit logo unique, en très léger filigrane. Et
j'aime ça d'autant moins que ce qui est au-dessus de l'image est un
raisonnement mathématique ;-) Mais c'est vous qui voyez...

En revanche, votre image monte vers la droite. Surtout si la photo
contient la mer et des pilotis, la bulle doit être parfaite. Ou
carrément aux pâquerettes, mais c'est une autre affaire.

fond.jpg pèse plus de 350ko. Je ne sais pas dans l'absolu, mais c'est
de toute évidence pour les performances de votre hébergement. Quoi
qu'il en soit, vous pouvez immédiatement diviser par 10 sans différence
visible. Sans outil onéreux, disons avec Gimp, sauver en jpeg qualité
65 pour 37ko et le même résultat, qualité 30 pour une vingtaine de ko
et dégradation prtiquement invisible sous le texte et la transparence.
Il me semble d'ailleurs qu'il y a quelque chose à faire au niveau de
l'affaiblissement - estompage. Une fois la bulle corrigée, bien sûr ;-)

Enfin il me semble que ce serait plus efficace, plus simple et plus
joli (plus "portable" ?) de laisser tomber la transparence 50%, de
rendre donc le background de #content simplement transparent, et de
régler l'affaiblissement de l'image entièrement à la palette. A moins
que vous ne teniez à la bande verticale de chaque coté - ajoutée aux
divers ascenceurs - que la méthode actuelle fait apparaître. Mais
esthétiquement, ça m'échapperait.

--
Pierre Maurette

Pierre Maurette a écrit :

bonjour et bonne année

remy, le 23/12/2008 a écrit :

[...]

merci voila la dernier version


http://remyaumeunier.chez-alice.fr/index.html

Je n'aime pas trop l'idée d'une image de fond complexe, tout au plus une
vague trame, ou un petit logo unique, en très léger filigrane. Et j'aime
ça d'autant moins que ce qui est au-dessus de l'image est un
raisonnement mathématique ;-) Mais c'est vous qui voyez...

les raisonnements mathématiques il y en a plein la toile
je dirais même qu'il y a presque que ceux qui les font qui les lisent un
peu comme les msg bon bref la lecture n'est pas obligatoire

En revanche, votre image monte vers la droite. Surtout si la photo
contient la mer et des pilotis, la bulle doit être parfaite.

exact je n'avais jamais remarqué la photo a été faite par moi
je vais donc dire la mer été houleuse cela peut le faire comme excuse :-) ?

carrément aux pâquerettes, mais c'est une autre affaire.

fond.jpg pèse plus de 350ko. Je ne sais pas dans l'absolu, mais c'est de
toute évidence pour les performances de votre hébergement. Quoi qu'il en
soit, vous pouvez immédiatement diviser par 10 sans différence visible.

merci c'est fait

Sans outil onéreux, disons avec Gimp, sauver en jpeg qualité 65 pour
37ko et le même résultat, qualité 30 pour une vingtaine de ko et
dégradation prtiquement invisible sous le texte et la transparence. Il
me semble d'ailleurs qu'il y a quelque chose à faire au niveau de
l'affaiblissement - estompage. Une fois la bulle corrigée, bien sûr ;-)

Enfin il me semble que ce serait plus efficace, plus simple et plus joli
(plus "portable" ?) de laisser tomber la transparence 50%, de rendre
donc le background de #content simplement transparent, et de régler
l'affaiblissement de l'image entièrement à la palette. A moins que vous
ne teniez à la bande verticale de chaque coté - ajoutée aux divers
ascenceurs - que la méthode actuelle fait apparaître. Mais
esthétiquement, ça m'échapperait.

le problème s'est qu'en fonction des différents navigateurs ou os je
n'ai pas le même contraste disons que c'est un moyen d'avoir quelque
chose de presque lisible

remy


--
http://remyaumeunier.chez-alice.fr/