ok désolé, j'envoi la totalité du code index.php sans les includes sans rien histoire de tout avoir au meme endroit : un copier collé devrai suffire.
j'envoi le css avec.
désolé si ça fait un peu long
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxx" />
<meta name="description" content="xxxxxxx" />
<meta name="author" content="xxxxxxxxx" />
<link rel="icon" type="image/png" href="images/logo/favicon.png" />
<link href="css/designSEGMA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="jQuery/jquery-1.4.4.js"></script>
<div id="entete">
<p>
www.<strong>je-segma</strong>.fr
<img src="images/symbole/puce.png" alt="images/symbole/error.png" />
<strong>La Junior-Entreprise de l'ESC Clermont</strong>
</p>
</div>
<div id="bg_menu1">
<div id="bg_menu2">
<div id="menu">
<ul id="menuDeroulant">
<li><a href="index.php">ACCUEIL</a>
</li>
<li><a href="#">ACTUALITES</a>
</li>
<li><a href="#">PRESENTATION</a>
<ul class="sousMenu">
<li><a href="">GROUPE ESC CLERMONT</a></li>
<li><a href="">JUNIOR-ENTREPRISE</a></li>
<li><a href="">VALEURS</a></li>
<li><a href="">EQUIPE</a></li>
<li><a href="">CHIFFRES CLES</a></li>
</ul>
</li>
<li><a href="#">SERVICES</a>
<ul class="sousMenu">
<li><a href="">NOS COMPETENCES</a></li>
<li><a href="">NOS POLES</a></li>
<li><a href="">LES DIFFERENTES ETAPES</a></li>
</ul>
</li>
<li><a href="#">REFERENCES</a>
</li>
<li id="last_item"><a href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div id="ligne_menu1"></div>
<div id="content">
<div class="app" id="app1"></div>
<div class="app" id="app2"></div>
<div class="app" id="app3"></div>
<div class="app" id="app4"></div>
<div class="app" id="app5"></div>
<div class="app" id="app6"></div>
<div class="app" id="app7"></div>
<div class="app" id="app8"></div>
<div class="app" id="app9"></div>
</div>
<div id="ligne_footer1"></div>
<div id="ligne_footer2"></div>
<div id="ligne_footer3"></div>
<div id="footer">
</div>
<script type="text/javascript">
(document).ready(startApp());
function startApp(){
$("body").css("overflow", "hidden");
var a = $("#app1");
a.css("left", "-2000px");
a.css("visibility", "visible");
a = $("#app2");
a.css("left", "-1500px");
a.css("visibility", "visible");
a = $('#app3');
a.css("left", "2700px");
a.css("visibility", "visible");
a = $('#app4');
a.css("left", "-1800px");
a.css("visibility", "visible");
a = $('#app5');
a.css("left", "1600px");
a.css("visibility", "visible");
a = $('#app6');
a.css("left", "2340px");
a.css("visibility", "visible");
a = $('#app7');
a.css("left", "-2400px");
a.css("visibility", "visible");
a = $('#app8');
a.css("left", "2000px");
a.css("visibility", "visible");
a = $('#app9');
a.css("left", "2450px");
a.css("visibility", "visible");
showAccueil();
}
function getLeft(div){
var d = $(div);
return parseInt(d.css("left"));
}
function showAccueil(){
var end = true;
if (!moveDiv($("#app1"), getLeft($("#app1")), 0, true )) end=false;
if (!moveDiv($("#app2"), getLeft($("#app2")), 350, true )) end=false;
if (!moveDiv($("#app3"), getLeft($("#app3")), 700, false)) end=false;
if (!moveDiv($("#app4"), getLeft($("#app4")), 0, true )) end=false;
if (!moveDiv($("#app5"), getLeft($("#app5")), 350, false)) end=false;
if (!moveDiv($("#app6"), getLeft($("#app6")), 700, false)) end=false;
if (!moveDiv($("#app7"), getLeft($("#app7")), 0, true )) end=false;
if (!moveDiv($("#app8"), getLeft($("#app8")), 350, false)) end=false;
if (!moveDiv($("#app9"), getLeft($("#app9")), 700, false)) end=false;
if (!end)
window.setTimeout("showAccueil()",10);
else {
$("body").css("overflow", "visible");
}
}
function moveDiv(div, posD, posA, dir){
//if dir = true move left else move right
if (dir == true){
if (posD <= posA-200){
posD += 50;
}
else if ((posD > posA-200) && (posD <= posA-50)){
posD += 15;
}
else if (posD > posA-50) {
posD += 5;
}
if (posD >= posA-2){
posD = posA;
}
div.css("left", posD+"px");
}
else{
if (posD >= posA+200){
posD -= 50;
}
else if ((posD < posA+200) && (posD >= posA+50)){
posD -= 15;
}
else if (posD < posA+50) {
posD -= 3;
}
if (posD <= posA+2){
posD = posA;
}
div.css("left", posD+"px");
}
if (posD == posA) return true;
else return false;
}
</script>
</body>
</html>
----------------------------------------------------------------
/*
Document : cssDesign
Created on : 15 nov. 2010, 16:51:20
Author : Clément
Description:
Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
base resolution: 1360x768
*/
/*
root {
display: block;
}
*/
* {margin:0;padding:0;}
body {
margin: 0px;
max-height: 1100px;
}
#content {
width:1000px;
height: 820px;
/*background-color: gray;*/
margin: auto;
padding-top: 50px;
}
#entete {
height: 15px;
padding-left: 10px;
background-color: gray;
}
#entete p {
margin: 0px;
color:white;
font-size: 12px;
font-family: Arial;
width: 400px;
}
#bg_menu1 {
width: 100%;
margin: auto;
background-image: url("../images/design/bg_menu.png");
background-repeat:repeat-x;
}
#bg_menu2 {
width: 1000px;
margin: auto;
}
#menu {
font-family: "Arial Narrow", Arial, "MS Sans Serif";
font-size: 14px;
width: 100%;
}
#menu, #menu ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align: center;
height: 30px;
}
#menu ul {
padding-top: 8px;
margin: 0px;
}
#menu a {
/*background-color: transparent;*/
color: #fff;
text-decoration: none;
width: 144px;
padding: 8px 40px 5px 40px;
margin-left: 6px;
margin-right: -5px;
}
#menu a:hover {
background-image: url("../images/design/bg_menu_hover.png");
background-repeat: repeat-x;
}
#menu li {
display: inline;
text-decoration: none;
border-right: 1px solid #c3bcbc;
height: 30px;
margin: 0px 0px 0px -5px;
padding-right: 2px;
}
#menu li ul {
position: absolute;
width: 144px;
display: none;
}
#menu li ul li {
margin: 0px;
padding: 0px;
border-top: 1px solid #000;
}
#menu li ul ul {
margin: 0px;
padding: 0px;
}
#last_item {
border: none !important;
}
#ligne_menu1 {
margin-top: 1px;
height: 2px;
background-color: #d40000;
}
.app {
width: 300px;
height: 225px;
border: 1px solid #dcdcdc;
/*margin-left: 23px;
margin-top: 25px;*/
position: relative;
float : left;
margin-bottom: 50px;
}
#app1 {
background-color: gray;
visibility: hidden;
}
#app2 {
background-color: gray;
left: 350px;
}
#app3 {
background-color: gray;
left: 700px;
}
#app4 {
background-color: gray;
}
#app5 {
background-color: gray;
left: 50px;
}
#app6 {
background-color: gray;
left: 700px;
}
#app7 {
background-color: gray;
}
#app8 {
background-color: gray;
left: 50px;
}
#app9 {
background-color: gray;
left: 700px;
}
#ligne_footer1 {
height: 1px;
margin-bottom: 4px;
background-color:#948e8e;
}
#ligne_footer2 {
height: 2px;
margin-bottom: 2px;
background-color:#827b7b;
}
#ligne_footer3 {
height: 4px;
margin-bottom: 1px;
background-color:#6d6767;
}
#footer {
width: 100%;
margin: auto;
/*height:1080px;*/
height: 130px;
background-color:#4b4040;
}