[Résolu] Petite info

Sew-Oszka · le 5 février 2007

Pour info ca marche avec index.htm! Merci encore Dylav, c'est super sympa!

Dylav · le 5 février 2007

Parfait.

@+

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur ) Pour cela, votre premier message

Dylav · le 5 février 2007

Epilogue : Mauvaise nouvelle

Ayant un léger doute sur la facilité de la solution que je proposais pour les 8 choix de ton menu vertical, j'ai passé le source HTML au validateur du W3C. Le verdict est implacable, on ne peut prendre un bloc <div> comme zone sensible d'un lien hypertexte. C'est rageant. Il faut donc en revenir à la solution classique initiale <div><a><img></a></div>,

<div id="Layer1" class="bouton"><a href="Construction.html">
<img class="menu" src="BoutonAccueil.jpg" alt="" /></a></div>
<div id="Layer2" class="bouton"><a href="Construction.html">
<img class="menu" src="Enseignement.jpg" alt="" /></a></div>
<div id="Layer3" class="bouton"><a href="Construction.html">
<img class="menu" src="instruments.jpg" alt="" /></a></div>
<div id="Layer4" class="bouton"><a href="Construction.html">
<img class="menu" src="Historique.jpg" alt="" /></a></div>
<div id="Layer5" class="bouton"><a href="Construction.html">
<img class="menu" src="Groupes.jpg" alt="" /></a></div>
<div id="Layer6" class="bouton"><a href="Construction.html">
<img class="menu" src="Activites.jpg" alt="" /></a></div>
<div id="Layer7" class="bouton"><a href="Construction.html">
<img class="menu" src="Contacts.jpg" alt="" /></a></div>
<div id="Layer8" class="bouton"><a href="Construction.html">
<img class="menu" src="Inscription.jpg" alt="" /></a></div>

et, dans la feuille de style,

.menu   {width:150px;height:50px;border:0;}
#Layer1 {top:150px;}
#Layer2 {top:200px;}
#Layer3 {top:250px;}
#Layer4 {top:300px;}
#Layer5 {top:350px;}
#Layer6 {top:400px;}
#Layer7 {top:450px;}
#Layer8 {top:500px;}

Tu noteras la classe menu, qui spécifie les dimensions communes aux 8 images, et qui requiert l'absence de bordure. On pourrait faire l'économie d'une classe, en attachant ces spécifications à tous les objets images,

img	{width:150px;height:50px;border:0;}

puisque ce sont les seules images de la page (les deux autres sont des fonds d'écran). Mais tu serais piégé le jour où tu ajouterais une autre image de dimensions différentes.

Ne pas oublier l'attribut alt, requis en XHTML.

Et là, c'est gagné : This Page Is Valid XHTML 1.0 Transitional!

Pendant qu'on y est, tentons la validation de la feuille de style : Aucune erreur ou avertissement (0 ignorés)

Rien que du bonheur !

Sew-Oszka · le 5 février 2007

Merci dylav! Je vois ca demain et je te tiens au courant (j'ai bien recu ton MP)!

Sew-Oszka · le 20 février 2007

Je suis en train de faire un nouveau site pour ma mère! (je sais je suis un boulet! ) Et ma questin est la suivante, comment fait-on pour que l'image de fond s'adapte a la résolution de l'utilisateur! Je voudrais que l'image soit en pleine écran quoiqu'il arrive! Vous avez peut etre déja répondu a ma question ci-dessus mais je suis débutant et je n'ai surement pas tout pigé!

PS: cette fois je m'attaque au code en essayant de me passer de dreamweaver! Bon point non?

Pour ceux que ca interressent, je mets la page concue avec photoshop http://www.maisondudaf/base1

Modifié le 20 février 2007 par Sew-Oszka

Sew-Oszka · le 20 février 2007

C'est bon j'ai trouvé!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>site maman</title>
</head>
<img src="adresse de l'image" width="100%" height="100%"/>
</body>
</html>

Mais du coup il faut que je refasse une maquette avec une résolution plus important car là on voi les pixels!

Dylav · le 20 février 2007

Prends garde à deux choses.

D'une part, toutes les résolutions ne présentent pas les mêmes proportions entre largeur et hauteur de l'écran : 640x480, 800x600, 1024x768, 1600x1200, c'est du 4/3. Mais 1280x1024 déroge, en 5/4. Et puis les nouveaux formats TFT sont en 16/10èmes. De sorte que ton image initiale sera forcément déformée dans deux des 3 "formats", si tu veux systématiquement remplir tout l'écran (width=100%, height=100%). Je te suggère plutôt de demander seulement à remplir toute la hauteur, et de laisser la largeur libre (proportions de l'image respectées), en ajoutant pour les éventuelles marges latérales une couleur de fond compatible avec l'aspect général de l'image.

D'autre part, quelle que soit la taille initiale de ton image, elle présentera des imperfections d'apparence si tu la pousses vers d'autres dimensions. A mon avis, le mieux est de partir d'une image de taille maximale (par exemple 1600x1200), et de l'obliger à rapetisser pour les résolutions d'écran inférieures : l'image a tendance à moins "s'abîmer" visuellement en rétrécissant qu'en grossissant.

Par ailleurs, dans l'exemple que tu donnes, il ne s'agit pas d'une image de fond, mais d'une image qui s'étend sur tout l'écran. C'est moins pratique à gérer, parce qu'il va te falloir "écrire" par-dessus, ce qui n'est pas évident autrement qu'en positionnel "fixe" mais proportionnel, à partir du coin haut gauche de l'écran. En particulier, pour pointer les choix du menu (s'il s'agit bien de l'image de ton post #25), il va falloir définir des zones sensibles positionnées et dimensionnées en pourcentage. Un peu fastidieux, mais jouable... un challenge amusant, en tout cas.

L'alternative, c'est la véritable image de fond, mais ses dimensions ne changent pas en fonction de la résolution de l'écran, et il faut savoir l'accepter tronquée ou pas assez couvrante. Tout un challenge, là aussi. Mais rappelle-toi que c'était facile à mettre en oeuvre pour ton site DAF, où l'image de fond se prêtait aisément à la troncature.

Sew-Oszka · le 20 février 2007

merci pour tes conseils! Je n'avais pas pensé au fait que les écrans pouvaient ne pas avoir les mêmes proportions que le mien!

Maintenant j'aimerais qu'on m'explique un truc, comment fait-t-on pour raisonner en terme de pourcentage et non en terme de pixel au niveau du code? (Exusez-moi pour mon ignorance, mais c'est vraiment tout nouveau pour moi!)

Dylav · le 20 février 2007

En apparence, c'est tout simple. Au lieu d'écrire, pour une résolution 800x600 par exemple,

#boite {top:120px;left:160px;width:320px;height:240px;}

tu calcules les proportions concernées, et voilà l'homothétie prête à fonctionner pour que ta boîte présente le même aspect sur l'écran quelle qu'en soit la résolution,

#boite {top:20%;left:20%;width:40%;height:40%;}

Le seul ennui, c'est le height en pourcentage. Dans notre exemple, il refuse d'occuper 40% de la hauteur, mais s'ajuste automatiquement à l'encombrement que lui impose son contenu : de zéro quand la boîte est vide, à... tout ce qu'il faut ! Ce qui casse un peu l'ambiance.

Pour finir, pourquoi t'excuser ? Le principal, c'est de comprendre et de pouvoir satisfaire ta créativité

Sew-Oszka · le 20 février 2007

Merci Dylav, avec toutes les infos que tu m'a donné je vais voir ce que j'arrive a faire! Et je te tiens au courant! Déja il faut que je refasse ma maquette en 1600x1200! Et ensuite au boulot!

Connexion

Pas encore inscrit ?

[Résolu] Petite info

Messages recommandés

Sew-Oszka

Dylav

Dylav

Sew-Oszka

Sew-Oszka

Sew-Oszka

Dylav

Sew-Oszka

Dylav

Sew-Oszka

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer