Discussion :

[HADES62]

Bien le bonjours voilà mon probleme ne trouvant quasi pas de tuto sur les sites "fluides" et galere un peu en générale.

J'avance pas a pas mais je suis bloqué sur le conteneur arrondi.
en fait voila ma page actuel http://argent-sur-internet.fr

Comme vous pouvez le voir ce site en tableau ne respect pas le w3c .....

Donc j'ai pris un template banal valide xhtml1.0 strict avec css et je commence a adapter mon site dedans.

Bon tout ca pour vous fournir le code qui correspond a ce que j'ai en local et le lien c'est le rendu que je souhaiteré optenir.

le but de la manoeuvre et d'avoir mon menu en arrondi qui prend 18% a gauche et le contenu 78% a droite le menu étant également en arrondi.

et voila le code que j'utilise en local.

le 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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
/* ===========================================================
Elements de Page ========================================== */
 
* {
 
	margin: 0;
	padding: 0;
}
 
body {
 
	font-size: 1em; font-weight: bold; font-family: Verdana; color: #84B5FF;
	color: #464646;
	background: url(./test.jpg);
}
 
 
ul, li {
 
	list-style-type: none;
}
 
img {
 
	border: 0;
}
 
/* ===========================================================
Structure de la Page ====================================== */
div#global {
	padding-top: 0.5em;
	width: 95%;
	margin: 0 auto 0 auto;
}
/* ===========================================================
Header ==================================================== */
div#header {
	padding-top: 0.5em;	
	height: 100%;
	width: 98%;
	margin-left:1%;
}
 
div#header img.fond {
	width: 100%;
}
 
div#header img.pub {
	position:absolute;
	vertical-align:middle;
	left:50%;
	margin-left:-239px;
	margin-top:15px;
}
[#blue]
/* ===========================================================
menu gauche  ================================================= */
div#menugauche {
 
	width: 18%;
	float: left;
}
 
div#menugauche div.titreg {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-left.gif) no-repeat;
	font-size: 1px;
	float: left;
	margin-top: 5px; 
}
 
div#menugauche h3 {
 
	font-size: 1em;
	text-align: center;
	background: url(./box-top-center.png) repeat-x;
	height: 18px; /*18*/
	float: left;
	color: #92a620;
	margin-top: 5px;
}
 
div#menugauche h3 span { color: #54545; }
 
div#menugauche div.titred {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-right.gif) no-repeat;
	font-size: 1px;
	float: right;
	margin-top: 5px;
}
 
div#menugauche div.boxmenu {
padding: 5px 0 0 13px;
border-left:solid 1px;
border-right:solid 1px;
background-color:#FFFFFF;
margin: 0 0 0 0;
clear: left;
}
 
div#menugauche div.titregb {
 
	width: 7px;
	height: 7px;
	background: url(./box-bottom-left.gif) no-repeat;
	font-size: 1px;
	float: left;
}
 
div#menugauche div.centre {
 
	background: url(./box-bottom-center.gif) repeat-x;
	height: 7px; /*18*/
	float: right;
}
 
div#menugauche div.titredb {
 
	width: 7px;
	height: 7px;
	background: url(./box-bottom-right.gif) no-repeat;
	font-size: 1px;
	float: left;
}
 
div#menugauche div.boxmenu ul li a {
 
	color: #54545;
	text-decoration: none;
}
 
div#menugauche div.boxmenu ul li a:hover {
 
	color: #454545;
	text-decoration: none;
	border-bottom: 1px dashed #454545;
}
 
div#menugauche div.boxmenu  li {
 
	List-Style-Image:URL(puce.gif);
}
 
 
===========================================================
menu droite  ================================================= */
div#menudroite {
 
	width: 20%;
	float: left;
	margin: 0 0 5px 18px;
}
 
div#menudroite div.titreg {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-left.gif) no-repeat;
	font-size: 1px;
	float: left;
}
 
div#menudroite h3 {
 
	font-size: 10px;
	text-align: right;
	background: url(./box-top-center.png) repeat-x;
	height: 15px; /*18*/
	padding: 3px 0 0 0;
	float: left;
	color: #92a620;
}
 
div#menudroite h3 span { color: #454545; }
 
div#menudroite div.titred {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-right.gif) no-repeat;
	font-size: 1px;
	float: right;
}
 
div#menudroite div.boxmenu {
 
	border: 1px solid #dbdbdb;
	padding: 0 0 3px 13px;
	margin: 0 0 7px 0;
	clear: left;
}
 
div#menudroite div.boxmenu ul li a {
 
	color: #454545;
	text-decoration: none;
}
 
div#menudroite div.boxmenu ul li a:hover {
 
	color: #454545;
	text-decoration: none;
	border-bottom: 1px dashed #454545;
}
 
/* ===========================================================
contenu ============================================ */
div#contenu {
 
	width: 78%;
	margin: 0 0 5px 18px;
	float: right;
}
 
div#contenu div.titreg {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-left.gif) no-repeat;
	font-size: 1px;
	float: left;
}
 
div#contenu h1 {
 
	font-size: 13px;
	background: url(./box-top-center.png) repeat-x;
	height: 18px;
	text-align: right;
	width: 385px;
	float: left;
	color: #92a620;
}
 
div#contenu h1 span { color: #454545; }
 
div#contenu div.titred {
 
	width: 7px;
	height: 18px;
	background: url(./box-top-right.gif) no-repeat;
	font-size: 1px;
	float: left;
}
 
div#contenu div.boxcontenu {
 
	border: 1px solid #dbdbdb;
}
 
div#contenu h2 {
 
	height: 17px; /*21*/
	background: #e1e1e1;
	color: #474747;
	font-size: 11px; 
	padding: 4px 0 0 3px;
	margin: 17px 0 0 0;
	text-align: left;
}
 
div#contenu div.boxcontenu p {
 
	padding: 10px 15px 5px 15px;
	text-align: justify;
	font-size: 11px;
}
 
div#contenu div.boxcontenu  p.par { 
 
	font-size: 10px; 
	text-align: right; 
	font-style: italic;
}
 
p#footer {
 
	clear: both;
	font-size: 10px;
	margin: 0 0 0 150px;
}
 
p#footer a {
 
	font-style: italic;
}
/* ===========================================================
Liens généraux ============================================ */
 
a:link, a:active, a:visited {
 
	color: #454545;
	text-decoration: none;
}
 
a:hover {
 
	color: #454545;
	text-decoration: none;
}

et le html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>Guigro.com</title>
	<link rel="stylesheet" href="./utils/style.css" type="text/css" media="screen" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
 
<div id="header">
  <img src="./utils/barre.png" alt="Header d'argent-sur-internet.fr" class="fond" /><img src="./utils/yo.gif" alt="les meillieurs offres en rotation" class="pub" /></div>
 
<div id="global">
[#blue]
<!--//////////////////// Menu de gauche ////////////////////-->
<div id="menugauche">
 
<div class="titreg"></div>
<h3><span>+</span> Menu </h3>
<div class="titred"></div>
	<div class="boxmenu">
		<ul>
			<li><a href="http://argent-sur-internet.fr/News/News.php" title="afficher les news">News</a></li>
		</ul>
	</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>	
	<div class="titreg"></div><h3><span>+</span> Internet</h3><div class="titred"></div>
	<div class="boxmenu">
		<ul>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
		</ul>
	</div>
<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>	
		<div class="titreg"></div><h3><span>+</span> Images</h3><div class="titred"></div>
	<div class="boxmenu">
		<ul>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
			<li><a href="#" title="#">Lien</a></li>
		</ul>
	</div>
	<div class="titregb"></div><div class="centre"></div><div class="titredb"></div>
</div>
[/#]
 
<!--//////////////////// Contenu ////////////////////-->
<div id="contenu">
<div class="titreg"></div><h1><span>+</span> News</h1><div class="titred"></div>
	<div class="boxcontenu">
		<h2>Titre de la news</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a</p>
				<p class="par">par guiro le 17/01/07 a 21h36</p>
		<h2>Test</h2>
			<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. L</p>
				<p class="par">par guiro le 20/08/07 a 6h30</p>
	</div>
</div>
 
<p id="footer">Découpe et intégration <a href="" title="Validation xhtml">xhtml</a> / <a href="" title="Validation css2">css</a> par Bo pour <a href="http://decoupe-fr.net/forums/index.php" title="Forum de Découpe-fr">Découpe-fr.net</a></p>
 
 
</div>	
 
</body>
</html>

j'ai mis tout le code au cas ou il y aurais une parti du code qui ne soit pas bon pour mettre le site fluide et j'aimerais également utiliser les em au lieu des px mais pas moyen de trouver un tableau de correspondance correcte. [/#]



Voila pour que ce sois plus clair j'ai mis en ligne une page de test http://argent-sur-internet.fr/test/

[Peut-êtreUneRéponse]

j'aimerais également utiliser les em au lieu des px mais pas moyen de trouver un tableau de correspondance correcte.

Em Calculator

.

[HADES62]

Arf ce tableau est t'il fiable?

car c'est uen fois de plus des valeurs différentes a celle que je rencontre sur le web avec généralement 10px=1em ici 10px=0.11em

Autrement en attente de validation il est déjà dans mes favoris merci

[Bisûnûrs]

Par defaut 1em équivaut à la police par défaut sur le navigateur, donc en général 16px. Après, 0.75em = >12px etc...

Il faut juste faire attention à l'héritage; ainsi un font-size de 0.75 em attribué à un élément dont le parent a lui même un font-size de 0.75 em, la police finale sera le 75% du 75%, soit plus petite que les 12px de mon exemple.

[HADES62]

donc voila j'ai bien essayé plusieurs méthodes mais auqune ne fait ce que je voudrais que ce soit comme ca

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
<div id="full_menu">
		<div id="sideTop_menu">
			<div id="topRight_menu"></div>
 
			<div id="topLeft_menu"></div>
		</div>
			<div id="contenu_menu">
 
<ul id="id="full_menu">
				<!--Début du menu-->				
 
<li>blabla <li></ul>
				<!--Fin du menu-->
				</div>
 
		<div id="sideBottom_menu">
			<div id="bottomRight_menu"></div>
			<div id="bottomLeft_menu"></div>
		</div>
  </div>

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
#full_menu { width: 18%;
	float: left;}
 
#topRight_menu, #bottomRight_menu {float: right; }
 
#topRight_menu {background: transparent url(box-top-right.gif) no-repeat; width: 7px; height: 24px;}
 
#bottomRight_menu {background: url(box-bottom-right.gif) no-repeat; width:7px; height: 7px;}
 
#topLeft_menu {background: transparent url(box-top-left.gif) no-repeat; width: 7px; height: 24px;}
 
#bottomLeft_menu {background: url(box-bottom-left.gif) no-repeat; width: 7px; height: 7px;}
 
#contenu_menu {
border-left:solid 1px;
border-right:solid 1px;
border-color:6f88dc;
background-color:#FFFFFF;}
 
 
#sideTop_menu {background: transparent url(box-top-center.png) repeat-x;}
 
#sideBottom_menu {background: url(box-bottom-center.gif) repeat-x;}

ou encore comme ca

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
 
<div class="menu-box-top">
    <div class="menu-box-bottom">
      <div class="menu-box-topLeft">
        <div class="menu-box-topRight">
          <div class="menu-box-bottomLeft">
            <div class="menu-box-bottomRight">
              <h2 onclick="montre('contenu1');" >Barre de pub(Cashbar)</h2>
			  <div id="fond">
              <ul id="contenu1">
                <li><a href="http://argent-sur-internet.fr/BarPub/Eurobarre.php">Eurobarre</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/Eurojackpot.php">Eurojackpot</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/Eurokiddies.php"> Eurokiddies</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/HiMoney.php">HiMoney</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/Kitbar4$.php">Kitbar4$</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/Moneycashbar.php">Moneycashbar</a></li>
                <li><a href="http://argent-sur-internet.fr/BarPub/Webocodes.php">Webocodes</a></li>
              </ul>
			  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Code :

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

1
2
3
4
5
6
7
8
9
#fond{background-color:#FFFFFF;}
/*---------------------- MENU----------------------******************************/
/* début du cadre et de sont contenu...*/
.menu-box-top         { background:url('./box-top-center.png') repeat-x top left; width:15%; float:left;}
.menu-box-bottom      { background:url('./box-bottom-center.gif') repeat-x bottom left; }
.menu-box-topLeft     { background:url('./box-top-left.gif') no-repeat top left; }
.menu-box-topRight    { background:url('./box-top-right.gif') no-repeat top right; }
.menu-box-bottomLeft  { background:url('./box-bottom-left.gif') no-repeat bottom left; }
.menu-box-bottomRight { background:url('./box-bottom-right.gif') no-repeat bottom right;}

et bien encore d'autre ... elle ont toutes eux le meme probleme l'imade du milieu ce repete sur la totalité du menu mais mes arrondi on une parti transparante et donc a ces endroits on voi l'images du milieu (c'est 1 pixel de largeur qui ce repese sur 24 de haut)

[E.Bzz]

Bonjour,
du coup, le pb c'est quoi ?
Tu ne veux pas la partie transparente du milieu, et que l'image s'adapte en largeur ?

A+

[HADES62]

je voudrait que l'image du milieu ne passe pas derriere les images des coins car comme ils sont transparants on voit derriere l'image du milieu au lieu de voir le body background.

ent tableau ca donneré un truc <table><tr><td>image coin gauche</td><td>image milieu</td><td>image coin droit</td></tr></table>

un truc genre <div milieu with 100% -7px a gauche -7px a droite><div>coin gauche</div><div droite></div></div>


le probleme que je rencontre actuelement c'est quoi que je fasse l'image du milieu ce repete sur la totalité de la largeur du conteneur du menu.

[Space Cowboy]

Code :

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

 background-image:X; background-repeat:X; background-position:X;

?

[HADES62]

ca ne marche pas déjà essayé