fond de page

RENE ORIEUX · Message par **RENE ORIEUX** » 25 déc. 2007, 11:42

Bonjour,
Comme page d'accueil sur mon site j'utilise un fond de page pour laquelle j'ai mis une définition de 1024x766, et ma page index je l'ai mise à 958x715 afin que ce soit bien sur mon écran, mais quand je vais voir sur d'autres écrans dont la définition n'est pas la même je constate, soit un début de 2ème fond de page à droite de l'écran, cela pour les définitions plus grandes que la mienne ou, alors, une apparition partielle de mon fond de page quand la définition est plus petite.
Si quelqu'un avait une solution pour résoudre mon problème j'en serais ravi.

Pour voir la page : http://meteo.genetouze.neuf.fr/page2.html

Merci d'avance
René.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Message par **Ymai** » 25 déc. 2007, 14:53

Bonjour René
Le problème peut se résoudre assez simplement en utilisant un soupçon de CSS.
Dans la page, j'ai introduit un bloc nommé "conteneur".
A l'aide de l'éditeur CasCadeS (onglet "boîte"), je définis
- une largeur de 1024px pour ce bloc, la même largeur que l'image
- des marges "auto"
Dans l'onglet "Fond" du même éditeur "CasCadeS", je définis:
- image de fond: meteo.genetouze.jpg
- pas de répétition

Ce qui donne finalement le code suivant pour la page:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>tset</title>
  <style type="text/css">
#conteneur {
  margin: auto;
  background-repeat: no-repeat;
  width: 1024px;
}
  </style>
</head>
<body>
<div id="conteneur">
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
</div>
</body>
</html>

Il faut introduire assez bien de "bla bla" pour voir l'image apparaître dans son entier.
Un petit tour par la documentation pour apprendre les rudiments de CSS est peut-être nécessaire.
http://www.geckozone.org/forum/viewtopic.php?t=20704
Petit conseil gratuit pour la route: utiliser KompoZer plutôt que NVU.
http://www.geckozone.org/forum/viewtopic.php?t=51228 : plus de chance de voir le soleil...

[edit]a priori, pour les résolutions plus faibles, je pense qu'il faut envisager de réduire la taille de l'image et donc de l'objet "conteneur". Qui peut le moins peut le plus. [/edit]

RENE ORIEUX · Message par **RENE ORIEUX** » 26 déc. 2007, 09:22

Bonjour,
Merci d'abord de m'avoir répondu si rapidement.

Je suis désolé, j'ai essayé plusieurs modifs suite à votre message mais étant donné que je suis vraiment débutant ( il y a un mois je n'avais encore pas ouvert NVU ), et pourtant je voudrais bien régler ce problème afin de faire taire les mauvaises langues.
Alors je me permet de vous envoyer le source de ma page et que peut-être auriez-vous la gentillesse et la possibilité de modifier le source.

Merci d'avance et bonne jounée.

René

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>page2</title>
</head>
<body
 style="margin-top: 0px; height: 715px; margin-left: 48px; width: 958px;"
 background="img/meteo.genetouze.jpg">
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
<img src="img/%21cid_004001c8441f$793572c0$1402a8c0@atlantis.gif"
 alt="" height="63" width="70">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<small><br>
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</small><small>&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</small>&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<table align="center" border="4" cellpadding="2"
 cellspacing="2" height="66" width="500">
  <tbody>
    <tr>
      <td align="center" height="2" valign="middle"
 width="141"><a target="_self" href="instrum.html">Les
Instruments</a><br>
      </td>
      <td align="center" height="2" valign="middle"
 width="141"><a target="_self" href="current.html">M&eacute;t&eacute;o
Actuelle</a></td>
      <td align="center" bgcolor="#ffffff" height="2"
 valign="middle" width="141"><a target="_self"
 href="climato.html">Climatologie</a></td>
    </tr>
    <tr>
      <td align="center" height="2" valign="middle"
 width="141"><a target="_self"
 href="liens_meteo.html">Liens M&eacute;t&eacute;o</a></td>
      <td align="center" height="2" valign="middle"
 width="141"><a target="_self"
 href="materiel_meteo.html">Stations
M&eacute;t&eacute;o</a></td>
      <td align="center" bgcolor="#ffffff" height="2"
 valign="undefined" width="141"><a target="_self"
 href="genetou.html">Gen&eacute;touze</a><br>
      </td>
    </tr>
  </tbody>
</table>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; <img
 src="img/%21cid_004101c8441f$793572c0$1402a8c0@atlantis.gif"
 alt="" height="91" width="99">&nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;&nbsp;<br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Message par **Ymai** » 26 déc. 2007, 09:43

Bonjour René
Tout à fait exceptionnellement et à titre promotionnel, voici ma solution complète:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>page2</title>
  <style type="text/css">
#conteneur {
  background-repeat: no-repeat;
  width: 1024px;
  background-image: url(img/meteo.genetouze.jpg);
  margin: 0 auto;
}
  </style>
</head>
<body>
<div id="conteneur">
<br />
<br />
<br />
<img src="img/%21cid_004001c8441f$793572c0$1402a8c0@atlantis.gif" alt=""
 height="63" width="70">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<small><br>
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</small><small>&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</small>&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<table align="center" border="4" cellpadding="2" cellspacing="2"
 height="66" width="500">
  <tbody>
    <tr>
      <td align="center" height="2" valign="middle" width="141"><a
  href="instrum.html">Les
Instruments</a><br>
      </td>
      <td align="center" height="2" valign="middle" width="141"><a
  href="current.html">Météo
Actuelle</a></td>
      <td align="center" bgcolor="#ffffff" height="2" valign="middle"
 width="141"><a href="climato.html">Climatologie</a></td>
    </tr>
    <tr>
      <td align="center" height="2" valign="middle" width="141"><a
  href="liens_meteo.html">Liens Météo</a></td>
      <td align="center" height="2" valign="middle" width="141"><a
  href="materiel_meteo.html">Stations
Météo</a></td>
      <td align="center" bgcolor="#ffffff" height="2" 
 width="141"><a  href="genetou.html">Genétouze</a><br>
      </td>
    </tr>
  </tbody>
</table>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; <img
 src="img/%21cid_004101c8441f$793572c0$1402a8c0@atlantis.gif" alt=""
 height="91" width="99">
 </div>
</body>
</html>

L'éditeur CasCadeS m'a permis de rajouter, de manière tout à fait transparente, le fragment de code:

Code : Tout sélectionner

  <style type="text/css">
#conteneur {
  background-repeat: no-repeat;
  width: 1024px;
  background-image: url(img/meteo.genetouze.jpg);
  margin: 0 auto;
}
  </style>

dans l'entête de la page.
Ensuite, j'ai mis l'ensemble du texte qui forme le corps de la page en sandwich entre les balises
<div id="conteneur"> ... et </div>
de manière à définir un bloc dont les caractéristiques de "mise en forme" sont données dans les quelques instructions CSS ci-dessus.

Mes autres recommandations restent plus que jamais valables.

Un petit tour par la documentation pour apprendre les rudiments de CSS est peut-être nécessaire.
http://www.geckozone.org/forum/viewtopic.php?t=20704
Petit conseil gratuit pour la route: utiliser KompoZer plutôt que NVU.
http://www.geckozone.org/forum/viewtopic.php?t=51228 : plus de chance de voir le soleil...

Invité · Message par **Invité** » 26 déc. 2007, 17:51

Re-Bonjour

Cela me fait vraiment plaisir de voir qu'il y a encore des gens vraiment sympa.

J'ai publié votre source sur mon site, et c'est un réel succès.

J'ai fait le test en plusieurs définitions et cela marche très bien.

Alors bravo et encore un grand merci.

René.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Message par **chinon37** » 26 déc. 2007, 18:20

Bonjour,

Un petit conseil en passant: mettre sur chaque page un bouton pour revenir à l'accueil ou mettre le menu sur toutes les pages.
En effet, dès qu'on clique sur un lien, la nouvelle page ne permet plus d'avancer dans le site

Invité · Message par **Invité** » 28 déc. 2007, 21:04

boujour
ou est l'onglet boite.
merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Win98; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Beasm · Message par **Beasm** » 15 janv. 2008, 21:57

Tout d'abord bonjour à tous!

Je suis une nouvelle recrue qui bien sur a des problèmes! sinon je voudrais dire que kompozer est très bien fait par rapport à certains programmes de création de site!

mon problème concerne aussi les fonds mais pas le fond de page!
en fait pour ma page d'accueil (et pour les autres pages d'ailleurs) j'ai divisé la page en 4id (entete, menu, texte et pied).

pour l'en-tête, le menu et le pied de page je voudrais mettre un fond image.
ce que j'ai fait à partir des CSS.
Seulement dans komposer ça passe très bien mais une fois mis en ligne les fonds ont disparu.

voilà l'adresse de mon site http://users.tvcablenet.be/personal/tvcn14783/
il faut d'abord entrer pour avoir la page d'accueil! mon site est loin d'être fini mais j'aimerais faire une page modèle pour ne plus à devoir refaire toute la mise en page! mais j'aimerais d'abord que ça fonctionne comme je voudrais!

J'ai mis une photo de la page telle que je la voudrais dans le site!

merci beaucoup d'avance

Par la même occasion avait vous des problèmes avec mon site au niveau de la présentation suivant votre résolution (parce que j'ai un écran assez large donc pas de problème chez moi et je ne connais pas les dimensions standard)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.11) Gecko/20071127 Dealio Toolbar 3.1 Firefox/2.0.0.11

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 janv. 2008, 23:31

Trop large ton site... fixe une limite de 800 à 1024 max !

Message par **Ymai** » 15 janv. 2008, 23:50

Bonjour

Beasm a écrit :pour l'en-tête, le menu et le pied de page je voudrais mettre un fond image.
ce que j'ai fait à partir des CSS.
Seulement dans komposer ça passe très bien mais une fois mis en ligne les fonds ont disparu.

Le problème est le suivant:

Code : Tout sélectionner

background-image: url(file:///L:/Monsite/fondcadre.bmp);

L'image de fond est définie sur le disque L: qui n'existe bien sûr pas sur un autre ordinateur. Donc, l'image n'est pas accessible.
Il faut donc relativiser les adresses. Sans doute simplement

Code : Tout sélectionner

background-image: url(fondcadre.bmp);

et idem pour les autres images de fond.

Une remarque toutefois: les images .bmp sont très lourdes et pas obligatoirement reconnues par les navigateurs. Il vaudrait mieux les transformer en .jpg (s'il s'agit de photos) ou (.gif ou .png) s'il s'agit de dessins.
Attention aussi à ne pas alourdir la mise en page...

Beasm · Message par **Beasm** » 16 janv. 2008, 18:59

Je vous remercie pour vos conseils!
Je vais essayer ça tout de suite!

Je me doutais un peu que mon site était trop large mais faut dire que mon écran fait 1650px de large alors j'ai un peu du mal à juger.

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.11) Gecko/20071127 Dealio Toolbar 3.1 Firefox/2.0.0.11

PS: j'ai essayé, même en changeant l'url des images, ça ne fonctionnait pas! en fait le gros problème c'est que lorsqu'on publie avec komposer, il ne télécharge pas les images de fond intégrer avec le CSS!

Message par **Ymai** » 17 janv. 2008, 00:01

Beasm a écrit :PS: j'ai essayé, même en changeant l'url des images, ça ne fonctionnait pas! en fait le gros problème c'est que lorsqu'on publie avec komposer, il ne télécharge pas les images de fond intégrer avec le CSS!

Ce serait donc un deuxième problème. Car le premier est avéré.
En fait, il ne faut pas utiliser KpZ pour publier un site: cette fonction est vraiment déficiente. Le mieux est d'utiliser un vrai logiciel de FTP.

Message par **chinon37** » 17 janv. 2008, 08:57

En vrai logiciel de ftp, on peut citer Filezilla, que même un enfant de 5 ans et demi saurait utiliser.

Mongo Bob · Message par **Mongo Bob** » 17 janv. 2008, 09:33

Beasm a écrit :Je me doutais un peu que mon site était trop large mais faut dire que mon écran fait 1650px de large alors j'ai un peu du mal à juger.

Hello. Pour n'avoir aucun mal à juger, il te faut utiliser le navigateur Firefox muni de l'extension Webdeveloper, qui te permettra, entre autres, de tester ton site sous différentes définitions d'écran : 800x600, 1024x768 jusqu'à 1920x1200, si tu veux...
http://www.geckozone.org/telechargement/
http://joliclic.free.fr/mozilla/webdeveloper/
à+...

Beasm · Message par **Beasm** » 17 janv. 2008, 19:49

Merci pour tous vos conseils que je vais suivre très attentivement.

Il me reste juste un problème! Tout le monde n'utilise malheureusement pas mozilla firefox! et oui il y a encore de grand adèpte d'internet explorer!

Quand j'ouvre mon site sur explorer, mon cadre de texte se retrouve en dessous du menu

Or les codes sont les mêmes!!!

http://users.tvcablenet.be/personal/tvc ... cueil.html

Merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.11) Gecko/20071127 Dealio Toolbar 3.1 Firefox/2.0.0.11

Geckozone

fond de page

fond de page

fond id

Re: fond id

Qui est en ligne ?