j'ai crée deux sites amateurs sur le meme modele, en utilisant le css.
1er
2eme
Et les liens, dans la barre de navigation ne marche pas. Pour l'instant, il n'y a pas d'url pour les liens. Mais il devrait quand même actualiser la page.
Edit : il s'affiche sous IE mais pas FF
Mon css 1ere page
CODE
a {
color: #ffffff;
font-size: 10pt;
}
.header {
background-image: url(images/titre.JPG);
width: 750;
height: 147;
left: 50%;
margin-left: 125px;
margin-bottom: 15px;
}
div.page {
width: 750
left: 50%;
margin-left: -375px;
}
#gauche {
position: absolute;
left:0;
width: 190;
}
#centre {
position: absolute;
}
.hautmenu {
background-image: url(images/Menu/haut_menu.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
list-style-type: none;
margin-left: 125;
padding:0;
width: 190;
height: 26;
}
.fondmenu {
background-image: url(images/Menu/fond_menu.bmp);
font-family: Arial;
font-size: 10pt;
color: #ffffff;
list-style-type: none;
margin-left: 125;
width: 190;
}
.basmenu {
background-image: url(images/Menu/bas_menu.bmp);
margin-left: 125px;
width: 190;
height: 26;
}
.hautcentre {
background-image: url(images/Centre/haut_menu.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
margin-left: 320px;
width: 560;
height: 27;
}
.fondcentre {
background-image: url(images/Centre/fond_menu.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
list-style-type: none;
margin-left: 320px;
width: 560;
}
.fondcentre li {
font-size: 10pt;
}
.bascentre {
background-image: url(images/Centre/bas_menu.bmp);
margin-left: 320px;
width: 560;
height: 27;
}
contenu 1ere page
CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="header">
</div>
<div id="gauche">
<div class="hautmenu">
<li> Resultats</li>
</div>
<div class="fondmenu">
<li> <a href="#">Ligue 1</a></li>
<li> <a href="#">Coupes Nationales</a></li>
<li> <a href="#">Coupes d'Europe</a></li>
<li> <a href="#">Amateurs</a></li>
</div>
<div class="hautmenu">
<li> Le Club</li>
</div>
<div class="fondmenu">
<li> <a href="#">Effectif</a></li>
</div>
<div class="hautmenu">
<li> Media</li>
</div>
<div class="fondmenu">
<li> <a href="#">Resumés Video</a></li>
<li> <a href="#">Buts Audio</a></li>
<li> <a href="#">Chants de Supporters</a></li>
</div>
<div class="basmenu">
</div>
</div>
<div id="centre">
<div class="hautcentre">
<center>Accueil</center>
</div>
<div class="fondcentre">
<u>Dernières Brèves</u>
<br/>
<a href=>08/01/2006 - Le groupe contre Noisy-le-Sec</a>
<br/>
<a href=>05/01/2006 - Victoire face à monaco</a>
<br/>
<a href=>04/01/2006 - Le match aura lieu à Noisy-le-Sec</a>
<br/>
<a href=>04/01/2006 - Le Groupe Contre Monaco</a>
<br/>
<a href=>03/01/2006 - Le CNOSF fait pression.</a>
<hr width=50% color=#ffffff>
<u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>
<li> Jacques Santini a convoqué une liste de 16 joueurs pour affronter Noisy Le Sec :</li><br/>
<li> Dans les buts : Cool, Hamel</li>
<li> En Défense : Radet, Jaurès, Grichting, Coulibaly, Martin</li>
<li> En milieu : Violeau, Cheyrou, Lachuer, Kahlenberg, Berson, Mathis</li>
<li> En attaque : Pieroni, Luyindula, Genest</li>
</div>
<div class="bascentre">
</div>
</div>
</body>
</html>
Css 2eme page
CODE
a {
color: #ffffff;
font-size: 10pt;
}
.header {
background-image: url(images/titre.bmp);
width: 700;
height: 130;
left: 50%;
margin-left: 150px;
margin-top: 5px;
}
div.page {
width: 750
left: 50%;
margin-left: -375px;
}
#gauche {
position: absolute;
left:0;
width: 190;
margin-top: 10px;
}
#centre {
position: absolute;
margin-top: 10px;
}
.hautmenu {
background-image: url(images/Menu2/haut_menu.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
list-style-type: none;
margin-left: 125;
padding:0;
width: 190;
height: 26;
}
.fondmenu {
background-image: url(images/Menu2/fond_menu.bmp);
font-family: Arial;
font-size: 10pt;
color: #ffffff;
list-style-type: none;
margin-left: 125;
width: 190;
}
.fondmenu li {
font-size: 10pt;
}
.basmenu {
background-image: url(images/Menu2/bas_menu.bmp);
margin-left: 125px;
width: 190;
height: 26;
}
.hautcentre {
background-image: url(images/Centre2/haut_centre.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
margin-left: 320px;
width: 560;
height: 27;
}
.fondcentre {
background-image: url(images/Centre2/fond_centre.bmp);
font-family: Arial;
font-size: 12pt;
color: #ffffff;
list-style-type: none;
margin-left: 320px;
width: 560;
}
.fondcentre li {
font-size: 10pt;
}
.bascentre {
background-image: url(images/Centre2/bas_centre.bmp);
margin-left: 320px;
width: 560;
height: 27;
}
contenu 2eme page
CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css"/>
</head>
<body>
<div class="header">
</div>
<div id="gauche">
<div class="hautmenu">
<li> Le Groupe</li>
</div>
<div class="fondmenu">
<li> <a href="#">Actu</a></li>
<li> <a href="photos.html">Photos</a></li>
</div>
<div class="hautmenu">
<li> Media</li>
</div>
<div class="fondmenu">
<li> <a href="#">Chansons</a></li>
<li> <a href="#">Paroles de Chansons</a></li>
</div>
<div class="hautmenu">
<li> Partenaires</li>
</div>
<div class="fondmenu">
<li><a href="http://emerdeurpro.skyblog.com"> emerdeurpro</a></li>
</div>
<div class="hautmenu">
<li> Photo de la semaine</li>
</div>
<div class="fondmenu">
<li><a href="java script: var tt=window.open('images/photo%20ordimessen/logo.jpg','','scrollbars=no,width=400,height=262,resizable=no');">
<img src=images/photo%20ordimessen/logo_small.jpg></a></li>
</div>
<div class="basmenu">
</div>
</div>
<div id="centre">
<div class="hautcentre">
<center>Accueil</center>
</div>
<div class="fondcentre">
<u>Dernières Brèves</u>
<br/>
<a href=>09/01/2006 - Un nouveau DJ.</a>
<br/>
<a href=>08/01/2006 - Un nouveau pianiste electrique.</a>
<br/>
<a href=>07/01/2006 - Creation du Groupe Ordimessen</a>
<hr width=50% color=#ffffff>
<u>08/01/2006 - Le groupe contre Noisy-le-Sec</u>
<li> <a href="#">Nous avons un nouveau DJ. Il s'appelle Mohamed.
</div>
<div class="bascentre">
</div>
</div>
</body>
</html>
