Probleme résolution et zoom

Bien le bonjour!
Donc j'ai passé ma soirée hier a codé une page et j'ai un petit soucis c'est que la page s'affiche correctement mais si on zoom tout les éléments bougent et se placent tres mal, aussi avec une autre résolution la partie global du site devient fort longue car c'est spécifié en em et pas en %, ca se passe ici:

div#conteneurGlobal
{
background-color: rgb(230,210,225);
margin-left: 10%;
margin-right: 10%;
height: 70em;
}

J'ai essayé de tout mettre en % pour que tout se place correctement avec les résolution mais la taille de cette height ne veut rien entendre! si je mets meme 70% alors c'est le bordel total et je ne comprends pas...

J'ai aussi une autre question relative à ca:
J'ai une grande résolution moi et j'ai fait mon image header par rapport à celle-ci.
ma question c'est Y a-t-il moyen de faire en sorte que l'image se redimentsionne (en mettant une valeur en % par ex, plutôt que de cacher une partie de l'image suivant les résolution?
Si c'est pas possible je pense que je devrais plutôt créer un header prévu à la base pour le 1024X768 non?
Merci
Modifié par Dazed (01 Nov 2009 - 23:44)

Bonsoir,

Dazed a écrit :
si on zoom

Quel type de zoom? Texte uniquement, zoom homothétique sur toute la page, zoom homothétique «adaptif» comme le propose Opera?

Dazed a écrit :
avec une autre résolution la partie global du site devient fort longue car c'est spécifié en em et pas en %

Ne pas spécifier de hauteur en pixels, en EM ou en pourcentages. Ne pas spécifier de hauteur tout court. Le height:auto (par défaut), c'est bon, mangez-en. La hauteur d'un conteneur, dans la quasi-totalité des cas, ce doit être la hauteur de son contenu.

Dazed a écrit :
Y a-t-il moyen de faire en sorte que l'image se redimentsionne (en mettant une valeur en % par ex, plutôt que de cacher une partie de l'image suivant les résolution?

Oui et non. Ce n'est pas possible avec des images de fond en CSS, uniquement pour des éléments IMG dans le code HTML. Du moment que tu as une image dans le code HTML, tu peux lui appliquer un width:100% par exemple. Problème: la capacité des navigateurs à rééchantilloner une image à la volée n'est pas très bonne, ça va de «pas terrible mais ça passe» à «catastrophique» suivant le navigateur (et sa version) et le type d'image.

Dazed a écrit :
créer un header prévu à la base pour le 1024X768 non?

Pourquoi pas. Par contre pour un contenu qui s'affiche sans barre de défilement sur un écran en 1024x768, mieux vaut viser une largeur maximale de 980px, pas de 1000px (un peu court) et certainement pas de 1024px.

Florent V. a écrit :
Bonsoir,
Quel type de zoom? Texte uniquement, zoom homothétique sur toute la page, zoom homothétique «adaptif» comme le propose Opera?

Je parlais du ctrl + sous firefox, je ne savais pas qu'il en existait d'autres

Florent V. a écrit :

Ne pas spécifier de hauteur en pixels, en EM ou en pourcentages.

Le problème est que cela fait partie du design d'avoir le div du contenu global(header menu etc) d'une autre couleur et traversant la page verticalement. aussi si j'enleve height alors tout les éléments se mettent n'importe comment et l'image du header n'apparait même plus.

Florent V. a écrit :

Pourquoi pas. Par contre pour un contenu qui s'affiche sans barre de défilement sur un écran en 1024x768, mieux vaut viser une largeur maximale de 980px, pas de 1000px (un peu court) et certainement pas de 1024px.

Oui je vais peut être prévoir mon site plutôt pour le 1024, sur les plus hautes résolutions ca reste lisible correctement, sauf si il est possible de détecter la résolution du visiteur et ainsi de choisir un css prévu pour? j'ai peur que ca fasse appel à des connaissances javascript que je n'ai pas?

ca me permettrait d'utiliser 2 styles: une pour les résolution a max 1024 et les autres de 1024 et plus
merci
Modifié par Dazed (02 Nov 2009 - 00:48)

Dazed a écrit :
Le problème est que cela fait partie du design d'avoir le div du contenu global(header menu etc) d'une autre couleur et traversant la page verticalement. aussi si j'enleve height alors tout les éléments se mettent n'importe comment et l'image du header n'apparait même plus.

Le problème est peut-être là, en fait. La page ne devrait pas avoir besoin d'un height pour s'afficher correctement.

Par contre, sans voir le code, on va avoir du mal à t'aider.

oui la voici:

html
{
font-size: 13px;
font-family: "Comic Sans MS", Corbel, arial, sans-serif;
background-color: rgb(155,120,150);
font-weight: bold;
}

html *
{
margin: 0em;
padding: 0em;
}

div#conteneurGlobal
{
background-color: rgb(230,210,225);
margin-left: 10%;
margin-right: 10%;
height: 70em;
}

div#header
{
background-image: url("../img/header.png");
background-position: center;
width: 100%;
height: 21%;
font-weight: normal;
}

div#header>p
{
float: right;
margin-top: 17%;
margin-right: 1.5%;
color: white;
}

div#corps
{
background-color: white;
overflow:auto;
float: left;
width: 78%;
height: 56%;
margin-top: 4%;
margin-left: 2%;
margin-right: 1%;
}

h1
{
background-image: url("../img/trous.png");
background-position: center;
background-repeat: no-repeat;
margin-top: 2%;
text-indent: 13%;
color: rgb(155,120,150);
font-size: 16px;
}

div#corps>p
{
margin-top: 2%;
margin-bottom: 2%;
margin-left: 2%;
margin-right: 2%;
text-align: justify;
font-size: 13px;
}

div#menu
{
background-image: url("../img/motifQuad.png");
float: right;
width: 15%;
height: 20%;
margin-top: 4%;
margin-right: 2%;
text-align: center;
padding-top: 1%;
}

Dazed a écrit :
Je parlais du ctrl + sous firefox

Le Ctrl+ correspond soit à un zoom homothétique de la page (par défaut sous Firefox 3+), soit à un agrandissement du texte (Firefox 2, Firefox 3+ en mode «zoom texte seulement»).

Dazed a écrit :
Le problème est que cela fait partie du design d'avoir le div du contenu global(header menu etc) d'une autre couleur et traversant la page verticalement. aussi si j'enleve height alors tout les éléments se mettent n'importe comment et l'image du header n'apparait même plus.

C'est effectivement là qu'est le problème. Tu ne devrais pas avoir de hauteur fixe. Deux choses à explorer:
- corriger le dépassement des flottants, et/ou un abus d'utilisation du positionnement absolu;
- si tu as besoin d'un conteneur global prenant au minimum 100% de la hauteur du viewport (zone de visualisation du navigateur), il faut regarder soit du côté d'une image de fond sur l'élément BODY, répétée en hauteur, soit du côté d'un min-height:100% sur un conteneur global.


Oui je vais peut être prévoir mon site plutôt pour le 1024, sur les plus hautes résolutions ca reste lisible correctement, sauf si il est possible de détecter la résolution du visiteur et ainsi de choisir un css prévu pour? j'ai peur que ca fasse appel à des connaissances javascript que je n'ai pas?

ca me permettrait d'utiliser 2 styles: une pour les résolution a max 1024 et les autres de 1024 et plus
merci

Je vote pour le dépassement des flottants, vu le code.

PS: du Comic Sans? Je crois que je vais boycotter ce sujet pour délit de mauvais gout.
Modifié par Florent V. (02 Nov 2009 - 13:17)

Florent V. a écrit :

Le Ctrl+ correspond soit à un zoom homothétique de la page (par défaut sous Firefox 3+), soit à un agrandissement du texte (Firefox 2, Firefox 3+ en mode «zoom texte seulement»).

Homothétique donc.

Florent V. a écrit :

- corriger le dépassement des flottants, et/ou un abus d'utilisation du positionnement absolu;

D'accord mais je ne vois pas ou est le problème avec les flottants, quelque chose qui est mal géré?

Florent V. a écrit :

- si tu as besoin d'un conteneur global prenant au minimum 100% de la hauteur du viewport (zone de visualisation du navigateur), il faut regarder soit du côté d'une image de fond sur l'élément BODY, répétée en hauteur, soit du côté d'un min-height:100% sur un conteneur global.

Je pourrais en effet mettre une image qui se répéterait verticalement sur tout l'écran, mais il faudra tout de même que je garde le height: 70em; pour que tout reste en place. J'ai essayé le min-height et ca bug pareil que sans height.

Florent V. a écrit :

PS: du Comic Sans? Je crois que je vais boycotter ce sujet pour délit de mauvais gout.

C'est pour donner un côté "écriture manuscrite" ça correspond aux besoins du site

"Help, I need somebody,
Help, not just anybody,
Help, you know I need someone, help."