[Résolu]Caller des images de fond de chaque coté dans un site ....

Question

Gobelin

2 Jan 2007 à 17:55

Bonjours,

J'aimerai arriver à caller un image de background de chaque coté dans un div(corp de mon site) et le faire répéter en y, j'arrive à le faire pour l'image de gauche mais pas pour l'image de droite. Mon site est centré et à une largeur de 956px, je souhaite y faire apparaitre une image qui se repete en Y de chaque coté
Mon site ce compose comme suit :

<body>
<div id="site">
</div>
</body>

Ma feuille de style est la suivante :

/* ------------------------------------------
/* Corps Principal Page index
/* ------------------------------------------
*/
html {
height: 100%; /* pour centrer la page */
}

body {
margin: 0; /* pour éviter les marges */
text-align: center;
padding: 0;
height: 100%;
}

img {border: none;}

#site {
position: relative;
width: 956px;
margin-left: 0;
margin-right: 0;
text-align: left;
height: 100%;
padding: 0 17px 0 17px;
margin: 0 auto;
border-left: 1px solid #234282;
border-right: 1px solid #234282;
background-color: E6E6E6;
background-image: url(../images/boot01.jpg); /* image positionné à gauche*/
background-repeat: repeat-y;
}

.imgD {
float: right;
width: 17px;
height: 14px;
background-image: url(../images/boot02.jpg);/* image à positionner à droite*/
background-repeat: repeat-y;
background-position: right;
}

/* ------------------------------------------
/* Bandeau Bannière
/* ------------------------------------------
*/

.bandeauBan {
width: 956px;
margin: 0;
text-align: left;
background-color: #FFFFFF;
}

/* ------------------------------------------
/* BandeauBannièreGaucheHaut
/* ------------------------------------------
*/

.bandGH{
position: absolute;
width: 253px;
margin: 0;
padding: 0;
text-align: left;
}

/* ------------------------------------------
/* BandeauBannièreGaucheBas
/* ------------------------------------------
*/

.bandGB{
width: 253px;
margin-top: 83px;
margin-bottom: 3px;
margin-left: 0;
margin-right:0;
padding: 0;
}

/* ------------------------------------------
/* BandeauBannièreCentre
/* ------------------------------------------
*/

.bandC{
position: absolute;
width: 494px;
margin-left: 254px;
margin-right: 0;
margin-top: 0px;
margin-bottom: 0;
padding: 0;
left: 22px;
}

/* ------------------------------------------
/* BandeauBannièreDroite
/* ------------------------------------------
*/

.bandD{
position: absolute;
width: 209px;
margin-left: 494px;
padding: 0;
border: 0;
}

/* ------------------------------------------
/* BandeauMenu
/* ------------------------------------------
*/
.bandMenu {
position: absolute;
width: 956px;
height: 24px;
margin: 0;
background-color: #E6E6E6;
}

.indigo {
position: absolute;
width: 215px;
height: 22px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 19px;
padding-right: 17px;
}

.calMenu {
position: absolute;
margin-top: 1px;
margin-left: 254px;
padding: 0;
width: 702px;
height: 22px;
}

Et je ne parviens pas à pouvoir fixer l'image à droite comme bordure dans ma page qui fait 990px et le div du site fait 956px, j'y arrive bien pour l'image de gauche que j'ai placé dans id = site en brackground-image et que j'ai fait répéter en position y. Mais pas moyen pour faire la même chose pour l'image de droite class="imgD"

Merci de votre aide !!
Modifié par Gobelin (04 Jan 2007 - 11:58)

Super_baloo8

2 Jan 2007 à 19:37

si tu déclare deux règles css dans un même élèment l'une prendra le pas sur l'autre (deux background, le navigateur prendre le background le plus précis définis dans ta css).

Pour avoir plusieurs background, tu peux faire plusieurs div dans une, ainsi chaque div aura son coté. Ou soit suis les travaux de clb56 qui pourront t'aider Smiley cligne

P.S: utilise les balises tu forum pour formater ton code ca sera plus lisible ainsi

Gobelin

4 Jan 2007 à 11:57

Salut Super_baloo8,

Merci pour ta réponse, j'ai trouvé ce que je cherché !!

@+

Sujet clos

Sémantique web et HTML

[Résolu]Caller des images de fond de chaque coté dans un site ....