Bonjour,
Juste pour une idée;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
font-family: Verdana, Arial, serif;
font-size: 11px;
letter-spacing:;
color: #5E5E5E;
background: url('design_10.png') #E4E9E2 repeat-y top left;
}
a {
text-decoration: none;
}
img {
border: 0px;
}
.sondage {
width: 360px;
margin: auto;
}
.sondage .submit {
font-size: 13px;
border: 1px solid #B3B3B3;
background: url('design_25.png') repeat-x top left;
}
.sondage .submit:hover {
border: 1px solid #F5F5B6;
background: url('design_25.png') repeat-x 0px -20px ;
}
.sondage .offsubmit {
font-size: 13px;
border: 1px solid #B3B3B3;
background: url('design_25.png') repeat-x top left;
}
.sondage .offsubmit:hover {
}
#header_droite {
background: url('design_07.png') no-repeat top right;
height: 122px;
width:201px;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 122px;
margin: 0px;
padding: 0px;
background: url('design_06.png') #202C38 repeat-x top left;
}
#header #logo {
position: absolute;
left: 0;
top: 0;
height: 122px;
width: 83px;
}
#menu {
list-style-type: none;
width: 510px;
height: 122px;
margin: auto;
}
#menu li {
float: left;
}
#menu a {
display: block;
background: url('design_03.png') no-repeat top left;
height: 122px;
width: 85px;
text-align: center;
font-family: Verdana, Arial, serif;
font-size: 11px;
color: #FFFFFF;
position: relative;
}
#menu a span{
position: absolute;
display: block;
width: 60px;
bottom: 35px;
left: 50%;
margin-left: -30px
}
#menu a:hover {
background: url('design_03.png') no-repeat -85px 0px;
}
#search {
height: 37px;
margin: 0px;
padding: 0px;
background: url('design_09.png') repeat-x top left;
}
#curve {
float: left;
height: 37px;
width: 139px;
background: url('design_08.png') no-repeat top left;
}
#search form {
float: left;
padding: 0px;
width: 180px;
height: 21px;
border: 1px solid #D1DBD2;
}
#search #searchfield {
color: #151A1E;
background: url('design_04.png') top left repeat-x;
}
#search #button {
height: 21px;
width: 30px;
border: 0px;
font-size: 10px;
color: #FFFFFF;
background: url('design_05.png') top left no-repeat;
}
/*#search #member {
float: right;
border: 1px solid black;
height: 20px;
width: 200px;
padding: 2px 0px 0px 0px;
margin: 0px 35px 0px 0px;
color: #602017;
background: url('design_14.png') 0px 5px no-repeat;
}*/
#member{
height: 20px;
width: 194px;
float: right;
margin-right: 25px;
padding: 0px;
border: 1px solid blue;
}
#content {
clear: both;
background: url('design_10.png') #E4E9E2 repeat-y top left;
}
#left {
float: left;
width: 138px;
}
#left a {
color: #12151C;
}
#left a:hover {
color: #611C17;
}
#left h3 {
height: 26px;
padding: 8px 0px 0px 20px;
margin: 0px;
font-weight: bold;
font-family: Verdana, Arial, serif;
font-size: 11px;
color: #DEE3DC;
background: url('design_12.png') no-repeat top left;
}
#left #first {
height: 22px;
padding: 4px 0px 0px 20px;
margin: 0px;
font-weight: bold;
font-family: Verdana, Arial, serif;
font-size: 11px;
color: #DEE3DC;
background: url('design_11.png') no-repeat top left;
}
#left ul {
margin: 0px 0px 0px 22px;
padding: 8px 0px 13px 0px;
}
#left ul .whitespace {
margin: 13px 0px 0px 0px;
}
#left ul li {
margin: 0px;
padding: 0px;
list-style-image: url('design_13.png');
}
#right {
padding-top: 0px;
}
.window {
height: 100%;
margin: 0px 146px 10px 150px;
background: url('design_20.png') #CCD1CA repeat-y 0px 22px;
}
.global {
height: 100%;
width: 100%;
background: url('design_20.png') repeat-y right 22px;
}
.header {
height: 22px;
width: 100%;
background: url('design_19.png') repeat-x top left;
}
.header .left {
height: 22px;
width: 2px;
float: left;
background: url('design_17.png') no-repeat top left;
}
.header .right {
height: 22px;
width: 2px;
float: right;
background: url('design_18.png') no-repeat top right;
}
.header h2 {
margin: 0px;
padding: 4px 0px 0px 10px;
font-weight: bold;
font-family: Verdana, Arial, serif;
font-size: 11px;
color: #DEE3DC;
}
.content {
margin: 15px;
}
.footer {
height: 2px;
width: 100%;
overflow: hidden;
background: url('design_23.png') repeat-x top left;
}
.footer .left {
height: 2px;
width: 2px;
float: left;
background: url('design_21.png') no-repeat top left;
}
.footer .right {
height: 2px;
width: 2px;
float: right;
background: url('design_22.png') no-repeat top right;
}
.square {
margin-bottom: 20px;
border: 1px solid #979797;
background: url('design_24.png') #DDDFDA repeat-x bottom left;
}
.square a {
color: #6C7EA8;
}
.square a:hover {
text-decoration: underline;
}
.square .warning {
padding: 9px;
border: 1px solid #A7A8A7;
background: url('design_26.png') #E7E9E5 repeat;
}
.square .warning span {
font-size: 12px;
font-weight: bold;
}
.square h4 {
height: 22px;
margin: 0px;
padding: 7px 0px 0px 20px;
color: #611A16;
font-size: 12px;
font-weight: bold;
background: url('design_16.png') repeat-x top left;
}
.square h4 span {
color: #12151C;
}
.square h4 span span {
color: #99A7BD;
font-weight: normal;
}
.square h5 {
padding: 0px 0px 0px 8px;
margin: 16px 0px 16px 0px;
border-left: 4px solid #611A16;
color: #611A16;
font-size: 12px;
font-weight: normal;
}
.square h6 {
padding-left: 12px;
margin: 16px 0px 16px 0px;
color: #12151C;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.square .text {
margin: 0px;
padding: 0px 8px 0px 8px;
}
.ad {
float: right;
width: 126px;
margin: 0px 10px 0px 10px;
background: url('design_20.png') #CCD1CA repeat-y 0px 22px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#"><img src="design_01.png" width="83px" height="122px" alt="Logo Toxic Area" title="Toxic Area : retour à l'accueil" /></a>
</div>
<div id="header_droite">
</div>
<ul id="menu">
<li><a href="#"><span>Accueil</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Articles</span></a></li>
<li><a href="#"><span>Liens</span></a></li>
<li><a href="#"><span>Forums</span></a></li>
<li><a href="#"><span>Login</span></a></li>
</ul>
</div>
<div id="search">
<div id="curve"></div>
<form method="post" action="#">
<input type="text" name="search" id="searchfield" value="rechercher" onclick="javascript:document.getElementById('searchfield').value = ''" />
<input type="submit" id="button" value="" />
</form>
<div id="member">
<object id="player" type="application/x-shockwave-flash" data="player.swf?son=music.mp3&autoplay=0"width="194" height="20">
<param name="movie" value="player.swf?son=music.mp3" />
<param name="bgcolor" value="#CCD1CA" />
</object>
</div>
</div>
<div id="content">
<div id="left">
<h3 id="first">Tutoriels</h3>
<ul>
<li><a href="#">Créer un site Web</a></li>
<li><a href="#">PHP/MySQL</a></li>
<li><a href="#">Javascript</a></li>
<li class="whitespace"><a href="#">Photoshop</a></li>
<li><a href="#">3D Studio Max</a></li>
<li><a href="#">Flash</a></li>
<li class="whitespace"><a href="#">MAO</a></li>
<li class="whitespace"><a href="#">C/C++</a></li>
<li><a href="#">ASM</a></li>
</ul>
<h3>Informations</h3>
<img src="design/images/design_02.png" style="padding-left: 6px" width="125px" height="61px" alt="" />
<ul>
<li><a href="#">Aide</a></li>
<li><a href="#">Contribuer</a></li>
<li><a href="#">Licence</a></li>
<li class="whitespace"><a href="#">Equipe</a></li>
<li><a href="#">A propos</a></li>
</ul>
<h3>Downloads</h3>
<ul>
<li><a href="#">Documentation</a></li>
<li class="whitespace"><a href="#">Musique</a></li>
<li><a href="#">Ressources</a></li>
<li><a href="#">Progammes</a></li>
</ul>
</div>
<div id="right">
<div class="ad">
<div class="global">
<div class="header">
<div class="left"></div>
<div class="right"></div>
<h2>Publicité</h2>
</div>
<div class="content">
</div>
<div class="footer">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
<div class="window">
<div class="global">
<div class="header">
<div class="left"></div>
<div class="right"></div>
<h2>News</h2>
</div>
<div class="content">
<div class="square">
<h4><span>06.02.07 <span>-</span></span> Des nouvelles du front</h4>
<div class="text">
<h5>Lecteur audio</h5>
<p>
La fonction <em>autoplay</em> du lecteur a été désactivée, elle sera dans un avenir proche paramétrable via le profil de votre compte Toxic Area.
<br/>La reprise par Vitalic du désormais célèbre Technologic des Daft Punk est remplacée par Break Point de DJ Donna.
</p>
<p class="warning">
<span>Attention</span><br/><br/>
Il se peut que la musique ne soit pas mise à jour automatiquement. Si c'est le cas, le problème provient du fait que votre navigateur
garde en cache (en mémoire) l'ancien morceau afin de vous permettre d'y accéder plus rapidement. Il vous suffit de vider le cache pour
bénéficier du nouveau titre (la méthode dépend de votre navigateur).
</p>
<h5>Développement de la V6</h5>
<h6>Gestion des erreurs</h6>
<p>
Le système de gestion des erreurs est entièrement terminé. Si vous essayez par exemple d'accéder à <a href="http://www.toxicarea.net/blabla" title="Lien vers un document qui n'existe pas">http://www.toxicarea.net/blabla</a> (un document qui n'existe pas), la page d'erreur vous
informe et vous redirige automatiquement vers l'index.
</p>
<h6>Les forums</h6>
<p>
Leur développement est au point mort. En effet, nous ne sommes toujours pas parvenu à résoudre le bug d'affichage sous Internet Explorer 7.
Jusqu'à présent ce problème était qualifié de "mineur" mais la sortie de Windows Vista change nos considérations et met la résolution de ce bug
en tête de nos priorités.
</p>
<h6>Administration</h6>
<p>
Nous avons élaboré les prémices du système de gestion de contenu de Toxic Area. Il n'en est qu'à ses premiers balbutiements mais permet déjà
aux membres de la team de gérer les news.
</p>
<h6>Nos priorités</h6>
<ul>
<li>résolution du bug d'affichage sous Internet Explorer 7</li>
<li>développement de l'espace membre</li>
<li>mise en place des forums</li>
<li>...</li>
</ul>
<h5>Contribuer au développement</h5>
<p>
Vous pouvez contribuer au développement de Toxic Area : en nous signalant les bugs et les liens morts, vous nous permettez d'économiser un temps précieux.
</p>
<p>
Contactez nous à cette adresse : <em>shadowblade@toxicarea.net</em>
</p>
</div>
</div>
<div class="square">
<h4><span>17.01.07 <span>-</span></span> Petit sondage</h4>
<div class="text">
<h5>Introduction</h5>
<p>
Vous le savez, si nous travaillons en permanence à l'amélioration du site, c'est avant tout dans le but de vous proposer un
site agréable, accessible, esthétique. Il est donc essentiel que nous sachions la façon dont vous abordez les changements dont
le site bénéficie.
</p>
<p>
Je concèderais aux irréductibles pessimistes que le contenu n'est pas florissant pour l'instant et que les forums ne sont
toujours pas installés. Cependant, l'expérience que j'ai acquise dans le domaine du webmastering (gestion de site Web) durant
ces nombreuses années m'amène à penser qu'une base solide est garante d'une efficacité et une pérennité maximales. Une base solide
c'est une interface stable et multi plateforme, des scripts judicieusement programmés et optimisés, une code source clair et épuré.
Fort de ces observations, j'attache un intérêt particulier à peaufiner le site dans ses moindres détails afin de vous proposer une
<acronym title="Version 6">V6</acronym> impeccable.
</p>
<p>
Je travaille actuellement à la résolution d'un bug d'affichage sous Internet Explorer 7 et Safari ainsi qu'à l'adaptation des forums au
nouveau design (vous pouvez avoir un aperçu de la disposition des forums sur <a href="pages/forum.html" title="Aperçu des forums">cette page</a>).
</p>
<h5>Sondage</h5>
<p>Le script de sondage est programmé de telle manière que vous ne puissiez pas voter plusieurs fois. Lorsque vous aurez voté, le bouton sera désactivé automatiquement, inutile donc de vous acharner dessus <img src="design/images/hihi.gif" style="vertical-align: middle" height="19px" width="19px" alt="hihi" /></p>
<form method="post" action="index.php" class="sondage">
<p>Que pensez-vous du nouveau design ?</p>
<p class="sondage">
<label><input type="radio" name="nouveaudesign" value="4" /> Du grand art, tout simplement génial.</label><br />
<label><input type="radio" name="nouveaudesign" value="3" /> Esthétique soignée, agréable à l'oeil.</label><br />
<label><input type="radio" name="nouveaudesign" value="2" /> Rien d'extraordinaire, banal.</label><br />
<label><input type="radio" name="nouveaudesign" value="1" /> Aucune structure, aussi attirant qu'un tas de fumier.</label> <br />
<label><input type="radio" name="nouveaudesign" value="0" /> Ah bon.. il y avait un design encore pire que ça avant ?!</label>
</p>
<p style="text-align: center;">
<input type="submit" value="Voter" class="submit" /> <input type="button" value="Résultats" class="submit" onclick="window.open('pages/sondage.php','','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=390, left=100, top=100');return(false)"/><br/><br/>
</p>
</form>
</div>
</div>
<div class="square">
<h4><span>14.01.07 <span>-</span></span> Shake.. Break .. Bounce ..</h4>
<div class="text">
<p>
Lors de la transition entre la version 5 et 6 de Toxic Area, les habitués avaient pu constater l'apparition d'un lecteur
audio dans le coin supérieur droit de la page d'accueil. Dès que vous accédiez à la page, une musique se déclanchait et
enflammait le site vous condamnant à bouger frénétiquement votre corps afin d'éviter la combustion. Au regard des
nombreux échos positifs qui nous sont parvenus, il était de notre devoir d'implémenter à nouveau cet outil.
</p>
<p>
Trente secondes de concertation de la team et quelques heures de travail plus tard, le voici, le voilà ! Normalement, la
lecture se lance automatiquement mais si vous faites partie des récalcitrants à l'utilisation d'un navigateur Internet moderne
(Mozilla Firefox, Opera, ..), il se peut que ça ne soit pas le cas. Une seule solution à ce problème, changer au plus vite de
navigateur !
</p>
<p style="text-align: center;">
<img src="spread/audioplayer.png" height="333px" width="479px" alt="Audio player" />
</p>
<p>
Petite info supplémentaire, la musique diffusée sera changée hebdomadairement. Vous aurez bientôt la possibilité de voter pour la
musique de votre choix sur les forums, en attendant.. <em>enjoy the Chemical Brothers !</em>
</p>
</div>
</div>
<div class="square">
<h4><span>02.02.07 <span>-</span></span> Toxic Area fait peau neuve</h4>
<div class="text">
<p>
Voici le nouveau concept de design Toxic Area, assez simple mais ponctué d’éléments
graphiques dynamiques, il est le parfait compromis entre design et accessibilité.
</p>
<p>
Pour l'instant aucun lien ne fonctionne, nous sommes entrain de tester la stabilité du design sur
toutes les plateformes existantes car sa conception a nécessité l'utilisation de propriétés CSS avancées qui
ne sont pas gérées au mieux par certains navigateurs (IE5 ou encore Netscape).
</p>
<p>
Le design est signé ShadowBlade, évidemment <img src="design/images/smilies/hihi.gif" style="vertical-align: middle" height="19px" width="19px" alt="hihi" />
</p>
<p>
Si vous avez des questions ou autres, je reste à votre disposition : <em>shadowblade@toxicarea.net<em>
</p>
</div>
</div>
</div>
<div class="footer">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bon courage
