18041 sujets

Questions générales et questions de débutants

Adapter son site aux différentes résolutions ( liquid )

bonjour, je me suis rendu compte récemment que l' affichage de mon site posait problème pour des résolutions autres que 1024x768.
après avoir trouvé quelques infos sur les différentes methodes, je pense que la méthode liquid serait la plus adaptée.
Existe-il un tutoriel expliquant comment faire ?
les pages de mon site fon 958 pixels max.
Est-ce que ce serait vraiment la plus adaptée ?
http://www.tutoriels-animes.com/
merci
merci à vous,
Koala, oui j' avais vu ces modèles, mais je souhaite garder l' apparence de mon site et je ne connais pas le CSS.
pour le deuxième lien que tu as mis, il s' agit de site "élastique", j' ai cru comprendre que celà pouvait poser des problèmes de déformation voilà pourquoi je souhaitais utiliser la méthode liquid.

Shani, merci mais il me semble que le lien que tu donnes ne concerne que l' image de fond.
j' ai vraiment besoin d' un coup de main, mon site n' est pas du grand art mais il ne manque plus que ça pour qu' il soit accessible à peu près à tous.
merci beaucoup.
PS: je ne connais pas le CSS.
Modifié par krsytof (26 Jun 2007 - 18:54)
Ton site a un menu en Flash visible entièrement uniquement en 1024px de large. Donc :
- soit tu modifies ton menu pour qu'il tienne en 800px de large ;
- soit tu le laisses tel quel, et dans ce cas autant figer la largeur de ton site en 980px de large par exemple.

Remarque, vu que le menu est en vectoriel, tu devrais pouvoir le laisser s'adapter à la largeur. Par exemple :
object#menuflash {
	width: 100%;
	min-width: 760px;
	max-width: 1100px;
	margin: 0 auto;
}

Pas sûr que ça passe par contre, mais c'est à tester.

Ceci dit, si tu ne connais rien aux CSS tu n'es pas sorti de l'auberge pour faire les choses correctement.

Le plus simple serait peut-être pour toi de créer un div conteneur global, et de lui donner une largeur fixe. Par exemple :
[b]HTML :[/b]
<body>
<div id="global">

<!-- Ici tout le contenu de la page -->

</div><!-- fin de div#global -->
</body>

[b]CSS :[/b]
div#global {
	width: 960px;
	margin: 0 auto;
}
merci Florent de ta réponse.
J' ai intégré le petit 2 ème code en CSS que tu m' a donné mais malheureusement, je ne constate aucune différence selon les résolutions ( décalages dans les deux cas)
est-ce que je m' y suis mal pris ?
je n' ai pas mis le code de la page ici, tu sais où le trouver si tu veux jeter un oeil.
j'ai mis le code que tu m' a donné avant </body> mais rien n' y change Smiley sweatdrop
Modifié par krsytof (29 Jun 2007 - 02:34)
Une simple info : à l'heure actuelle la résolution 1024x768 concerne environ 55 % des écrans, et le 1280x1024 17 %. L'antique 800x600 quand à lui ne cesse de perdre du terrain...

Source : http://www.journaldunet.com/solutions/dossiers/chiffres/navigateurs.shtml

Ma recommandation est de prévoir un design harmonieux dans ces deux résolutions, en employant des éléments graphiques fixes sur la droite de l'écran et un div redimensionnable, en prenant garde à ce que cet élément ne gène pas la lecture des infos dans une petite résolution.

Mon site perso emploie cette méthode, inspirée d'autres bien entendu... http://perso.orange.fr/nicolas.contant/home.html

Good luck Smiley cligne (that was my first POST)
youpi ça marche !!!
j' ai mis ce code entre les balise head.
<style type="text/css">
div#global {
width: 960px;
margin: 0 auto;
}
</style>


par contre, je voudrai essayer de faire ma 1ère feuille de style.
dîtes moi si c'est bon:
je mets ceci entre les balises head de ma page html:
a écrit :

<link rel="stylesheet" media="screen" type="text/css" title="nomdemafeuilledestyle" href="nomdemafeuilledestyle.css" />

et dans mon fichier css,je mets uniquement ceci:

div#global {
	width: 960px;
	margin: 0 auto;
}



est-ce que ça sera bon ? car je ne pourrais pas tester du weenk-end.
EDIT:
Ca marche !
j' ai pas pû résister à l' envie d' essayer ! Smiley lol
exple: http://www.tutoriels-animes.com/ac3-en-mp3.html
Merci vraiment.
est-ce qu' il y aurait une solution ps plus difficile pour adapter le site à la largeur ?
Modifié par krsytof (29 Jun 2007 - 03:05)
j' ai crié victoire trop tôt.
tout est OK sous FF mais j' ai des problèmes sous IE.
Sous IE, 5 pages du menu sauf "lexique" sont alignées à gauche.
PAGE D' ACCUEIL
LEXIQUE
UN TUTO
j' aurai préféré que tout soit centré.
Comment se fait-il que 5 pages ( celles du menu ) soit alignées à gauche sous IE ?
merci
krsytof a écrit :
Comment se fait-il que 5 pages ( celles du menu ) soit alignées à gauche sous IE ?

Le problème vient du Doctype. Les navigateurs lisent le Doctype (placé en tout début du document) pour savoir s'ils doivent afficher la page :
- en mode Quirks, c'est à dire à l'ancienne (ce qui donne des résultats aléatoires d'un navigateur à l'autre...) ;
- en mode Standard, c'est à dire en respectant autant qu'ils en sont capables les standards.

Tout doctype complet qui contient l'URL de la DTD déclenchera le mode Standard :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tandis que le doctype suivant déclenchera le mode Quirks :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Et en mode Quirks, IE n'arrive pas à centrer les blocs avec la technique des marges automatiques (le margin: 0 auto;).

Il faut donc que toutes tes pages aient le bon doctype, à savoir :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Quoique... je pense que tu aurais plutôt intérêt à utiliser un doctype Transitional plutôt que Strict. C'est à dire le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Ça correspond mieux au type de balisage que tu as dans ta page.
Modifié par Florent V. (29 Jun 2007 - 12:54)
Merci pour ces explcations claires.
Cependant, j' ai réussi à régler le problème en mettant le contenu décalé dans des balises div que j' ai centré.
Crois-tu que je doive tout de même utiliser le nouveau doctype ?
j' ai peux que ça chamboule tout...
Bonjour

caslantienne a écrit :
Une simple info : à l'heure actuelle la résolution 1024x768 concerne environ 55 % des écrans, et le 1280x1024 17 %. L'antique 800x600 quand à lui ne cesse de perdre du terrain...
Ma recommandation est de prévoir un design harmonieux dans ces deux résolutions...


Au risque de me répéter, de plus en plus de gens consultent du contenu sur des UA non-screen, par exemple sur des téléphones avec des écrans genre 320x240. Pour eux on fait quoi ?
D'autre part il faut éviter de confondre taille d'écran et taille de fenêtre d'affichage... 55% des écrans en 1024, ça fait combien de fenêtrages (un site FR + un site EN ) compris entre entre 850px et 950px au final ???
Arsene, concernant les UA, il s'agit d'un autre sujet, en l'occurence les CSS dédiées que l'on développe pour ces supports alternatifs.

Quand aux problèmes de tailles d'affichage le design dit "liquide" permet de proposer des contenus qui s'adaptent aux fenêtres de 800px à plus de 1500px de large, c'est d'ailleurs ce qu'avance l'auteur d'un des deux articles que tu proposes (between 720x400px to 1408x912px)
Support CSS dédié... oui et non. En l'absence, les UA utilisent ce qu'ils peuvent et ce qu'ils trouvent, en l'occurence la feuille principale par exemple si elle n'est pas spécifiée screen.

Concernant ensuite le design "liquide" ou "fluide" c'était effectivement en réaction à ta recommandation de "concevoir un design harmonieux dans les deux résolutions" citées. Je ne crois pas au design harmonieux dans une résolution particulière vu que cette résolution particulière, quelque part entre tailles d'écrans et tailles de fenêtres possibles, est indécidable.

a+
Sujet clos
Aller à