Optimisation et mise en page

**morava** · 22/01/2014, 14h45

Bonjour,

Je suis debutant dans la création de site internet, j'ai crée un site internet en php qui a été fait en grande partie par une société (IPS), j'ai apporté ma petite touche de finition dessus, mais suite au modification que j'ai fait, la mise-en-page de mon site se deforme, il n'est pas optimiser pour les fenetres exploreur en mode reduit et pour les iphone-tablette : http://www.morava-airlines.com/beta

Je sais pas comment modifier correctement mon style.css pour qu'il soit correcte.

Si quelqu'un pourrait m'aider a l'optimiser?

voici le fichier style.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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
@charset "UTF-8";
/* Main Styles */
 
body {
	background: #fff;
}
 
#sitebg {
	position:fixed;
	width:100%;
	height:100%;
	min-width:1500px;
	left:0px;
	top:0px;
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	z-index:-10;
}
#wrapper {
	font: 100% "Futura Medium", "Segoe UI", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
	background-image:url(../images/bg.gif);
	background-repeat: repeat-x;
	margin: 0; 
	padding: 0;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.15);
 
}
 
img {
	border:none;
}
 
.fs #block {
	width:960px;
	min-height: 375px;
	max-height:700px;
	text-align:left;
}
 
.fs #a:link, a:visited, a:active {
	color: #ffffff;
	text-decoration: underline;
}
 
.fs #a:hover {
	color: #CCC;
	text-decoration:underline;
}
 
.fs #container {
	position:relative;
	width: 1060px;
	margin: 0 auto;
	text-align: left;
	border: none;
	margin-bottom: 15px;
	overflow:visible;
 
}
 
 
a.teachers {
	color: #ffffff;
	font-size: 18px;
	text-decoration:none;
}
 
a.teachers:hover {
	color: #ccccc;
	text-decoration:none;
}
 
/* Header */
.fs #header {
background-image: url(../images/chs_logo.png);
	margin: 0px;
	height: 250px;
background-position:50% 0%;
}
 
 
/* Main Nav Styles */
.fs #menu{
 
border:none;
   border:0px;
   margin:0 auto;
   padding:0px;
   font: 80% "Futura Medium", "Segoe UI", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
   font-size:16px;
   font-weight:bold;
 
   }
.fs #menu ul{
   background:transparent;
   height:28px;
   list-style:none;
   margin:0;
   padding:0;
   }
   .fs #menu li{
      float:left;
      padding:2px;
 
      }
   .fs #menu li a{
      background:#ffffff;
      background-image: url(../images/button_bg.png);
      color:#ffffff;
      display:block;
      font-weight:normal;
      line-height:28px;
      border-radius: 3px;
      margin:0px;
      padding:0px 8px;
      text-align:center;
      text-decoration:none;
      }
.fs #menu ul li.active a{
      background:#102CE0;
      color:#ffffff;
      display:block;
      font-weight:normal;
      line-height:28px;
      border-radius: 3px;
      margin:0px;
      padding:0px 15px;
      text-align:center;
      text-decoration:none;
      }
 
      .fs #menu li a:hover, .fs #menu ul li:hover a{
 
         background-image: url(../images/buttonhot_bg.png);
         color:#ffffff;
         text-decoration:none;
 
         }
 
 
   .fs #menu li a:hover top {
         color:#ffffff;
         text-decoration:none;
      }
 
   .fs #menu li ul{
      background:#000;
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      z-index:200;
      border-radius: 4px;
      border-top: none;
      }
 
   .fs #menu li:hover ul{
      display:block;
 
      }
   .fs #menu li li {
      display:block;
      float:none;
      margin:0px;
      padding:0px;
 
      }
   .fs #menu li:hover li a{
      background:none;
 
      }
   .menu li ul a{
      display:block;
      height:32px;
      font-size:17px;
      font-style:normal;
      margin:0px;
      text-align:center;
      }
      .fs #menu li ul a:hover, .fs #menu li ul li:hover a{
         background-image: url(../images/buttonhot_bg.png);
         border:0px;
         color:#fff;
         font-size:17px;
         text-decoration:none;
         }
 
   .fs #menu p{
      clear:left;
      }
 
   .fs #menu a:link, a:visited, a:active {
      color: #ffffff;
 
}
 
.fs #menu a:hover {
   color: #ffffff;
 
}
 
 
/* Side Bar */
.fs #sidebar {
   float: left;   
   margin-right: 10px;
   margin-top: 10px;
   font-size:11px;
}
.fs #sidebar a:link {
   text-decoration: none;
}
 
.headtab {
	height: 25px;
 
	background: #0956a1 url(../images/headtab.gif);
	color: #ffffff;
	font-size:12px;
	font-weight:bold;
	padding-left: 5px;
 
}
 
tr.tabrow {
	height: 20px;
}
 
tr.tabrow:hover {
	background: #cbcbcb;
}
 
 
/* Content */
#titlewrapper {
   float:left;
   border-left:1px #2b2b2b solid;
   border-top:1px #2b2b2b solid;
   background-color:#000;
   background-image:url(../images/titlebg.png);
   background-position:left bottom;
   background-repeat:no-repeat;
   padding: 0 10px;
   padding-right:1px;
   margin-left:75px;
   margin-top:70px;
   margin-bottom:-12px;
   height:33px;
}
 
#titletab {
   float:left;
   width:90px;
   height:33px;
   background-image:url(../images/titletab.png);
   background-position:left top;
   background-repeat:no-repeat;
   margin-top:70px;
   margin-bottom:-12px;
}
 
.fs #content {
   padding: 10px 10px;
   background:#000;
   border: 1px #2b2b2b solid;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
margin-left:75px;
margin-right:70px;
   margin-top:105px;
   margin-bottom:10px;
   padding-top:15px;
font-size: 12px;
}
 
#content .databox {
   width:210px;
   background:#000;
   border:1px solid #2b2b2b;
   -webkit-border-radius: 7px;
   -webkit-border-top-left-radius: 0;
   -moz-border-radius: 7px;
   -moz-border-radius-topleft: 0;
   border-radius: 7px;
   border-top-left-radius: 0;
   font-size:10px;
   padding:10px;
   margin-bottom:10px;
}
 
#content #leftdataboxcontainer {
   position:absolute;
   margin-left:-15px;
   left:-150px;
 font-size:10px;
 
}
 
#content #rightdataboxcontainer {
   position:absolute;
margin-top:-17px;   
margin-left:-60px;
margin-right:15px;
margin-bottom:50px;
   left:100%;
font-size:10px;
}
 
#content .databox h1 {
   margin:0px 10px 10px 10px;
   text-align:center;
   border-bottom:3px solid #00f;
   font-size:14px;
}
 
 
/* Footer (pied de page) */
 
 
.fs #footer {
	margin-left:52px;
margin-bottom: 0;
margin-top: 50px;
	background:#000;
 
	color: #ffffff;
	width:90%;
	line-height: 55px;
height: 60px;
	clear: both;
	border: 1px #2b2b2b solid;
	-webkit-border-radius: 7px;
	-webkit-border-top-left-radius: 7px;
	-moz-border-radius: 7px;
	-moz-border-radius-topleft: 7px;
	border-radius: 7px;
	border-top-left-radius: 7px;
}
 
.fs #footer a:link, a:visited {
	color: #ffffff;
	text-decoration:none;
}
 
.fs #footer a:hover {
	color:#77f;
}

et le fichier index.php :

Code php :

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
<?php
require_once("init.php");
?>
<!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="X-UA-Compatible" content="IE=9,chrome=1"/>
<meta name="fb_admins_meta_tag" content="gsweet1981"/>
<meta name="keywords" content="AIRLINE, AIRLINES, AVIATION, FS9, FSX, IVAO, MORAVA, MORAVA AIRLINES, P3D, VA, X-plane, mordu de l'aviation"/>
<meta name="description" content="Site internet de la compagnie virtuelle des Mordus. Bienvenue chez MORAVA-Airlines."/>
<title><?php echo $websitename ?></title>
 
<!-- Style Sheets -->
<link href="<?php echo $mainurl ?>css/styles.css" media="screen" rel="stylesheet" type="text/css" /> 
<!-- End Style Sheets -->
 
<!-- easy slider -->
	<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.js"></script>
	<!--<script type="text/javascript" src="js/easySlider1.5.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true,
				continuous: true 
			});
		});	
	</script>!-->
    <link href="<?php echo $mainurl ?>css/screen.css" rel="stylesheet" type="text/css" media="screen" />
 
<!-- end easy slider -->
 
<!-- Accordion/slider -->
<link rel="stylesheet" href="<?php echo $mainurl ?>css/accordion.css" />
 
	<script type="text/javascript" src="<?php echo $mainurl ?>js/chili-1.7.pack.js"></script>
	<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.easing.js"></script>
	<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.accordion.js"></script>
 
	<script type="text/javascript">
	jQuery().ready(function(){
		// simple Accordion
		jQuery('#list1').Accordion();
	});
	</script>
<!--end accordion-->
 
 
</head>
<body class="fs">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=171517512914897";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="sitebg"></div>
<div id="wrapper">
<!-- begin container-->
<div id="container">
 
<!-- Begin header -->
	<div id="header">
    <div style="float:left;margin-top:125px;margin-left:-100px">
    	<div class="fb-like" data-href="<?php echo $mainurl ?>" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>
    </div>
    <div style="float:right;margin-top:122px;margin-right:-75px;text-align:right">
    	<?php SwitchLanguage(); ?><br /><br />
           <a href="<?php echo BuildURL("profile");?>">             Connexion</a>   /   <a href="<?php echo BuildURL("register"); ?>">Inscris-toi</a>
    </div>
    </div>
<!-- End header -- >
 
<!-- Begin nav -->
		 <div id="menu"> 
		<?php BuildMenu((CheckLogin())?2:1); ?>
	</div> 
<!-- End nav -->
<!-- Begin EasySlider 1.5 -->
			<!--<div id="slider" class="block"> 
 
          <ul>
 			<li><img src="images/slides/slide1.jpg" alt="" /></li>
            <li><img src="images/slides/slide2.jpg" alt"" /></li>
 		 </ul>
 
			</div> !-->
<!-- End Easy Slider -->
 
<!-- Content -->
			<div id="titlewrapper">
            	<h3 id="title"><?php echo $title ?></h3>
            </div><div id="titletab"></div>
			<div id="content">
            	<div id="leftdataboxcontainer">
                    <?php SideBarLeft(); ?>
                </div>
            	<div id="rightdataboxcontainer">
                    <?php SideBarRight(); ?>
                </div>
            <p>
            <?php IncludePage(); ?>
            </p>
</div>
<!-- End Content -->
<!-- Footer -->
			<div id="footer" align="center">
            <table border="0" style="width:100%">
            <tr>
            <td style="padding-left:100px"><a href="https://www.facebook.com/groups/lesmordus/" target="_blank"><img src="images/fb.png" style="vertical-align:middle" /> Facebook</td>
            <td style="text-align:right;padding-right:100px;"><a href="http://www.youtube.com/user/lesmordusdelaviation" target="_blank"><img src="images/youtube.png" style="vertical-align:middle" /> Youtube</a></td>
            </tr>
            </table>
 
      Copyright &copy; 2013 | Powered by <a href="http://www.jbussemaker.com/">jBussemaker Web Development</a> and <a href="http://www.integratedpirepsystem.com/" title="Integrated Pirep System">IPS / Found and supervise by HESS Grégory</a>
 
</div>
<!-- End Footer -->
 
</div>
<!-- End Container -->
</div>
 
 
</body>
</html>

Un grand merci à vous tous !

**cadoudal56** · 23/01/2014, 10h18

Bonjour,

Ce que tu cherches à faire s'appelle du Responsive Design.

Je t'engages à lire cet excellent tutorial pour t'initier :
Les fondamentaux du responsive design

Pour parfaire ta connaissance tu peux taper "responsive design + tutorial" sur Google.

C'est assez facile à comprendre et seule ton fichier CSS sera à modifié.

A vue de nez et selon ton degré de connaissance du CSS, je dirais que cela te prendra entre 2 et 5 jours pour obtenir exactement ce que tu souhaites...

@+
Cadoudal56

Optimisation et mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager