Discussion :

[Vinceee38]

Bonjour à tous,

J'ai vraiment besoin de votre aide, je rame vraiment ...

J'ai crée un skin avec photoshop pour faire un site simple en HTML, seulement voila, comment je fais pour pouvoir integrer une zone de texte ou inserer des images dans mon site par dessus l'image ????

Je suis bloqué ... j'ai essayé de découper en plusieurs images , mais quand j'integre du texte ou image ca décalle tout ... Help meeee

[lelapinou]

tu dois utiliser la propriété bakround de ton <TD>.
là la génération de ta page avec photoshop t'a créé des<TD><img></td>
hé bien maintenant situ veux mettre du texte sur ton image ou ajouter tout autre chose tu dois le transformer comme ceci: <td background="images/[nomdeimage]">tontexte</td>
Enfat tu dois faire disparaitre la balise image.

@plouch

[chaminette]

Sinon tu peux mettre une feuille de style dans laquelle tu spécifies que l'arrière plan de ton 'body' ou ta 'table' est l'image en question !
Après tu fais ton site normalement

[lelapinou]

Sinon tu peux mettre une feuille de style dans laquelle tu spécifies que l'arrière plan de ton 'body' ou ta 'table' est l'image en question !
Après tu fais ton site normalement

C'est effectivement plus propre, mais ça demande un peu de rigueur.

[trotters213]

Sinon tu peux mettre une feuille de style dans laquelle tu spécifies que l'arrière plan de ton 'body' ou ta 'table' est l'image en question !
Après tu fais ton site normalement

De très loin une meilleure solution que celle énoncée juste avant.
PS : on ne fait pas design avec les tableaux, ils ne sont pas fait pour ça.

[Vinceee38]

Merci bcp de vos réponses, quand vous parlez de fueille de style vous parlez de CSS c'est bien ca ??

Si oui comment fixer l'image en arriere plan ?? merci d'avance ..

[trotters213]

quand vous parlez de fueille de style vous parlez de CSS c'est bien ca ??

Oui.

Si oui comment fixer l'image en arriere plan ??

background-attachment:fixed; dans ton CSS

[chaminette]

ou alors faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body {
background:url (bla.gif);
}

[Vinceee38]

Merci bcp pour vos réponses, ca marche trés bien, seulement l'image est coupé en bas , elle fait pile la taille de la fenêtre du navigateur alors qu'elle est plus grande normalement... si vous avez une solution ...

Sinon une petite question , j'ai essayé de découper mon image en plusieurs parties afin de les séparer, j'aurais voulu savoir si il etait possible de choisir une image et de la définir en tant que zone de texte ou on afficherait le contenu du site .... j'espere que je suis assez claire



Merci d'avance

[Nadjia.ccce]

Merci bcp pour vos réponses, ca marche trés bien, seulement l'image est coupé en bas , elle fait pile la taille de la fenêtre du navigateur alors qu'elle est plus grande normalement... si vous avez une solution ...

Sinon une petite question , j'ai essayé de découper mon image en plusieurs parties afin de les séparer, j'aurais voulu savoir si il était possible de choisir une image et de la définir en tant que zone de texte ou on afficherait le contenu du site .... j'espère que je suis assez claire
Merci d'avance

Salut !
je pense que les précédente réponses on était tres claire. car si tu souhaite mettre le contenu de ton site sous une image (ons appelle cela background quand il s'agit d'une image arrière plan et "bgcolor" pour une couleur arrière plan) alors la tu va dans: propriété de ta page et tu fait appel a ton image que tu veux mettre ou tu crée une class css pour ton body ou tu définie ce qui viens être dit .
Vue que l'image est en 'background"(arrière plan) tu peu facilement charger ton contenue sur ta page ..
Et pour l'image qui s'affiche qu'une partie ca ne doit être que une erreur sur ton code HTML.
@+

[Vinceee38]

Une erreur de mon code HTML ???

jvois pas ou y peut y avoir des erreurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
<!-- 
BODY { 
  background-image: url("images/fond.jpg");
  background-repeat: repeat-y;
  background-position: top center; 
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 150px;
  
} 
-->
</style>

Je comprend toujours pas pourquoi l'image se coupe.

Comment on pourrait définir la taille de l'image d'origine en background ???

[trotters213]

Quand tu dis qu'elle fait pile la taille, c'est à dire qu'elle rentre parfaitement dans la page alors qu'elle devrait dépasser (donc qu'elle est réduite) ou alors qu'elle est coupé en bas et que justement elle est trop grande pour rentrer et qu'elle est coupé (comme si tu était sur ton bureau windows et que tu utilisais une image plus grande que ta résolution) ?
Si c'est le 1° cas, c'est normal, si c'est le second c'est pas normal.

[Vinceee38]

merci de m'aider trotters213

En fait elle est trop grande et est coupé en bas... je voudrais juste que la page web fasse la taille de l'image entiere meme si il faut descendre pour voir en bas.

J'ai été assez claire ??

[trotters213]

A part en mettant la hauteur en dur dans le CSS je ne vois pas trop comment tu vas pouvoir faire. Si ton image fait 1500px de haut

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
body { 
  background:url("ton_image.jpg") repeat-y top center;
  margin:150px 200px 0 300px;
  height:1500px;
}

Il y a peut-être des fonctions Javascript qui te permettent de récupérer cet hauteur mais je te laisse chercher

[chaminette]

En effet, a partir du moment ou tu mets l'image en background de ton body !
elle n'est plus considérée comme un 'objet' a afficher donc ses dimensions ne sont pas prises en compte ! Donc la partie affichée correspond en fait à la taille de 'body' !!!
En ce qui concerne fixer la taille en dur de ton body !! je ne sais pas trop !!!! ça paraît bizare parceque je ne sais pas ce qui va se passer si le contenu dépasse la taille de l'image !!!! a part si tu mets un attribut dans 'background' qui permette la répétition de l'image dans le cas ou ton contenu dépasse !!
ça devrait fonner quelque chose de ce genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 background:url(image.gif) repeat-x bottom;

Bon courage

[trotters213]

En ce qui concerne fixer la taille en dur de ton body !! je ne sais pas trop !!!! ça paraît bizare parceque je ne sais pas ce qui va se passer si le contenu dépasse la taille de l'image !!!!

Il va y avoir une scrollbar et son image sera forcément dupliqué verticalement à moins qu'elle(je crois pas me trompé en disant elle ) utilise la propriété background-attachment:fixed et dans ce cas le fond d'écran sera, comme son nom l'indique, fixé.

[Vinceee38]

Merci pour vos réponses c'est vraiment parfait , j'ai utilisé la technique de trotters213

Ca marche nikel
Par contre je pense juste à un autre probleme maintenant le contenu de mon site ne doit pas depasser la taille de mon image ??

A moins qu'il existe je suppose une méthode pour faire répéter des morceaux d'images pour pouvoir étendre le contenu ??

Vous me comprenez lol ??

[trotters213]

Par contre je pense juste à un autre probleme maintenant le contenu de mon site ne doit pas depasser la taille de mon image ??

A moins qu'il existe je suppose une méthode pour faire répéter des morceaux d'images pour pouvoir étendre le contenu ??

Vous me comprenez lol ??

C'est exactement ce que je dis dans le post ci-dessus : si ton contenu dépasse la page tu auras une scrollbar automatiquement.
Pour ce qui est du background, tu as 2 possibilités :

• soit tu le fixe (background-attachment:fixed et dans ce cas là il ne bougera pas avec la scrollbar, seul le contenu bougera
• soit tu le laisse tel quel et alors là il se dupliquera verticalement et automatiquement