Taille de ma splash

[Dic]

Bonjour,

 

J'ai créé un splash sous adobe photoshop mais elle n'est pas a la bonne taille par rapport à ma page web

 

y a t il une ligne CSS a mettre dans mon body ou faut-il changer la taille de mon image ? j'aimerai qu'elle s'adapte a n'importe quelle résolution

 

De plus sur ce splash il y a un calque avec l'écriture "entrer". J'aimerai pouvoir faire que lorsque l'on clic sur entrer on accède au site

 

J'éspère ne pas trop en demander

 

Merci d'avance

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide

[Dylav]

Taille de ton image

Il te suffit d'exprimer l'une des deux dimensions de l'image en pourcentage de la dimension correspondante de la partie "efficace" de la fenêtre du navigateur (hors les diverses barres de navigation, d'état, d'ascenseurs, etc), sans rien préciser pour l'autre dimension.

 

Il faut néanmoins savoir qu'une image peut beaucoup perdre de sa qualité visuelle lorsqu'on lui demande de s'afficher dans des dimensions différentes de ses dimensions originelles. Il est préférable, à mon avis, de la réaliser d'une taille satisfaisante pour les petites résolutions d'écran, quitte à ce qu'elle paraisse un peu petite pour les grosses résolutions. Qualité oblige.

 

Zone sensible "entrer"

A partir du moment où l'image n'a pas une taille fixe, la position du mot "entrer" dans la page varie d'une résolution d'écran à l'autre. Ce que je te suggère pour éviter de te prendre la tête à chercher une solution sophistiquée, c'est de prendre pour zone sensible (pour cliquer) la totalité de ton image. De toute façon, ton visiteur tentera toujours de cliquer sur "entrer", et il obtiendra le résultat attendu... et qu'importe qu'il l'obtienne aussi en cliquant ailleurs sur l'image ?

 

Concrètement, cela donne quelque chose comme,

• dans ta page HTML,

  <a href="URLcible"><img class="splash" src="URLimage" alt=""></a>

  
  

• dans ta feuille de style,

  .splash {height:50%;}

  
  

Oups, je vois que Mushylex a apporté sa contribution avant moi...

 

Pour l'image en background, je confirme : on ne peut pas altérer ses dimensions réelles.

[Dic]

On va prendre les problèmes dans l'ordre si vous le voulez bien:

 

- la première chose que je souhaite faire est que mon image (600px / 500px créée sous photoshop) s'adapte a toutes les résolutions d'écran

 

ici l'exemple suivi : http://www.ressourceweb.com/tutoriaux-photoshop/298

 

le code devra se trouver directement dans ma page html car je ne vais pas faire une feuille de style pour 1 page.

[Dylav]

Je ne voudrais pas faire de mauvais esprit, mais,

• l'exemple que tu cites n'est pas forcément à suivre, il commence mal, avec une DTD XHTML 1.0 Transitional et des "frames" (cadres) : un joyeux mélange,
  
• cette page utilise des frames, ce qui est plutôt déconseillé par les recommandations actuelles : les cadres sont destinés à tomber en désuétude.
  

Quand tu parles d'image qui s'adapte, s'agit-il du bandeau haut (fond bleu à largeur apparemment variable, avec logo fixe à gauche, et zone de liens qui se colle automatiquement à droite) ? Parce que ça, c'est réalisable (et sans frames), mais il faudra peut-être revoir la conception de ton "splash".

 

Ou s'agit-il, en-dessous, de cette colonne de largeur fixe restant centrée horizontalement dans la fenêtre du navigateur ? Cela aussi, c'est réalisable.

 

Quant aux spécifications de présentation, sache qu'il est vivement recommandé de les séparer du contenu à afficher, et qu'une feuille de style n'est pas nécessairement externe à la page HTML : elle peut tout simplement être intégrée dans le header de la page, grâce à la balise <style>

[Dic]

Honnetement j'ai pas vraiment compris ton message Dylav je suis tout débutant en html et css

 

cette image est l'entrée de mon site (ou ce qui devra y ressembler), il n'y aura que cette image ici et le mot "enter" devra etre un lien vera le site lui meme.

 

Je ne voudrais pas faire de mauvais esprit, mais,

• l'exemple que tu cites n'est pas forcément à suivre, il commence mal, avec une DTD XHTML 1.0 Transitional et des "frames" (cadres) : un joyeux mélange,
  
• cette page utilise des frames, ce qui est plutôt déconseillé par les recommandations actuelles : les cadres sont destinés à tomber en désuétude.
  

Quand tu parles d'image qui s'adapte, s'agit-il du bandeau haut (fond bleu à largeur apparemment variable, avec logo fixe à gauche, et zone de liens qui se colle automatiquement à droite) ? Parce que ça, c'est réalisable (et sans frames), mais il faudra peut-être revoir la conception de ton "splash".

 

Ou s'agit-il, en-dessous, de cette colonne de largeur fixe restant centrée horizontalement dans la fenêtre du navigateur ? Cela aussi, c'est réalisable.

 

Quant aux spécifications de présentation, sache qu'il est vivement recommandé de les séparer du contenu à afficher, et qu'une feuille de style n'est pas nécessairement externe à la page HTML : elle peut tout simplement être intégrée dans le header de la page, grâce à la balise <style>

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide

[Dylav]

Tu veux dire que la question est toute simple : tu souhaites que cette page ne soit en tout et pour tout qu'une image s'adaptant à toute résolution d'écran. Sur cette image, le mot "entrer". Quand on clique sur ce mot, on enchaîne vers une autre page WEB.

 

La réponse la plus simple, c'est que ton image soit image de fond de la page, centrée dans la page.

Description : directement par le style du <body>

body {background: color url('URL-splash') no-repeat fixed center center;}

où color est la couleur de fond à affecter à l'écran, et URL-splash l'adresse de ton image splash.

Pourquoi une couleur de fond ? Parce que, pour les grandes résolutions d'écran, il y aura des marges libres autour de ton image (on ne peut pas exprimer de dimensions pour une image de fond, donc elle reste obligatoirement dans ses dimensions réelles, 600x500 pour ton exemple), et que tu ne souhaites peut-être que ces marges soient blanches (couleur par défaut).

Ensuite, le mot "entrer". Tu disais l'avoir intégré à ton "splash". Sors le "calque" de ta splash, pour en faire une image indépendante (transparente, en format GIF ou PNG). On la plaque par-dessus l'image de fond, comme si finalement on traitait ce "calque" en dehors de la splash.

 

Proposition de code complet de la page

<!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>Titre de ta page</title>
<style type="text/css">
body	{background: color url('URL-splash') no-repeat fixed center center;}
img	 {border:0;}
#entrer {top:50%;left:50%;}
</style>
</head>
<body>
<div id="entrer">
 <a href="URL-site-cible">
<img src="URL-entrer" alt="" />
 </a>
</div>
</body>
</html>

Dans les attributs du bloc "entrer" (#entrer dans la feuille de style), tu précises sa position (ici, son coin haut gauche est au centre de la fenêtre).

 

Nota : si la solution image de fond (de taille fixe) ne te convient pas, une autre solution pourrait être de créer dans la fenêtre un bloc de hauteur 100%, dans lequel tu inscris ton image avec une hauteur 100%*. Mais je crains qu'on ne puisse exprimer une hauteur de bloc en % de la hauteur de la fenêtre : à tester...

 

* compte tenu du fait que ton image est plus carrée que la fenêtre d'affichage, on ne peut hélas pas raisonner avec la largeur, on est obligé de passer par la hauteur.

 

Ai-je été plus clair ?

[Dic]

Ah c'est magnifique

 

Parfait je vais tester ça

 

Un grand merci a tous

 

@+

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide