Choix technique pour réaliser l'interface graphique

Salut tout le monde. Je dois faire un site dans un cadre scolaire mais pour un besoin réel. J'aimerais bien le faire en CSS comme l'un des sites que j'ai déjà réalisé mais il me semble difficile de répondre aux exigences du client concernant l'interface. En bref, l'interface est une imbriquation de 2 cadres (rectangles arrondis voir l'image). Si j'utilise une position absolu, lorsque je change de résolution les images ne sont plus centrés, le pire étant donné que 800*600 est le standard, lorsque je mets une résolution supérieure, le site apparait tout petit. Si je mets des images, je pense qu'il me sera impossible de faire évoluer la taille de l'interface.?..
Merci d'avance pour toutes vos remarques a ce sujet.

Bonsoir,
Ton énoncé n'est pas particulièrement clair...

a écrit :
étant donné que 800*600 est le standard

Non le standard comme tu dis c'est le 1024x768
voir http://www.w3schools.com/browsers/browsers_stats.asp
Mais de tte façon il faut continuer a developper pour du 800x600 puisque ça représnete encore 25% des internautes. Donc prevois tjs une largeur de 775px (a cause de la scrollbar verticale) pour être tranquil et eviter le scoll horizontal.

a écrit :
lorsque je mets une résolution supérieure, le site apparait tout petit.

Normal puisque ta resolution augmente. Si tu veux qur la taille de ta fenetre augmente proportionnellmenet ben tu dois tout passer en %
mais c'est une solution qui si elle est mal gérée peut foutre en l'air toute ta mise en page...

merci Hermann. Mais je me demande s'il est possible dans le cas de mon interface ( voir ci dessus la dispostion des images rectangles et arrondis) d'adapter la taille des images a la résolution de l'ecran.

Oui c'est possible si ton decoupage est bon.
Tu dois faire une image arrondit à chaque angle et les cotés doivent être en html (en position absolute par exemple) et ton conteneur en %.
Pour ton menu tu px faire 2 images horizontales (3 premiere rub) du html redimensionnable et puis 1 autre image avec contact.
Apres je vais pas te faire le boulot, si tu ne maîtrises pas tous ça ben forme toi un peu...

Ciao
Modifié par Hermann (18 Jan 2006 - 15:46)

merci Hermann. Mais je ne vois ce que tu dis par "les cotés doivent être en html", et "du html redimensionnable". Ce que j'ai juste réussi a faire pour l'instant c'est de centrer horizontalement et verticalement l'interface selon la résolution et j'aimerais maintenant aussi pouvoir agrandir la zone de contenu rectangulaire selon la résolution. M

Au lieu d'utiliser des images pour tes cotés et ben utilise des background.
Apres j'ai tout dis dans mon précédent message...

Salut !

Tu n'arriveras jamais à center ton site verticalement pour toutes les résolutions ... mieux vaut se contenter de le centrer horizontalement, donner une marge suffisante au-dessus, et laisser le reste s'adapter au contenu ...

C'est plus facile à réaliser en largeur fixe (775px tout compris pour éviter les ascenceurs en 800x600, ça n'est pas si petit que ça ... je suis en 1400x1050, et ça ne me dérange pas), mais c'est effectivement aussi possible en "fluide" (c-à-d avec une largeur exprimée sous forme d'un pourcentage de la fenêtre.

Par contre, redimensionner les images en fonction de la résolution, je ne vois pas trop comment tu pourrais le faire. La seule possibilité, à mon avis, c'est de laisser l'espace entre les 3 premiers items du menu et le lien "contact" augmenter quand la résolution augmente ...

Salut, j'arrive à centrer verticalement les 2 cadres imbriqués mais pas le logo et le menu du site. Etant donné que chaque image est en pourcentage, ces images n'occupent pas la même position lorsqu'on change la résolution. Peut-on pas indiquer en css qu'on va placer le logo et le menu juste au dessus des 2 cadres?

voici le code css pour positionnner une de ces images :
#titre {
position:absolute;
left: 36%;
top: 18%;
width : 450px;
height : 59px;
margin-top: -29px; /* moitié de la hauteur */
margin-left: -225px; /* moitié de la largeur */
background-image : url(./titre3.gif);
background-color:#CCCCCC;
}

Salut,

merci de baliser ton code avec les balises prévues à cet effet ([code ] sans espace) comme il l'est demandé dans les règles que tu as lu et approuvé en t'inscrivant.

Pour ton problème, la résolution n'entre pas en jeu dans le "problème", les arrondis non plus.

Si tu veux faire une largeur fixe, la question est réglée, tu fais une image de 770px répétée verticalement, pour les arrondis, tu les mets dans le pied de page, dans le menu et dans le titre et c'est réglé.

Si tu veux le faire en largeur fluide (merci d'utiliser min-width et max-width en complément), il *suffit* de "doubler" les conteneurs (un div en plus) là où il y a besoin, dans le 1er conteneur la partie gauche, dans le second, la partie droite de l'image.

L'illusion sera totale lorsque tout sera mis ensemble.

Voilà en gros pour les principes de base.

(p.s. il n'y a pas de standard concernant la largeur fixe d'une page web, une largeur privilégiée tout au plus, et ce n'est certainement pas 1024 à mon humble avis)
Modifié par Olivier (21 Jan 2006 - 16:15)

Exemple de mise en oeuvre du principe de la solution que je propose :
http://www.elmoustikoblog.net/aide/3colfactices/

Pour le centrage horizontal, préférer text-align: center; sur le body pour IE et margin: 0 auto; (+ largeur définie) sur le conteneur global (+ rétablissement de l'alignement du texte à gauche) pour les navigateurs corrects.

Pour le centrage vertical, pas de miracle, nous sommes sur le web, pas sur une feuille de papier
Modifié par Olivier (21 Jan 2006 - 16:31)

Merci a tous!