Discussion :

[Sophie2097]

Bonjour à tous,

Voilà mon petit soucis. Je suis en train de contruire un site et j'aimerais envelloper tout son contenu dans un cadre que je créerais sans doute en photoshop.

Quelqu'un aurait-il une suggestion intêressante? car je ne vois pas comment je pourrais procéder pour intégrer le site dans ce fameu cadre?

[mussara]

je ne comprends pas trop ta demande

tu veux dessiner un cadre sous photoshop, transformer ce cadre en jpg et ensuite l'utiliser en fond de ton site pour que tout tienne dedans?

[Sophie2097]

Oui par exemple, je n'ai pas de méthode de prédilection, toute proposition est la bienvenue car je suis un peu perdue...

[mussara]

je te conseille alors ce tutorial qui t'expliquera les bases de l'utilisation des feuilles de style

le principe pour ce que tu souhaites faire est de ne pas utiliser photoshop:

tu crées une feuille de style qui va te définir des calques:
et tu vas en avoir un, principal, qui va contenir et ta couleur de fond et ta bordure dimensionnée par une largeur et une hauteur

quelque chose du genre:

Code :

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

1
2
3
4
5
6
.ma_pagination {
	height:600px;
	width:800px;
	background-color:#FF0000;
	border: #bcc2fc double 5px;
}

et tu appelles ce style dans ta page html

tu verras que tu auras ton fond coloré, avec une bordure tout autour

voila

[Sophie2097]

ok je vais tester. merci beaucoup.

Mon idée d'origine était en fait de créer un cadre de ce genre :

http://www.lesgenetshotel.com/info.php

comment est-ce réalisable?

[mussara]

de la même manière sauf que tu crées du coup ton image sous photoshop (avec les cadres et tous les éléments de style que tu souhaites) et tu l'appelles comme cela:

Code :

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

1
2
3
.ma_pagination {
	background-image:mon_image.jpg;
}

regarde bien les tutoriaux au niveau des feuilles de style css, car ensuite une fois que ton image de fond est affichée tu pourras lui spécifier d'acrire par exemple le menu à tel endroit, le centre de la page à tel autre etc... etc...

[pclover]

Je me suis toujours demandée comment rendre une image extensible dynamiquement pour s'adapter au contenu d'une page web. J'ai contourné le problème en définissant moi même la taille de mon cadre. Mais il faut dire que je connaissais à l'avance les dimensions de ma fenêtre.
Que faire si la taille de la fenêtre doit changer souvent???

[defcon_suny]

Une technique simple.

Dessiné le cadre sous photoshop ou autre.
Ensuite, une découpe s'impose.
Le cadre est divisé en neuf morceaux :
- coin supérieur gauche, image horizontale centrale, coin supérieur droit.
- image verticale gauche, contenu du cadre, image verticale droite
- coin inférieur gauche, image horizontale centrale, coin inférieur gauche.

Ensuite tout se joue avec les div et css.
Les div contiennent les différentes images en background. les coins doivent être fixe et pour le reste on applique les propriétés background-repeat des css.
Ainsi, si le contenu du site change les bordures s'adaptent.

Cherche dans cette voie...

++