> Tous les forums > Forum des Webmasters
 Affichage, feuille de style et résolution
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
ted the Ors
  Posté le 28/11/2005 @ 16:54 
Aller en bas de la page 
Astucien
Bonjour Ce post concerne l'affichage... J'ai lu le post de Malcom sur les conseils donnés aux débutants (ce qui doit etre mon cas) notamment sur l'affichage. Il conseille de travailer en % plutot qu'en pxl Je dis "ok" mais comment peut on changer des pages qui ont deja été concue en tenant compte de la résolution du pc ou elles ont été crées! Sachant que je travaille sous NVU... Merci d'avance pour votre aide!! @+ ted
Publicité
midnightblue
 Posté le 28/11/2005 à 17:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Dans le cas général c'est les tableaux dans lesquels s'affichent le contenu qui sont calculés avec une largeur correspondant à la résolution d'écran. Par exemple. <table width="780px"> pour une résolution de 800*600 <table width="1000px"> pour une résolution de 1024 * 768 Nota : les valeurs sont inférieures à la résolution pour tenir compte de la barre de scroll et bordure. Beaucoup sont optimisés pour 800*600. Alors que cette résolution tombe en désaffection. Moins de 10% dans le dernier sondage de pcinpact. En fin, bref, chacun fait ce qu'il veut ! Quoiqu'il en soit si tu veux que ton site occupe la largeur de l'écran quelque soit la résolution tu remplaces dans tous les cas : <table width="XXXpx"> par <table width="100%"> Il te faut adapter éventuellement images et fonds. Si les balises sont des <div> avec des calques, tu fais la même chose dans le css. Tu remplaces par exemple body {width:800px} par body{width:100%} Bon surf, bon scrpt ! Et le bonjour à Malcolm qui est de bon conseil. *µ* (morkania & dnf) :-)))
ted the Ors
 Posté le 28/11/2005 à 20:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Ok merci mais j'ai vraiment bcp de tableau, ca serait un peu long! N'est ce pas plus rapide de faire trois site pour les trois resolutions les plus représentées??? Merci @+ ted
Dreamer
 Posté le 28/11/2005 à 20:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut Une autre solution que j'ai appliqué , l'utilisation d'une résolution 800x600 que je centre quelque soit la résolution , comme ça tout va bien . Je ne vois pas refaire toutes mes pages pour du 1024 ou du 1200 ( j'ai pour l'instant 220 fichiers et 35 dossiers .......... [boom] ) . A +
midnightblue
 Posté le 28/11/2005 à 22:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
En php , tu en as pour un instant. Cà m'a donné une idée ! J'ai scripté une moulinette pour tranformer les 800, 1024 , 1200 etc... en 100% Voilou 1- On copicolle les fichiers à traiter dans un répertoire siteatraiter/ ( ou un autre nom) 2-On liste les fichiers à traiter = à l'aide du bloc-note écrire simplement le nom des fichiers dans une page fichiers.txt Régle 1 - si le fichier est dans un dossier indiquer simplemnt le chemin depuis la racine du répertoire Régle 2 - 1 seul fichier par ligne et on commence en haut. Exemple de liste : index.php moi.html pages/yoplaboum.html ***************************************************** fichiers.txt doit être mis à la racine du répertoire des fichiers à changer. On aurait pu utiliser une fonction qui liste automatiquement les fichiers du site, mais si on ne veut pas tous les changer, cà permet de maitriser la chose. [code]<? //fichier changemoissa.php à mettre à la racine du répertoire des fichiers à changer if(empty($_POST["ok"])) {$_POST["ok"]="";} $ok=$_POST["ok"]; if($ok!=""){ //Tableau de toute les largeurs (width) à remplacer par 100% $valeurs=array(800,1024,1200,"800px","1024px","1200px"); // On peut en ajouter // Ou mettre la totalité de l'attribut => "width=800" si on a peur que des valeurs numériques soient affectées dans le site. $fichiers=file("fichiers.txt"); for($n=0;$n<count($fichiers);$n++){ $fichiers[$n]=rtrim($fichiers[$n]); $changemoissa=file($fichiers[$n]); for($i=0;$i<count($changemoissa);$i++){ for($k=0;$k<count($valeurs);$k++){ $changemoissa[$i]=str_replace("width=\"".$valeurs[$k]."\"","width=\"100%\"",$changemoissa[$i]); } } $fp=fopen($fichiers[$n],"w"); for($i=0;$i<count($changemoissa);$i++){ fwrite($fp,$changemoissa[$i]);} fclose($fp); } } echo "<form method=\"post\"><input type=\"submit\" name=\"ok\" value=\"changer\"></form>";[/code] Le cas échéant, veiller à ce les attributs des fichiers CHMOD permettent de les réécrire. Mais si vous e faite en local, aucun probléme. J'ai mis un bouton d'actionnage de la purée pour vous permettre de réfléchir une dernière fois :-))))) C type top non ! On dira pas, Malcolm, mais çà envoie les tablos multidimentionnels. @+ *µ*

Modifié par midnightblue le 28/11/2005 23:00
ted the Ors
 Posté le 28/11/2005 à 23:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Waou super la solution en php [bierre][bierre][dent] Mais bon, le php, j'y comprends pas comme langage mais bon je pourrais essayer... Je te tiens au courant! @+ ted[idee] Ps: Malcom serait-il si celebre??? [clindoeil]
ted the Ors
 Posté le 28/11/2005 à 23:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
midnightblue a écrit :
En php , tu en as pour un instant.
Je rectifie, en php si on connait, y en a pour un instant[clindoeil]
1- On copicolle les fichiers à traiter dans un répertoire siteatraiter/ ( ou un autre nom)
Jusque la, ca va...[approuve]
2-On liste les fichiers à traiter = à l'aide du bloc-note écrire simplement le nom des fichiers dans une page fichiers.txt Régle 1 - si le fichier est dans un dossier indiquer simplemnt le chemin depuis la racine du répertoire Régle 2 - 1 seul fichier par ligne et on commence en haut. Exemple de liste : index.php moi.html pages/yoplaboum.html
Je liste tous les fichiers des pages (photos, arriere plans, etc..° ou juste les fichiers html
fichiers.txt doit être mis à la racine du répertoire des fichiers à changer.
Au risque de passer pour un ignare de la technologie de Mr.Atanasoff John Vincent (l'inventeur du premier pc) et Mr Gates , la racine du repertoire, euh c'est quoi??...[rougir][rougir] Pour le reste du code, quelles sont les parties que je dois modifier??... Voila, désolé d'avoir encore si peu de connaissances! Je mets quand meme un résolu... @+ ted

Modifié par ted the Ors le 28/11/2005 23:23
midnightblue
 Posté le 29/11/2005 à 00:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Tu mets seulement les fichiers htlml ou htm suivant comment tu les as nommés. Avant d'entreprendre l'opération pense à faire tout de même une sauvegarde de tes fichiers. A la racine du répertoire , çà veut dire immédiatement "dedans" (= pas dans un sous-dossier.) Donc tu ouvres le dossier du répertoire, et tu enregistres le fichier à cet endroit. Pour le code, il ne faut surtout rien toucher sauf éventuellement la ligne avec le tableau des valeurs à changer et seulement si tu veux transformer d'autres résolutions d'écran. Tu copie colles le code tel-quel dans ton bloc note et tu nommes la page changemoissa.php. C'EST TOUT. Pour la pratique, j'ai essayé en local avec 3 petits fichiers : çà marche. En local (sur ton PC) , il te faut Easyphp ou similaire pour ouvrir la page changemoissa.php Sinon tu fais çà direct sur le serveur de ton hébergeur mais pense à donner les CHMOD suffisants à tes fichiers pour que php puisse y re-écrire dedans. Clic droit dessus et cocher les cases correspondantes aux droits d'écriture. A+. *µ*

Modifié par midnightblue le 29/11/2005 00:21
ted the Ors
 Posté le 01/12/2005 à 12:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Bonjour Bon je crois que c'est bon, mais je laisse à ceux qui ont la motiv' essayer pour voir si l'affichage est correcte pour les 3 résolutions... Merci encore à Midnightblue! @+ ted
ted the Ors
 Posté le 03/12/2005 à 18:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
Slt Midnight blue, est ce que tu peux me dire ce que t'en penses quand meme... Voila l'adresse: http://www.webescapeplan.host-gratuit.net/ MErki d'avance @+ ted
midnightblue
 Posté le 04/12/2005 à 03:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Hello Ted, J'ai été faire un tour sur ton site. Bravo pour le style, il convient bien au théme, du moins c'est mon avis perso. J'adore la page LineUP ! Et les pavés à droite sont bien lisibles, bien mis en valeur. Par contre dans la page Bio le caractère est trop petit par rapport à la longueur de la ligne et le texte est difficilement lisible sans un gros effort de l'oeil. Là tu devrais tu devrais t'inspirer de Line Up... Pour les autres pages tu as bien su varier la présentation tout en restant dans le même style. C'est prometteur! Bravo (re) en tout cas et bonne continuation.[bierre] A+ *µ*
Malcolm
 Posté le 04/12/2005 à 10:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

yop midnight, morkania oui je me rappelle bien ... [clindoeil] ta solution de proposer des tableaux en php est "pratique", mais souffre d'une chose AMHA : le tableau est fait pour présenter des données tabulaires et non de la mise en page ... générer un tableau 'à la volée' est très pratique, mais ça sous entend que le tableau est toujours du mlême style, or ceux qui les utilisent pour la mise en page se trouvent bien souvent confrontés à devoir imbriquer des tableaux dans ces cellules de tableau ... Travailler en % ou en pixels peut se valoir, si tu fais un site à largeur fixe, tu peux le prévoir pour un affichage potable en 800 (sachant que ces résolutions sont assez minoritaires) et un affichage correct en 1024 et + ... Autrement la solution de pourcentage s'offre entièrement, dans toute la splendeur des CSS. Voyez par exemple le site http://unreal2004.free.fr quelle que soit la résolution, l'image de fond (qui, nativement, est en 800x600) s'affiche en entier ...
ted the Ors
 Posté le 04/12/2005 à 13:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien
midnightblue a écrit :
Hello Ted, J'ai été faire un tour sur ton site. Bravo pour le style, il convient bien au théme, du moins c'est mon avis perso. J'adore la page LineUP ! Et les pavés à droite sont bien lisibles, bien mis en valeur. Par contre dans la page Bio le caractère est trop petit par rapport à la longueur de la ligne et le texte est difficilement lisible sans un gros effort de l'oeil. Là tu devrais tu devrais t'inspirer de Line Up... Pour les autres pages tu as bien su varier la présentation tout en restant dans le même style. C'est prometteur! Bravo (re) en tout cas et bonne continuation.[bierre] A+ *µ*
Merci c'est supre encourageant... Quand au design, certaines personnes m'ont dit que c'était trop fouilli...Je suis en train d'hesiter à passer par un kit graphiques, mais c'est tellement moins personnel... En tout cas, pour la page Bio, je ne comprends pas parce que j'ai augmenter la taille de police, et chez moi je le vois parfaitement, chez les autres, ca marche pas...alors que la police utilisé est conventionnelle... Bon, en tout cas, merci beaucoup, pour l'affichage, le probleme est résolu... Bonne continuation @+ ted
midnightblue
 Posté le 04/12/2005 à 19:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien
Pour que le texte soit lisible remplace la balise <small style="font-family:Garamond"> par <p style=font-family:Garamond; font-size:14px> Pense à refermer la balise en fin de texte. </p> Et si possible réduit la largeur de ce pavé. Au delà de 50-60 signes par ligne l'oeil fatigue et au delà de 120 signes c'est critique. Pour améliorer encore le parcours visuel sur ton site, tu peux affecter la même couleur à tous les textes "à lire". Par exemple le gris de la page LineUp. C'est des petits trucs comme çà qui aident l'oeil à se repérer, et rendent finalement le site agréable à découvrir. Bonne semaine. *µ*
elle
 Posté le 04/12/2005 à 19:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Malcolm a écrit :
Autrement la solution de pourcentage s'offre entièrement, dans toute la splendeur des CSS. Voyez par exemple le site http://unreal2004.free.fr quelle que soit la résolution, l'image de fond (qui, nativement, est en 800x600) s'affiche en entier ...
Salut Malcolm, Avec une barre de défilement horizontale en 800x600. [clindoeil]
Malcolm
 Posté le 04/12/2005 à 20:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

pour le contenu, oui, pas pour l'image de fond ...
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
47,40 €SSD externe USB 3.1 PNY Elite CS1050 480 Go à 47,40 €
Valable jusqu'au 29 Janvier

RueDuCommerce fait une promotion sur le SSD externe USB 3.1 PNY Elite CS1050 480 Go qui passe à 47,40 € alors qu'on le trouve ailleurs à partir de 62,50 €. Ce SSD externe ultra compact (5,99 x 3,56 x 0,89 cm, 50 grammes) offre des vitesses allant jusqu'à 420 Mo/s en lecture et en écriture. 


> Voir l'offre
39,99 €Lego 10281 Creator Botanical Collection Bonsaï Tree à 39,99 €
Valable jusqu'au 28 Janvier

Cdiscount fait une belle promotion sur le Lego 10281 Creator Botanical Collection Bonsaï Tree qui passe à à 39,99 € au lieu de 49,99 €. Découvrez l’art du bonsaï avec ce superbe Bonsaï LEGO de 878 pièces. Ce projet immersif permet de créer un remarquable objet de décoration. Comme un vrai bonsaï, ce modèle LEGO peut être « taillé » pour obtenir la forme de votre choix. Inclut des pièces interchangeables pour obtenir un  bonsaï classique, avec son feuillage vert, ou un cerisier recouvert d'une abondante floraison rose.


> Voir l'offre
9,99 €Forfaits mobiles Sosh Appels/SMS/MMS illimités Europe + 20 Go Internet à 9,99 €
Valable jusqu'au 01 Février

Sosh lance une série limitée 20 Go Internet pour ses forfaits mobiles avec appels et SMS/MMS illimités depuis la France et l'Europe à 9,99 €. Sans engagement : vous pouvez résilier à tout moment.


> Voir l'offre

Sujets relatifs
feuille de style
feuille de style avec dreamweaver CS6
Début d'une feuille de style
Problème feuille de style .css
creer une feuille de style
Affichage page web et résolution d'écran
feuille de style e css
Feuille de style CSS
Blog/feuille de style/css
Feuille de style CSS
Plus de sujets relatifs à Affichage, feuille de style et résolution
 > Tous les forums > Forum Forum des Webmasters