Page 1 sur 1

[FINI] Page Web avec Komposer > créer par dessus une ima

Publié : 20 mai 2007, 16:55
par Tmetha
Je travail sur Kompozer et je débute.

1) Je voudrais simplement avoir une image en fond, qui prenne tout l'écran des visiteurs et mettre par dessus des boutons ou des liens à divers endroits de l'image.

J'ai bien créé ma page et inséré mon image aux dimensions 100% sur 100%
Mais j'ignore comment insérer des éléments par dessus.

Ce serait des mots commes liens ou diaporama, linkés vers les pages correspondantes.

J'ai aussi essayé en créant un style css, j'y est mis l'image, j'ai tout régélé, ... mais rien n'apparaît sur ma page

2) Je n'arrive pas a modifier les textes liés. Ils sont bleu et soulignés quoi qu'il arrive


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 02:12
par myahoo
Pourrait-on avoir l'adresse de ta page Web, histoire de facilement deviner / trouver d'où vient le problème ? :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 02:19
par chinon37
Pour écrire sur une image, il faut que celle-ci soit en background (fond)
Format > couleur et fond de page > image de fond > clic sur l'icône de dossier pour chercher l'image. vérifier que l'image est bien dans le même dossier que la page html et que l'adresse est relative. Si l'adresse est absolue (chemin complet) vérifier qu'elle ne pointe pas vers le disque dur.

Publié : 21 mai 2007, 13:34
par Tmetha
Je n'ai pas encore l'hébergement pour l'instant je crer les pages avec Komposer.
chinon37 a écrit :Pour écrire sur une image, il faut que celle-ci soit en background (fond)
Format > couleur et fond de page > image de fond > clic sur l'icône de dossier pour chercher l'image. vérifier que l'image est bien dans le même dossier que la page html et que l'adresse est relative. Si l'adresse est absolue (chemin complet) vérifier qu'elle ne pointe pas vers le disque dur.
J'ai fais ca et ca fonctionne

Merci
Par contre il serait possible de redimenntionner toute la page pour qu'elle ne soi dimentionner qu'a 100% des dimension du navigateur ?

surtout que la quand je fai un apercu dand le navigateur j'ai que le coin haut gauche de l'image et je ne peux pas aller a droite ou a gauche.

Je veux l'image en pleine page avec mes liens dessus

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 16:12
par chinon37
Sauf erreur, une image de fond ne peut pas être redimensionnée: elle s'affiche selon la taille du fichier image.
Par contre, elle peut être répétée en vertical ou en horizontal et elle peut être centrée sur la page.

Publié : 21 mai 2007, 16:22
par myahoo
Autant utiliser une petite feuille de style (CSS) pour détecter la résolution des visiteurs, et leur fournir une image de fond en fonction de ça :P

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 17:35
par Tmetha
ouaou myahoo j'aime bien ton idée ...

Mais heu ... je peux savoir comment tu t'y prends ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 19:45
par myahoo
Des solutions CSS yanna plusieurs, c'est certain ; le mieux à ce sujet serait de passer voir les gentils d'Alsacréations.

Sinon, on peut y aller méchamment en mettant ce script dans le code source de la page…

Code : Tout sélectionner

<script language="JavaScript">
   function retailler(x,y) { self.resizeTo(x,y); }
   if (screen.width <= 800) { fichier = '800.css' ; } 
      else if (screen.width <= 1024) { fichier = '1024.css'; } 
   if (screen.width > 1024) { fichier = '1280.css'; } 
   document.write('<link href="'+ fichier + '" rel="stylesheet" type="text/css">'); 
</script>
… et se faire les quatre minuscules CSS (800.css, 1024.css…) contenant chacun un code de ce genre :

Code : Tout sélectionner

body {background-image:url("nomdelimagedefond800.jpg");}
Ils feront chacun appel à l'image de fond qu'il faut pour ce format-là.

Mais à tous les coups il y a mieux que ça :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 21 mai 2007, 23:34
par Tmetha
j'ai pas du enter les codes comme il fallait car ca ne change rien. Je doi redimensionner l'image manuellement et elle ne s'adapte pas a mon navigateur

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 22 mai 2007, 00:53
par myahoo
(Au temps pour moi, tu peux supprimer la deuxième ligne, celle de la fonction "retailler", elle n'a rien à voir)

Reprenons.

Le premier code (le JavaScript) est à mettre dans le fichier HTM ou HTML de la page où sera l'arrière plan.
C'est à mettre avant la balise </head>, ou éventuellement entre les deux balises <script language="JavaScript"> / </script> si elles existent déjà.
C'est donc bien ce code :

Code : Tout sélectionner

<script language="JavaScript">
   if (screen.width <= 800) { fichier = '800.css' ; }
      else if (screen.width <= 1024) { fichier = '1024.css'; }
   if (screen.width > 1024) { fichier = '1280.css'; }
   document.write('<link href="'+ fichier + '" rel="stylesheet" type="text/css">');
</script>
Ensuite, il faut des couples de fichiers : pour chacune des tailles d'écran, il y a une image et un fichier CSS associé.
Dans l'exemple donné, pour le 800 x 600, il y aura l'image nomdelimagedefond800.jpg et le fichier 800.css.
Ce CSS contiendra la commande et l'adresse de l'image :

Code : Tout sélectionner

body {background-image:url("nomdelimagedefond800.jpg");}
Mais pour ce que j'ai dit il s'agit d'une détection de la résolution d'écran du visiteur, et donc la désignation de l'image de fond lui correspondant.
Comme disait chinon37, il doit être impossible (ou sinon très ralentissant) d'avoir une image s'ajustant à la taille de la fenêtre.

Le plus rentable serait de mettre un dégradé et ou une douce image répétée en boucle sur toute la page…

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 22 mai 2007, 19:14
par Tmetha
bon je laisse tomber je ferais avec ce qu'il y aurra merci beacoup pour vos réponse mais les codes et le css c'est trop compliqué pour moi.

Merci a vous aurevoir

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Publié : 23 mai 2007, 03:33
par myahoo
Tmetha a écrit :bon je laisse tomber je ferais avec ce qu'il y aurra merci beacoup pour vos réponse mais les codes et le css c'est trop compliqué pour moi.
Au cas où, quand même :
myahoo a écrit :Des solutions CSS yanna plusieurs, c'est certain ; le mieux à ce sujet serait de passer voir les gentils d'Alsacréations.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3