fonction permettant de reproduire l'image pour faire un cadre

Probleme en CSS

Sujet résolu

9 décembre 2005 à 21:19:07

Bonjour à tous.
J'aimerai savoir quel est la fonction qui permet de répéter une image pour ainsi faire un cadre qui s'adapte à la taille de la page. Je cherche quelque chose du genre de "repeat-x", sauf que je désire ça pour l'axe des y, et j'ai essayé "repeat-y", ca ne marche pas. :euh:

Merci.

[Edit] Nyro Xeo > Modification du titre pour améliorer la qualité des résultats de recherches.

yuston

9 décembre 2005 à 21:20:51

Tiens c'est bizarre, car repeat-y devrai marcher... consulte ce lien:
http://www.aidenet.com/css/css08ca.htm

Fieldset

9 décembre 2005 à 21:26:30

as-tu essayé ceci :

background: url('image.png') repeat-y center center;

k-like

9 décembre 2005 à 21:33:44

Je vien d'essayer avec ta fonction chapi chapo, mais ça ne marche pas non plus.

Voila mon code :

.gauche
{
float: left;
background-image: url("images/bordgauche.PNG");
background-repeat: repeat-y;
width: 35px;
height: 200px;

}

.droite
{
float: right;
background-image: url("images/borddroit.PNG");
background-repeat: repeat-y;
width: 33px;
height: 200px;
}

Voila ce que ça donne

Fieldset

10 décembre 2005 à 13:05:02

il me semble que tu n'es pas utilisé la même chose que moi lol

.gauche
{
float: left;
background-image: url("images/bordgauche.PNG") center center repeat-y;
width: 35px;
height: 200px;

}

.droite
{
float: right;
background-image: url("images/borddroit.PNG") center center repeat-y;
width: 33px;
height: 200px;
}

La différence réside dans le fait que j'ai rajouter "center center"
le premier "center" centre l'image verticalement et le second horizontalement

k-like

10 décembre 2005 à 15:13:19

Je viens d'essayer avec le code que tu as fait, mais là ça n'affiche plus du tout les bords

jp949

10 décembre 2005 à 15:30:16

quelles sont les dimensions de ton image?

k-like

10 décembre 2005 à 17:44:01

le bord gauche et le bord droit font tous deux 35 x 200

Fieldset

11 décembre 2005 à 21:21:26

ya un truc qui me parait louche lol

Tu voudrais pas nous montrer un peu plus de code là stp ? sa serait plus simple pour t'aider car le pb vient surement pas du code que je t'ai donné mais d'ailleur

k-like

12 décembre 2005 à 17:19:37

Alors voila plus de code CSS : le code pour toutes les bordures et pour le corps.

#corps
{
margin-left: 170px;
margin-bottom: 100px;
margin-right: 12px;
background-image: url("images/interieur.PNG");
}

.haut
{
width: 100%;
height: 60px;
background-repeat: no-repeat;
background-image: url("images/haut.PNG");
z-index: 1;
float: left;
}

.gauche
{
float: left;
background-image: url("images/bordgauche.PNG") center center repeat-y;
width: 35px;
height: 180px;

}

.droite
{
float: right;
background-image: url("images/borddroit.PNG") center center repeat-y;
width: 35px;
height: 180px;
}

.bas
{
width: 100%;
height: 60px;
background-repeat: no-repeat;
background-image: url("images/bas.PNG");
z-index: 1;
float: left;
}

et voila le code de la page HTML, pour voir où sont placées les balises <DIV>:

<div id="corps">

<div class="haut">
</div>
<div class="gauche">
</div>
<div class="droite">
</div>

<h4>Bienvenue</h4>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="bas">
</div>
</div>

Fieldset

12 décembre 2005 à 19:58:06

Juste une dernière demande; est-ce que tu pourrais me donner les images que tu utilises pour faire ce cadre stp ?

Merci

k-like

13 décembre 2005 à 17:02:40

Voila les parties de mon cadre

Haut : Image utilisateur

Bord gauche : Image utilisateur

Bord droit : Image utilisateur

Bas :

strucky

13 décembre 2005 à 19:19:01

Salut !!

C'est normal que tes images ne se répètent pas puisque tu donnes à tes bloc la taille exacte de tes images.

Donc agrandi tes blocs à la taille voulue.
Il n'est pas nécessaire de spécifier un repeat-y ou un no-repeat si tes blocs font la largeur de ton image, l'image se répète automatiquement si le bloc est plus grand.

Ce qui pourrait donner avec une hauteur de 500px :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>
</title>
<style type="text/css">
#corps
{
margin-left: 170px;
width: 622px;
margin-bottom: 100px;
margin-right: 12px;
background-image: url(images/interieur.png);
}.haut
{
width: 100%;
height: 60px;
background-image: url(images/haut.png);
float: left;
}.gauche
{
float: left;
background-image: url(images/bordgauche.png);
width: 35px;
height: 500px;
}.droite
{
float: right;
background-image: url(images/borddroit.png);
width: 35px;
height: 500px;
}.bas
{
width: 100%;
height: 60px;
background-image: url(images/bas.png);
z-index: 1;
float: left;
}
</style>
</head>
<body>

<div id="corps">
<div class="haut">
</div>
<div class="gauche">
</div>
<div class="droite">
</div>

<h4>Bienvenue</h4>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="bas">
</div>
</div>

</body>
</html>

k-like

14 décembre 2005 à 14:43:09

Merci Strucky, ca marche

Mais est-ce qu'il y a un moyen pour que la taille des bordures s'adapte a la taille de la page, pour que je n'ai pas besoin de marquer pour chaque page la taille que je veux.

Fieldset

14 décembre 2005 à 19:38:57

Justement, c'est ce que je cherchais mais il me parait difficile (voir impossible) de réaliser ce que tu dis avec tes quatres images...

En revanche tu peux utiliser seulement trois image à savoir :

* Le haut du parchemin

* Une image centrale qui comportera de chaque côté les bords de ton parchemins et au centre la texture de ton parchemin

* Le bas du parchemin

Haut:

Centre:

Bas:

k-like

15 décembre 2005 à 18:36:09

Merci beaucoup Fieldset, maintenant ca marche comme je veux.

Et merci aussi à tous ceux qui ont participé

Fieldset

15 décembre 2005 à 21:14:36

Derien

Content d'avoir pu t'aider