Bordure

Bonjour!

J'ai utilisé le gabarit de mise en page 9- Largeur fixe (750px), header / menu haut / menu gauche / menu droite / contenu / footer du site d'Alsacréation.

Dans mon design j'aimerai rajouter des bordures de chaque côté du site (soit à gauche de "menu gauche" et à droite de "menu droite").

Il s'agit d'une image jpg que j'ai créee. Par contre elle doit avoir une taille variable pour suivre la taille du bloc contenu (qui sera probablement variable).

Comment-dois-je m'y prendre?

Faut-il rajouter des conteneurs à gauche et à droite?

Dois-je créer une image de 2*5 pixels par exemple et la mettre en background avec la fonction repeat?

En fait c'est un peu le même probleme que de mettre une ombre de chaque côté.

Voila .

Merci d'avance.

Et une image de 750px de large répétée en hauteur sur tout ton conteneur global, par exemple?

Merci Florent,mais je ne pense pas que ce soit la solution.

Il s'agit de bordures à droite et à gauche du site, d'une largeur de 5 px chacune environ.

Il ne s'agit pas d'une image de 750 px.

Je voudrais que ces bordures servent de cadre, mais je ne sais pas si je dois rajouter 2 blocs à gauche et à droite de ma structure initiale et les remplir d'une image de 5px de large sur 2 px de hauteur pour s'adapter aux variations de longueur du contenu.

Quelle est la solution?

numero7 a écrit :
Il s'agit de bordures à droite et à gauche du site, d'une largeur de 5 px chacune environ.

Ce qui se fait très bien avec une image de la largeur de ton bloc de contenu principal (bordures de droite et de gauche comprises) répétée sur toute la hauteur du conteneur principal.

Bien sûr, si la largeur du conteneur principal est fluide il faudra sans doute ruser un peu. Je n'en dis pas plus sans avoir une idée plus précise (image, infos...) du design à intégrer, sinon je risque de parler dans le vide.

Merci Florent!

Je n'avais pas compris ta solution.

ça marche à peu près, car en fait ça donne un effet crénelé.

On voit la démarcation, à chaque fois que l'image se répète en arrière-plan.

Deuxième chose, j'aimerai bien faire un dégradé en arrière-plan qui part du haut,comme sur ce site http://www.ffjpoker.com/

Là, je n'ai pas d'idée. Ce n'est pas une image qu'il charge quand même?
Modifié par Florent V. (14 Feb 2008 - 10:44)

numero7 a écrit :
On voit la démarcation, à chaque fois que l'image se répète en arrière-plan.

À toi de créer une image répétable en hauteur sans démarcation.

numero7 a écrit :
Ce n'est pas une image qu'il charge quand même?

Si. C'est l'image suivante:
http://www.ffjpoker.com/images/bg_topsite.gif
(D'ailleurs ils auraient pu lui donner une largeur un peu plus grande qu'un pixel... certains navigateurs ont du mal, surtout sur les petites configurations, à répéter une image 1000 ou 1600 fois en largeur. Une image de 20px de large pèsera à peine plus lourd -- en PNG-24 -- et évitera ces soucis de performances.)

Merci FLorent.

J'avais senti qu'il fallait une image dans le "body" par contre je ne comprends pas comment l'utiliser.

En effet si tu l'as mets en no-repeat, elle seule est chargée et tu as une image de taille réelle (350*20px pour moi) d'une bande en arrière-plan.

Donc il ne faut pas mettre le no-repeat et elle occupe toute la largeur par contre le problème est qu'elle se répète évidemment en dessous.

Je ne vais pas scinder le body en 2 quand même (une partie pour mon image et une autre pour la couleur du bas du dégradé)?

numero7 a écrit :
Merci FLorent.


En effet si tu l'as mets en no-repeat, elle seule est chargée et tu as une image de taille réelle (350*20px pour moi) d'une bande en arrière-plan.

Donc il ne faut pas mettre le no-repeat et elle occupe toute la largeur par contre le problème est qu'elle se répète évidemment en dessous.

Je ne vais pas scinder le body en 2 quand même (une partie pour mon image et une autre pour la couleur du bas du dégradé)?

Bonjour,

Les valeurs de la propriété background-repeat

Il est très utile de savoir utiliser background-repeat et background-position. C'est fou le nombre de choses qu'on peut faire avec ces deux petites propriétés.