Aller au contenu

HTML et fond de page

Saba

Par Saba
dans (X)HTML et CSS

 Partager

Sujets conseillés

Saba

Saba

Posté
Posté

Bonjour tout le monde,

Je commence tout juste dans la création de site avec Bloc Note, et j'ai déjà fait plusieurs pages, mais y'a une seule chose qui me bloque :

- J'ai fais un fond sur photoshop, que j'ai mis en jpeg, je voudrais que ce fond apparaisse sur toutes mes pages, mais ça ne marche pas ... il n'apparaît pas, ni de petite croix, rien du tout.

voici la balise que j'utilise :

<body background="fond.jpeg" style="background-attachment:fixed;"> </body>

Merci de m'aider.

Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté (modifié)

Bonjour,

Il serait plus pratique d'utiliser directement les feuilles de style CSS.

Voilà comment celà marche :

Tout d'abord il faudrait créer un fichier ayant comme extension *.css comme par exemple style.css

Le contenu du fichier style.css :

body{
background: url('fond.jpg') fixed;
}

Il suffit maintenant d'appeler sur la page .html le style CSS à l'aide de la méthode suivante :

<link href="style.css" rel="stylesheet" type="text/css" />

A placer entre les balises <head> et </head>

L'on utilise plus tellement la mise en forme directement dans la structure HTML, il est préférable de passer par cette solution.

L'extension de l'image ne serait-elle pas *.jpg ?

Cordialement,

Mikiman

Modifié par Mikiman
Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté (modifié)

Merci.

Je n'avais jamais appris à travailler avec les feuilles de style CSS ... au moins là je sais comment cela fonctionne! Je vais tenter et je vous tiens au courant!

Ps : j'ai également essayé avec fond.jpg, ça ne marchait pas pour autant.

Merci bcp ;)

sinon qu'elle est la différence entre HTML et XHTML ? :blush:

Modifié par Saba
Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté (modifié)

Le fait de passer par une feuille de style pour la mise en page d'un page web est dans la logique du xHtml.

L'on passe en HTML la mise en page directement dans la structure du code HTML alors qu'en xHtml ces deux éléments sont séparés.

HTML

- Code HTML avec mise en page

xHTML

- Code HTML (Structure de la page)

- Style CSS (Mise en page)

Voici un article intéressant sur les différences entre xHTML et HTML :

Différences HTML / xHTML

Cordialement,

Mikiman

Modifié par Mikiman
Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté (modifié)

EDIT : bon bah non, ça ne fonctionne pas non plus ...

Je comprend vraiment pas! :blush:

merci pour l'éxplication du HTML et XHTML

Modifié par Saba
Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté
L'image de fond se trouve-t'elle bien dans le même dossier que la page web ?

Oui parfaitement!

L'extension de l'image est-elle bien la même que celle précisé dans le style CSS ?

Oui, l'image s'appelle fond.jpg

la feuille de style fond.css

c'est bien ce que j'ai mis :wacko:

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté

Voici les codes de début de ma page :

<html>

<head>

<link href="fond.css" rel="stylesheet" type="text/css" />

</head>

<title>

Be Com' - Com' and Be

</title>

et voici ma feuille de style :

body{

background: url('fond.jpg') fixed;

}

:wacko:

Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté

Essaie voir avec ces informations :

Page HTML :

<!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>
<title>Be Com' - Com' and Be</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="fond.css" rel="stylesheet" type="text/css" />
</head>

<body>
texte
</body>
</html>

fond.css :

body{
background: url('fond.jpg') fixed;
}

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté
En essayant avec une autre image peut-être ?

Ah ouais, avec une autre photo ça marche :(

c'est bizarre quand même...

Du coup je recommence mon fond de page, je fais quoi ?

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté
L'image de fond précédente est peut-être vide ?

Il faut de toute manière refaire l'image de fond ;)

Cordialement,

Mikiman

Je viens de totalement le refaire, marche pas non plus.

Quelles sont les règles à respecter, en terme de photo, pour que le fond fonctionne?

parce que la je comprend plus rien, et je vais pas m'amuser à refaire mon fond 25 fois là !

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté
Normalement cela devrait fonctionner avec tous types d'images / photos.

Avec quel logiciel l'image est modifiée ?

L'image a été faîte sur photoshop,

après j'ai fais enregistrez-sous Jpeg

Je vous l'envoie ;)

Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté

J'ai donc regardé l'image et compris d'où venait le problème.

Etant donné que votre image est de très grand résolution, la compression au format jpeg utilise beaucoup de mémoire et peut provoquer des erreurs dans le fichier généré (Ce que préviens Photoshop avant la mise en Jpeg).

J'ai essayé d'utiliser l'image que j'ai généré dans un background, cela fonctionne sans problème.

Je vous ai envoyé l'image par MP.

Cordialement,

Mikiman

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté
J'ai donc regardé l'image et compris d'où venait le problème.

Etant donné que votre image est de très grand résolution, la compression au format jpeg utilise beaucoup de mémoire et peut provoquer des erreurs dans le fichier généré (Ce que préviens Photoshop avant la mise en Jpeg).

J'ai essayé d'utiliser l'image que j'ai généré dans un background, cela fonctionne sans problème.

Je vous ai envoyé l'image par MP.

Cordialement,

Mikiman

J'y avais pensé aussi, que c'est un peu lourd, vu que l'image est grande etc ...

Merci bcp d'avoir pris le temps de m'aider. Je vais enfin pouvoir la mettre.

Une dernière question (si je suis chiante faut me le dire) :

Je veux que l'image envoyée, prenne vraiment toute la place du site, c'est quoi les dimensions à mettre ?

Merciiiii

Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté

Le problème avec cette image de fond est qu'elle mesure 2480 x 3508 qui est donc un format très grand.

Pour pouvoir mettre le design entièrement dans une page il faudrait la redimensioner puis la découper pour placer les parties coupées dans une structure de site.

Cordialement,

Mikiman

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté (modifié)

Oui mais la redimensionner à combien ?

qu'elle est la taille en cm ou mm à mettre ?

à moins qu'il faut que je fasse ça :

<link href="style.css" rel="stylesheet" type="text/css" height="50%" width="50%" />

non?

ça ne fonctionne pas, mais je dois faire une erreur

Modifié par Saba
Lien vers le commentaire
Partager sur d’autres sites
Mikiman

Mikiman

Posté
Posté (modifié)

Cela dépend de votre choix. Votre design peut être développé de façon à être extensible.

Les éléments sont trop gros pour entrer dans une page.

Si vous redimensionnez votre design à 1024 en largeur et 1449 en hauteur, il devient possible à être mis en structure de site extensible.

(Sous Photoshop : Image > Taille de l'image)

<link href="style.css" rel="stylesheet" type="text/css" height="50%" width="50%" />

Cela ne marchera pas de cette façon :)

Au passage, voici des statistiques de taille et résolutions d'écrans :

Taille et résolution d'écran

Cordialement,

Mikiman

Modifié par Mikiman
Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut

Le fait de passer par une feuille de style pour la mise en page d'un page web est dans la logique du xHtml.

L'on passe en HTML la mise en page directement dans la structure du code HTML alors qu'en xHtml ces deux éléments sont séparés.

HTML

- Code HTML avec mise en page

xHTML

- Code HTML (Structure de la page)

- Style CSS (Mise en page)

Mikiman, tes messages sur ce topic sont pertinents et bourrés de bons conseils, mais celui-ci est parfaitement faux, désolé ;)

Il est tout à fait possible de faire de l'HTML non-présentatif, avec toute la mise en page déléguée à la feuille CSS, et avec des balises sémantiques.

Il est aussi possible (et déconseillé) de faire de l'XHTML avec des attributs présentatifs tels que "bgcolor", sans CSS, et en tableaux ;)

À ce propos, rappelons que la norme stricte de l'HTML 4.01 est "au dessus" de la norme transitionelle de l'XHTML 1.0 :!:

D'ailleurs, je préfère écrire mes pages en HTML strict (sémantique, et avec CSS) qu'en XHTML, si le choix de l'XHTML n'est pas obligatoire :)

Et pour finir, un peu de lecture:

Le XHTML n'est pas le CSS sur Alsacréations (ça date de 2004, preuve que l'amalgame est tenace)

Arrêtons de confondre XHTML et CSS sur le même site récemment, en guise de piqûre de rappel.

Laisser tomber le XHTML ? toujours chez Alsacréations, décidemment. Une méditation sur l'emploi d'un HTML sémantique et bien structuré.

En fait, la vraie différence qu'apporte l'XHTML par rapport à l'HTML, c'est la facilité qu'on a à pouvoir le parser, cf. les normes XSLT et XML qui sont parties liées avec l'emploi de l'XHTML.

Je veux que l'image envoyée, prenne vraiment toute la place du site, c'est quoi les dimensions à mettre ?
C'est un problème connu dont la solution n'existe malheureusement pas encore: une image servant de fond à une page ne peut pas s'étirer avec la page: les dimensions de l'image resteront toujours fixes.

La solution consiste à créer une image qui sera visible sur toutes les résolutions, en particulier les plus petites. Et de "compléter" avec un fond uni pour les résolutions plus grandes. C'est la solution qui donne les meilleurs résultats pour l'instant.

Lien vers le commentaire
Partager sur d’autres sites
Saba

Saba

Posté
  • Auteur
Posté

Merci pour la rectification, et je me joins à toi pour dire que Mikiman est de très bon conseil.

Par contre j'ai pas tout compris, mais c'est pas grave !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...