Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Petite info


Sew-Oszka

Messages recommandés

  • Modérateurs

Parfait.

@+ :P

 

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 :P) Pour cela, p_edit.gif votre premier message :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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 ! :P

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines après...

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? :P

 

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

Modifié par Sew-Oszka
Lien vers le commentaire
Partager sur d’autres sites

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! :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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. :P

 

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.

Lien vers le commentaire
Partager sur d’autres sites

merci pour tes conseils! :P 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!)

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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é :P

Lien vers le commentaire
Partager sur d’autres sites

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! :P Déja il faut que je refasse ma maquette en 1600x1200! Et ensuite au boulot! :P

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...