Pages :
(reprise du message précédent)

A-CesarX-V a écrit :
j'ai di catastrophique, car j'ai changé ma resolution et j'ai vu ce que ça donnais..
je parle du nouveau design l'ancien n'en a plus pour longtemps


Le nouveau c'est quoi ? je m'y retrouve plus là Smiley ohwell
Hormis le scroll y a rien qui change ...

De toute façon, vu la structure (visuelle, pas niveau code) de ta page, il devrait être facile de faire quelque chose qui s'adapte ..
en fait, je sais pas comment m'y prendre pour faire en sorte d'adapter mon site visuellement à ces deux resolutions :
800x600
et 1024x768
mais vous faites la difference entre l'ancien et le nouveau car l'ancien est vraiment trop mauvais (et est peut etre ausi le sujet d'un certaine queurelle j'en sais rien) je veux oublier l'ancien et me concentrer sur le nouveau.
a écrit :
en fait, je sais pas comment m'y prendre pour faire en sorte d'adapter mon site visuellement à ces deux resolutions :


reprends calmement les liens que je t'ai donnée plus haut et ça va aller tout seul.
A-CesarX-V a écrit :
en fait, je sais pas comment m'y prendre pour faire en sorte d'adapter mon site visuellement à ces deux resolutions :
800x600
et 1024x768
mais vous faites la difference entre l'ancien et le nouveau car l'ancien est vraiment trop mauvais (et est peut etre ausi le sujet d'un certaine queurelle j'en sais rien) je veux oublier l'ancien et me concentrer sur le nouveau.



Je confirme que l'ancien, c'est pas ça ^^

Mais bon, là je viens de repasser en 800*600 et à part la barre de scroll (qui ne masque aucun contenu), je n'ai aucun soucis Smiley cligne

L'ensemble du site est visible en largeur.

Donc, je comprend pas trop là Smiley ohwell

<private joke>
(la webdevelopper toolbar, il en manque un bout en 800*600, c'est pas accessible Smiley biggol )
</private joke>

Tiens, je suis en train de penser à un truc là, t'aurais pas ta fenêtre qui n'est pas en plein écran en 800*600 ou bien peut être les favoris dépliés sur le côté ou un truc du genre ??

T'aurais un screenshot à nous montrer, parceque là je suis assez sceptique quand même Smiley ohwell

<edit>P.S. p'tingh, c'est flippant de passer du 1280*1024 au 800*600, ça me fait tout drole Smiley sweatdrop </edit>

<edit2>P.S. p'tingh, faire le contraire, ça fout limite la gerbe ^^</edit2>
Modifié par Olivier (02 Jul 2005 - 03:19)
a écrit :
<private joke>
(la webdevelopper toolbar, il en manque un bout en 800*600, c'est pas accessible biggol )
</private joke>


faut mettre les icones en petit et sans les textes Smiley cligne
TriadPtale a écrit :
<private joke>
(la webdevelopper toolbar, il en manque un bout en 800*600, c'est pas accessible biggol )
</private joke>


faut mettre les icones en petit et sans les textes Smiley cligne

Ahh woké ^^
Bon, c'est moi qui vais m'y mettre dans le détournement de topic maintenant Smiley langue

Revenons à nos moutons Smiley smile
bon tennez des screen :
en 1024x768, ou tout va bien :
upload/2321-1024.JPG
et en 800x600, ou tout va mal :
édit par Igor Smiley ohwell
upload/128-2321-800.JPG
Modifié par Igor (03 Jul 2005 - 00:29)
Corrige tes largeurs et marges sur tes deux divs de colonnes, à partir de quelque-chose comme:
#navBar{
	padding: 0px;
	border-right: 1px solid #9966FF;
	border-bottom: 1px solid #9966FF;
	border-top: 1px solid #9966FF;
	border-left: 1px solid #9966FF;
	background-image: url(54645000.jpg);
	width: 21%;
}

#content{
  float:right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
}
ok merci je l'ai fait, la marge défini l'importance de l'espace entre le contenu de la div et son bord c'est ca?
j'avai mis ca au cas ou je voudrai changer d'image pour l'arriere plan de la div mais je l'ai supprimé pour faire plus simple :
background-image: url(54645000.jpg);
merci Smiley lol
est-ce qu'on peut atribuer un pourcentage à un texte?
de la meme maniere que le width: 25%; d'une div?
ce qui me permettrai d'adapter automatiquement l'ecriture à la taille de lecran.
Modérateur
Oui tu peux le faire. Personnellement, j'utiliserais un conteneur div avec un ID du nom de "corps" par exemple, dans lequel j'y metterais le texte. Je ferais ceci :


div#corps {
width:75%;
// un max-width peut-être, et un min-width aussi pourquoi pas.
}


Ce conteneur correspond au corps du site. C'est le conteneur dans lequel je met le contenu textuel : les titres, les paragraphes, les images, etc.

Mais que veux-tu dire par adapter à la taille de l'écran ? La taille des caractères ou la largeur du texte ?

Si tu veux que ce soit adapté en largeur, je te conseille d'utiliser une largeur maximum avec max-width, pour éviter que le texte soit trop long en largeur.
Modifié par Merkel (04 Jul 2005 - 02:49)
a écrit :
apparemment, ma question a l'air tellement stupide que personne ne veux y repondre!

Je ne pense pas; je pense plutôt qu'elle est mal formulée:
a écrit :

Mais que veux-tu dire par adapter à la taille de l'écran ? La taille des caractères ou la largeur du texte ?

Voilà la question qu'on se pose en lisant ta question!!
Celui qui est à même de poser la bonne question, c'est en général celui qui en connaît déjà la réponse. Autrement-dit, ce n'est pas celui qui a besoin de poser la question Smiley cligne

a écrit :
est-ce qu'on peut atribuer un pourcentage à un texte?
de la meme maniere que le width: 25%; d'une div?
ce qui me permettrai d'adapter automatiquement l'ecriture à la taille de lecran.


Si je te suis, tu voudrais que la taille de tes caractères s'adapte à la largeur de ton élément ?
- en grande résolution, affichage en gros caractères
- en petite résolution, affichage en petit caractères

Si c'est le cas, cette corrélation est l'affaire de la configuration côté client : c'est à tes visiteurs de déterminer leurs préférences quand à la taille des caractères par défaut dans leur résolution.

Je comprends le souci d'afficher une page qui passera comme tu l'as prévu dans toutes les résolutions. Mais cela ne peut pas reposer sur la modification des préférences du client pour les adapter à ton site. C'est au contraire ton site qui doit s'adapter aux préférences du client.

Pourquoi ? Parce que ce type de démarche est illusoire en l'état actuel de la technique disponible.

Un projet d'extensions de CSS (qu'on peut tester aujourd'hui dans Opera) permettra peut-être à l'avenir de styler différemment une page Web selon les données précises de configuration client telles que la résolution d'écran : ce sont les media queries (Le client emet une requête HTTP définissant ses données de résolution, de nombre de couleurs, etc. Le serveur négocie le contenu sur cette base.)

Pour l'instant, assure-toi simplement que ta page est lisible dans une palette aussi large que possible de résolutions d'écrans, et laisse tes utilisateurs assumer le reste.

attention : lisible ne veut pas dire identique Smiley cligne
oui c'est compris
merci, je comprend mieux, c'est pourquoi, le contenu de mon site est désormais lisible sans mal même en 800x600.
le projet d'extensions dont tu me parles, Laurent Denis, est ce que l'ont peut assimiller sa fonction de fonctionner à la fonction de fonctionner du php? (le client demande a voir une page php, le serveur traduit en html, pour que le client puisse voir la page, étant donné que les navigateurs ne comprennent pas le php)
merci beaucoup à vous...
Hum... Avant tout, ce n'est pas tout à fait cela, le fonctionnement du PHP Smiley cligne

Le PHP n'est pas un langage servant à faire des pages Web (des "pages PHP", comme tu dis). C'est un langage servant à dire à un serveur ce qu'il doit faire. Cela peut consister en toutes sortes d'opérations, certaines ayant pour but de produire une page HTML, d'autres non.
Par exemple, un type de script PHP très courant :
- génère un formulaire HTML qu'il adresse au client (c'est une page HTML tout ce qu'il y a de plus classique)
- récupère la réponse du client après soumission du formulaire, traite les données qu'elle contient pour s'assurer qu'elles sont correctes, les enregistre dans une base de donnée, envoie un mail de confirmation à l'utilisateur, etc (là, on n'est plus du tout dans la production de HTML)
- etc.

Maintenant, l'extension à laquelle je faisais allusion, les media queries, ne concerne pas le traitement côté serveur et ne ressemble donc pas au fonctionnement du PHP. La nouveauté réside dans le traitement côté client. C'est en effet le navigateur, côté client, qui doit :
- interpréter une série de déclarations de feuilles de styles conditionnelles.
- déterminer celle qui lui convient et demander au serveur l'envoi de la feuille correspondante, au lieu de lui demander bêtement toutes les feuilles de styles comme actuellement.

A l'heure actuelle, ce qui se passe concrètement entre le navigateur et le serveur, c'est (en simplifiant les échanges):
- navigateur: Bonjour, je voudrais votre document accueil.html
- serveur: le voilà...
- navigateur: Voyons... ah ! il y a un <link rel="stylesheets" ! Hohé, le serveur ? Je voudrais aussi la feuille de style qui va avec, svp ?
- server: voilà...
- navigateur: alors, appliquons cette CSS... Oh, ça va pas être bô ça. Tant pis, j'y peux rien. Allez zou ! On affiche !

Ce qui se passera avec les Media queries :
- navigateur: Bonjour, je voudrais votre document accueil.html
- serveur: le voilà...
- navigateur: Voyons... ah ! J'ai le choix entre plusieurs CSS:
<link rel="stylesheet" href="..." media="screen and (device-width: 800px)" />
<link rel="stylesheet" href="..." media="screen and (device-width: 1024px)" />
<link rel="stylesheet" href="..." media="screen and (device-width: 2048px)" />


- navigateur: Bon, moi c'est1024px. Hohé, le serveur ? Je voudrais aussi la feuille de style pour 1024px, svp ?
- server: voilà...
- navigateur: Oh! la belle CSS... miam Smiley smile

Pour voir cela en pratique aujourd'hui, il suffit d'utiliser Opera.
Modifié par Laurent Denis (08 Jul 2005 - 07:53)
J'oubliais une chose très importante : d'après ce qui précède, les media queries ofriraient une excellente solution au vieux problème de "Je veux que ça passe quelque-soit la résolution d'écran".

En fait, de l'aveu même des auteurs de ce projet de spec, c'est un outil très limité qui ne répond que très partiellement au problème du traitement d'une ressource unique (le contenu) quelque-soit le media de restitution: les media queries ne sont pas extensibles : nouveau media, nouvelles contraintes de rendu... Plop !

Ce qui va contribuer beaucoup plus à changer la donne, et qui a en fait déjà commencé, ce sont les processus d'adaptation de la structure et du rendu côté client.

Ouh ! Qu'é-qui-dit, là ? Smiley eek

N'ayez pas peur, c'est très simple. C'est une "simple" (sic) évolution du navigateur déjà accomplie par Opera, en cours pour les navigateurs Gecko, qui permet à l'utilisateur de demander à son navigateur d'adapter les données de présentation et de structure à ses contraintes de rendu personnelles. Concrètement, c'est l'architecture ERA d'Opera et ce qui est en train de se construire pour le navigateur Gecko pour mobiles :
- le fit to width (adapter à la largeur) d'Opera permet d'ores et déjà d'adapter n'importe quelle page Web à la largeur réelle d'affichage ou d'impression, pour supprimer tout scroll et tout rognage. (Personnellement, ces histoires de scroll à n'en plus finir me laissent, du coup, assez froid Smiley cligne )
- le small screen rendering d'Opera (et son futur équivalent Gecko) permettent de retraiter aussi bien le HTML que les CSS pour forcer un rendu sur les très petits écrans des mobiles et PDA.

l'intéressant, là-dedans, c'est que le navigateur acquiert une capacité de modifier le biau design voulu par l'auteur, mais aussi la structure HTML qui va va beaucoup plus loin que les grossières adaptations du type idésactiver la feuille de style ou ignorer les tailles de caractères spécifiées par l'auteur.

Tiens, sans cette capacité, je ne pourrais pas afficher sur mon écran secondaire la liste des derniers messages de ce forum, dans une fenêtre de largeur très réduite (cet écran affiche beaucoup d'autres choses), mais sans l'affreux scroll que provoque les contenus sans espace trop longs que ne gère pas le CMS...
Modifié par Laurent Denis (08 Jul 2005 - 08:29)
Pages :