Bonjour à tous,

Je crée actuellement un site internet en PHP avec une feuille de style.css mais je tiens à vous préciser que je suis débutant dans la création de site web.
J'ai construit un modelé :
gsweet1981.wix.com/lesmordus
Ce modèle doit être reproduit sur mon site officiel :
www.morava-airlines.com/beta
Le site officiel a été introduit par une société (IPS : Intégral pirep system), le style doit être fait par moi-même.

Voilà ma question :

J'aimerai avoir un effet de transition horizontal sur le contenu central de la page lorsque l'on change de page.
Voir exemple sur le site : gsweet1981.wix.com/lesmordus
Le contenu central contient 3 éléments :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
#titlewrapper {
#titletab {
#content {
Le reste doit être magnétisé sur tout les page sans transition.



Je vous souhaite un bon week-end en vous remercient d'avance !

Partie du contenu central feuille de style (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
/* 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:50px;
   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:50px;
margin-right:60px;
   margin-top:105px;
   margin-bottom:10px;
   padding-top:15px;
}
 
#content .databox {
   width:190px;
   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:14px;
   padding:10px;
   margin-bottom:10px;
}
 
#content #leftdataboxcontainer {
   position:absolute;
   margin-left:-25px;
   left:-150px;
 
 
}
 
#content #rightdataboxcontainer {
   position:absolute;
margin-top:-17px;   
margin-left:-45px;
margin-right:15px;
margin-bottom:50px;
   left:100%;
}
 
#content .databox h1 {
   margin:0px 10px 10px 10px;
   text-align:center;
   border-bottom:3px solid #00f;
   font-size:14px;
}

Code source index.php :
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
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
<?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>
<title><?php echo $websitename ?></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
 
<!-- 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>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<body class="fs">
<div id="sitebg"></div>
<div id="wrapper">
<!-- begin container-->
<div id="container">
 
<!-- Begin header -->
   <div id="header">
    <br />
    <br />
    </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</a>
 
</div>
<!-- End Footer -->
 
</div>
<!-- End Container -->
</div>
 
 
</body>
</html>