Comment placer les div pour faire un background-repeat: des 2 côtés de la page [Fait]

**aragorns** · 25/12/2008, 13h40

Bonjour,

Je me permets de vous demander un conseil concernant un problème de placement de DIV
J'aimerai qu'il y ai des frises décoratives sous forme de photos (tapisseries) sur les 2 côtés de la page
La hauteur de la page variera en fonction de la place que prendra le texte, et je souhaiterai que les frises (tapisseries) suivent avec un background-repeat:repeat-y;
Mais la tapisserie de droite ne veut pas fonctionner comme celle de gauche
Et sa présence à fait descendre menu et centre...
Merci de vos bons conseils et joyeux noël à tous

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="">
<META name="keywords" content="">
<title></title>
<link href="beigetestdiv.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<div id="conteneur_de_centrage">
<div id="conteneur">
<div id="header">Bandeau
</div>
 
<div id="tapisserie_gauche">tapisserie_gauche
 
<div id="gauche_bande_beige">
<div id="menu">Menu (image map)
</div>
<div id="centre">
Centre<br>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
</div><!-- centre -->
</div> <!-- gauche_bande_beige -->
</div> <!-- tapisserie_gauche -->
<div id="tapisserie_droite">tapisserie_droite
</div> <!-- tapisserie_droite -->
 
<div id="pied">
<BR><BR><BR>Pied de page
</div>
</div> <!-- conteneur -->
</div> <!-- conteneur_de_centrage-->
</body>
</html>

Css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
#conteneur_de_centrage {
position: absolute;
width: 1000px;
left: 50%;
margin-left: -510px;
background-color: #cffa00;
}
 
#conteneur {
width: 1000px;
margin-left: 10px;
margin-right: 10px;
border-width: 1px;
border-style: solid;
border: 2px solid blue;
background-color: #afa200;
}
 
#header {
height: 187px; /* hauteur du bandeau */
clear: both;
background-color: #c00a00;
}
 
#menu {
float: left;
margin-top:0px;
margin-left: 0px;
margin-right: 50px;
width: 223px;
height: 100px; /* hauteur du menu */
background-repeat: no-repeat;
border: 3px solid red;
background-color: #c29a77;
}
 
#gauche_bande_beige {
float: left;
width: 223px;
margin-left:182px;
height: 100%; /* hauteur du menu */
background-repeat: no-repeat;
border: 3px solid yellow;
background-color: #c29a77;
}
 
#centre {
float: top;
width: 213px;
height: 100%;
margin-left:323px; /* Marge externe */
padding-left: 50px; /* Marges internes */
padding-right: 48px;
padding-top: 10px;
padding-bottom: 10px;
background-repeat: no-repeat;
border: 3px solid green;
}
 
#tapisserie_gauche {
float: left;
margin-top:0px;
width: 150px;
height: 100%;
background-repeat:repeat-y;
border: 3px solid green;
background-color: #f05500;
}
 
#tapisserie_droite {
 
float: right;
margin-top:0px;
width:150px;
height: 100%;
background-repeat:repeat-y;
border: 3px solid black;
background-color: #f05500;
}
 
#pied {
height: 75px;
clear: both;
text-align:center;
background-color: #0022ff;
}

**nO_life** · 25/12/2008, 17h04

Bonjour,
possible de voir la page concernée?

**GihefBey** · 25/12/2008, 17h15

Bonjour,

Ton site ayant une largeur fixe, le plus simple serait d'utiliser une seule image en arrière-plan du conteneur_de_centrage.
Il prendra donc en compte la taille de cettte unique image qui se répétera en hauteur.

Comme dans ce post.

Sinon, tu trouveras des exemples dans ce dossier.
Ils adaptent une struture utilisée par CSS Zen Garden.

-

**aragorns** · 25/12/2008, 21h45

la structure http://haragorns.free.fr/test/structure/structure.html
mon travail http://haragorns.free.fr/test/site/index.html
le résultat à atteindre http://haragorns.free.fr/idee5.jpg

Merci de votre aide

**GihefBey** · 28/12/2008, 02h07

En se basant sur les exemples de ce dossier, on pourrait tenter quelque chose comme ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Proposition</title>
<link href="beige.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur_de_centrage">
  <div id="conteneur">
    <div id="header"></div>
<!--
    <div id="tapisserie_gauche">
-->
        <div id="menu"></div>
<!--      </div>
-->         
      <div id="centre">
        <div class="position-titre">
          <img src="images/titre_avp.gif" />
        </div>
          <p>Reconstitution de bataille médiévale ouverte à tous Dimanche 6 avril 2008 à Mont L'Eveque (60)
          <p>Nous vous invitons à venir participer à une reconstitution de bataille : tir à l'arc contre des chevaliers.
          Le but de l'expérience est de tester en quasi réel (flèches sécurisées) les techniques de protection face à un barrage d'archerie et de créer un capital "vécu" pour les participants.
          Vous êtes archer ou homme d'arme ? Alors venez grossir les rangs de la bataille.
          <p>Notre évènement se déroule à Mont-l'Evèque, situé 3km à l'est de Senlis (60).
          Nous vous invitons à consulter les conditions de participation.
          <p>Reconstitution de bataille médiévale ouverte à tous Dimanche 6 avril 2008 à Mont L'Eveque (60)
          <p>Nous vous invitons à venir participer à une reconstitution de bataille : tir à l'arc contre des chevaliers.
          Le but de l'expérience est de tester en quasi réel (flèches sécurisées) les techniques de protection face à un barrage d'archerie et de créer un capital "vécu" pour les participants.
          Vous êtes archer ou homme d'arme ? Alors venez grossir les rangs de la bataille.
          <p>Notre évènement se déroule à Mont-l'Evèque, situé 3km à l'est de Senlis (60).
          Nous vous invitons à consulter les conditions de participation.
        </div> <!-- centre -->
<!--      
      <div id="tapisserie_droite">
         </div>
       </div>
-->
    <div id="pied">
      <p>Pied de page</p>
    </div>
  </div>  <!-- conteneur -->
</div>  <!-- conteneur_de_centrage-->
</body>
</html>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
body {
  margin: 0px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  }
 
#conteneur_de_centrage {
  position: absolute;
  width: 1000px;
  left: 50%;
  margin-left: -510px;
  background: url("images/tapisserieG.jpg") repeat-y left top;
  }
#conteneur {
  width: 1000px;
  margin-left: 0;
  margin-right: 10px;
  border-width: 1px;
  border-style: solid;
/*  border: 2px solid blue;*/
  background: url("images/tapisserieD.jpg") repeat-y right top;
  }
 
#header {
  height: 187px; /* hauteur du bandeau */
  clear: both;
  }
#menu {
  float: left;
  margin-top:0px;
margin-left: 83px;
  margin-right: 50px;
  width: 223px;
  height: 423px; /* hauteur du menu */
  background-repeat: no-repeat;
  border: 0px solid red;
  background-color: #c29a77;
  }
 
/*
#gauche_bande_beige {
  float: left;
  width: 223px;
  margin-left:82px;
  height: 100%;
  background-repeat: no-repeat;
  border: 0px solid yellow;
  background-color: #c29a77;
  }
*/
 
#centre {
/*  float: top;*/
  width: 513px;
  height: 100%;
  margin-left:223px; /* Marge externe */
  padding-left: 135px; /* Marges internes */
  padding-right: 48px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-repeat: no-repeat;  
  border: 0px solid green;
  }
 
/*
#tapisserie_gauche {
  float: left;
  margin-top:0px;
  width: 83px;
  height: 100%;
  background-repeat:repeat-y;
  border: 0px solid green;
  background-color: #f05500;
  }
#tapisserie_droite {
  float: top;
  margin-top:0px;
  margin-left: 840px;
  width: 83px;
  height: 200px;
  background-repeat:repeat-y;
  border: 0px solid green;
  background-color: #f05500;
  }
*/
 
.menu_cote {
  list-style-type: none;
  padding: 15px;
  }
.menu_cote li {
  margin-bottom: 10px; /* espace entre les lignes du menu */
  line-height: 0px;
  }
.menu_cote a {
  text-decoration: none;
  font-weight: bold; 
  font-style: none;
  line-height: 15px; /* espace entre les interlignes (retour chariot automatique)*/
  }
.menu_cote a:hover {
  text-decoration: none;
  }
.position-titre {
margin-left: 21px;
margin-top: 21px;
margin-bottom: 21px;
  padding-top: 0px;
  padding-left: 0px;
  background-color: ffffff;
  }
 
#pied {
  clear: both;
  height: 82px;
/*  background-color: #fff;*/
background: #fff url("images/bandeau_bas.jpg") no-repeat center;
  }
#pied p {
text-align:center;
line-height: 75px;
  }
 
 
a {
  text-decoration: none;
  display : block;
  }
a:hover {
  text-decoration: none;
  }
img {
  text-decoration: none;
  border: 0;
  }
p {
  text-align: justify;
  text-indent: 20px;
  margin: 1em 0;
  }
p:first-letter {
  font-weight: bold;
  font-size: 14px;
  }

Évite de disperser tes styles.

-

Comment placer les div pour faire un background-repeat: des 2 côtés de la page [Fait]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager