Design

Vous trouvez que le design est nul.
Rassurez vous, moi aussi j'aimerais un meilleur design.

Si vous êtes bon pour faire des images ou des designs pour forums ou des designs en CSS.
Vous allez pouvour m'aider.

Pour ceux ne connaissant pas Nico Robin, c'est une belle fille du manga One Piece (ressemblant à Dragon Ball).
Si vous voulez des images d'elle, regardez sur mon site ou sur d'autres sites ou tapez "Nico Robin" sur un moteur de recherche.
Vous n'êtes absolument pas obligés de faire des boutons (avec des images en fond).
Si vous ne savez pas quel couleur dominante prendre, j'aimerais le violet, mais ce n'est absolument pas obligatoire.
Je préferais que là où il y a le texte principal (/le contenu/le "corps de la page") ait un fond blanc, mais ce n'est non plus obligatoire.

Pour ceux qui est du texte (ceci n'est pas valable pour la bannière).
Prenez une police "simple" (que tout le monde a sur son PC) comme "Times New Roman".

Pour ceux qui ne connaissent pas le CSS et le (X)HTML
Pour ceux qui connaissent le CSS et le (X)HTML

Pour la bannière
Si vous réussissez ...

Mes explications sont incomplètes, vous ne les comprenez pas.
Dites le moi par mail.

Si je vous demande un design, ce n'est pas parce que je n'ai pas envie de le faire.
C'est parce que tout ce que je fais est moche.
(La bannière tout en haut, c'est pas moi qui l'ai faite.)

Pour ceux qui ne connaissent pas le CSS et le (X)HTML

Dans mon site il y a des blocs.
Dedans on peut y mettre des sous-blocs.
Pour chaque bloc et sous-bloc on peut :

Mettre un fond avec une image ou n'importe quel couleur
Changer la couleur du texte
Le changer de place, de forme (il doit rester rectangulaire).
Mettre une bordure de la taille que l'on veut avec la couleur que l'on veut.

Dans mon site il y a 5 blocs :

Un premier tout en haut sans bordure contenant la bannière du site (, c'est l'en-tête).
Un 2e, juste en dessous su premier, avec 4 liens "Accueil / À propos / L'équipe / Archives" (, c'est la barre de liens).
En dessous, il y a un bloc à gauche, avec des liens vers les partis importantes du site (, c'est le menu).
Un autre à droite avec le contenu de la page.
Un dernier (, le pied de page) qui est tout en bas.

Il y a également 3 sous-blocs qui sont dans le menu :

Le 1^er avec comme titre "Nico Robin"
Le 2^e avec comme titre "Le Site"
Le 3^e avec comme titre "One Piece"

Pour me faire un design, faites moi une image me montrant à quoi mon site devrait ressembler.
De préférence, j'aimerais que l'image soit au format png (ou jpg) et de format 1024*768 pixels; mais encore une fois ce n'est pas obligatoire.
Envoyez la moi par mail : sites.mania@gmail.com.
Je m'occuperais du codage en XHTML/CSS.
Merci et bonne chance.

Pour ceux qui connaissent le CSS et le (X)HTML

Si vous connaissez le CSS et le (X)HTML, je vais vous laissait faire.
Mais avant tout je vais vous donner le code source.

Le code XHTML
Le code CSS

Le code XHTML

<!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" xml:lang="fr" lang="fr"> 
 <head>
 
  <title>Design - Nico Robin Mania (One Piece)</title>
  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />   <link rel="icon" type="image/png" href="http://nicorobin.olympe-network.com/commun/site/images/favicon/tete-nr_favicon-nrm.png" />
   
   <link rel="stylesheet" media="screen" type="text/css" title="Light" href="http://nicorobin.olympe-network.com/commun/site/include/design/light/light.css" />
    
  <meta name="keywords" content=", nico, robin, mania, one, piece, miss, all, sunday, nico robin, one piece, nico robin mania, miss all sunday" />
  <meta name="description" content="Site qui parle du manga One Piece.
Et plus particulièrement de Nico Robin." />
  
</head>
<body><div id="en-tete" >
 
 
     <img src="http://nicorobin.olympe-network.com/commun/site/images/bannieres/moyen/cool-noir_moyen-ban-nrm.jpg" alt="Nico Robin Mania" title="Nico Robin Mania" />
     
</div><div id="bliens" ><div id="texte-bliens" >
  
 <a href="http://nicorobin.olympe-network.com/fr/" >Accueil</a> /
 <a href="http://nicorobin.olympe-network.com/fr/site/a-propos/" >À propos</a> /
 <a href="http://nicorobin.olympe-network.com/fr/site/equipe/" >L'équipe</a> /
 <a href="http://nicorobin.olympe-network.com/fr/site/archives/" >Archives</a>
  
</div></div><div id="menu"><div id="texte-menu">

<div id="menu_robin">
 
 <a href="http://nicorobin.olympe-network.com/fr/personnages/pirates/chapeau-paille/robin/" class="titre">Nico Robin</a>
 
 <ul>
  <li><a href="http://nicorobin.olympe-network.com/fr/personnages/pirates/chapeau-paille/robin/enfance/">Son enfance</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/personnages/pirates/chapeau-paille/robin/miss-all-sunday/">Miss All Sunday</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/personnages/pirates/chapeau-paille/robin/robin/">Nico Robin</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/personnages/pirates/chapeau-paille/robin/images/">Images</a></li>
 </ul>
 
</div>

<div id="menu_site">
 
 <a href="http://nicorobin.olympe-network.com/fr/site/" class="titre">Le site</a>
 
 <ul>
  <li><a href="http://nicorobin.olympe-network.com/fr/site/a-propos/">À propos</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/site/affichage.php">Optimiser l'affichage</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/site/equipe/">L'équipe</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/site/archives/">Archives</a></li>
 </ul>
 
</div>

<div id="menu_one-piece">
 
 <a href="http://nicorobin.olympe-network.com/fr/one-piece.php" class="titre">One Piece</a>
 
 <ul>
  <li><a href="http://nicorobin.olympe-network.com/fr/personnages/">Personnages</a></li>
  <li><a href="http://nicorobin.olympe-network.com/fr/objets/">Objets</a></li>
 </ul>
 
</div><hr />

<div id="menu_pub" >
  

    <script type="text/javascript"><!--
     google_ad_client = "pub-9542127621025815";
     /* 120x240 */
     google_ad_slot = "2936506940";
     google_ad_width = 120;
     google_ad_height = 240;
     //-->
    </script>
    <script type="text/javascript"
     src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
     
</div>
   
</div></div>

<div id="head" ><div id="texte-head" >
<h1>Code source d'une page de mon site</h1>

</div></div>
  
<div id="pp"><div id="texte-pp">
 
 <p>
  <a href="mailto:sites.mania@gmail.com" title="Mon adresse email">sites.mania@gmail.com</a><br />
  Ce site a été créé grâce à <a href="http://nicorobin.olympe-network.com/fr/site/autres/programmes/notepad/">Notepad++</a><br />
  Je dois également remercier <a href="http://nicorobin.olympe-network.com/fr/site/autres/sdz/">le Site du Zéro</a> qui m'a beaucoup aidé<br />
  Copyright 2009
 </p>
 
 <div id="statistiques">
 
 <!-- Google analystics -->
 
 <div id="google-analystics">
	
 <script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
	
 <script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-9428944-1");
  pageTracker._trackPageview();
  } catch(err) {}
 </script>
   
 </div>
 
 <!-- Xiti analyse -->
 
     <div id="xiti-logo">
   
    <script type="text/javascript">
     <!--
     document.write('<a href="http://www.xiti.com/xiti.asp?s=399269" title="WebAnalytics" onclick="window.open(this.href);return false">');
     Xt_param = 's=399269&p=';
     try {Xt_r = top.document.referrer;}
     catch(e) {Xt_r = document.referrer; }
     Xt_h = new Date();
     Xt_i = '<img width="80" height="15" border="0" ';
     Xt_i += 'src="http://logv6.xiti.com/bcg.xiti?'+Xt_param;
     Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
     if(parseFloat(navigator.appVersion)>=4)
     {Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
     document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'"></a>');
     //-->
    </script>
	
    <noscript>
  
     <div id="xiti-logo-noscript">
   
      <a href="http://www.xiti.com/xiti.asp?s=399269" title="WebAnalytics" onclick="window.open(this.href);return false"><img width="80" height="15" src="http://logv6.xiti.com/bcg.xiti?s=399269&p=&" alt="WebAnalytics" /></a>
   
     </div>
    
    </noscript>
 
    </div>
    
 </div>
 
 <br />
 
 <a href="#en-tete">Revenir en haut</a>
 
</div></div>

</body>
</html>

Le code CSS

body
{
 background-color: white;
 font-size: 16px;
 text-decoration: none;
 color: black;
 text-align: center;
 
 margin: auto;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 
 font-family: "Times New Roman", sans-serif;
}

#en-tete
{
 margin-top:10px;
 margin-bottom:10px;
 
 text-align: center;
}

#bliens
{
 border: 1px solid black;
 margin-bottom:20px;
 
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
 
 text-align: left;
}

#texte-bliens
{
}

#menu
{
 float:left;
 
 width:130px;
 
 min-height: 80px;
 
 border: 1px solid black;
 
 margin-bottom:20px;
 
 padding-left: 10px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 4px;
 
 text-align: left;
}

#texte-menu
{
}

#menu #texte-menu ul, #menu #texte-menu ul li
{
 margin-left: 0px;
 padding-left: 0px;
 
 list-style-type: none;
 list-style-position: inside;
}

#menu #texte-menu a.titre
{
 text-align: center;
 font-weight: bold;
 
 display: block;
}

#menu_nico-robin
{
}

#menu_site
{
}

#menu_one-piece
{
}

#menu_pub
{
}

#head
{
 border: 1px solid black;
 
 min-height: 80px;
 min-width: 10px;
 
 margin-left: 165px;
 margin-bottom:20px;
 
 padding-left: 10px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 6px;
 
 text-align: left;
}

#texte-head
{
}

#pp
{
 clear: both; /*  Pour que le block "p-p" ne soit pas affecté par le float de "menu" */

 padding-left: 5px;
 padding-right: 5px;
 padding-top: 4px;
 padding-bottom: 4px;

 text-align: center;
 
 margin: 0 auto; /* Pour centrer le block */
}

#texte-pp
{
}

a
{
 text-decoration: none;
 color : blue;
}

a:visited 
{
 color : blue; 
}

a:hover
{
 text-decoration: underline;
}

strong
{
 font-weight: bold;
}

em 
{
 text-decoration: underline;
 font-style: normal; /* Pour que ca ne fasse pas italique */
}

img
{
 max-width: 1000px;
 max-height: 1000px;
 
 margin-top: 1px;
 margin-bottom: 1px;
 margin-left: 1px;
 margin-right: 1px;
 
 border: none;
}

a img
{
 text-decoration: none;
 border: none;
}

h1
{
 font-size: 120%;
}

h2
{
 font-size: 116%;
}

h3
{
 font-size: 112%;
}

h4
{
 font-size: 109%;
}

h5
{
 font-size: 106%;
}

h6
{
 font-size: 103%;
}

h1, h2
{
 text-align: center;
 font-weight: bold;
}

/* Les listes à puces */

dd
{
 list-style-position: outside;
}

ul
{
 list-style-type: disc;
}

/* Les tableaux */

table, td
{
 border: 1px solid black;
 border-collapse: collapse;
}

caption /* Titre du tableau */
{
 caption-side: top;
}

code
{
 min-width: 100px;
 
 background-color: white;
 color: black;
 
 margin-left: 1px;
 margin-right: 5px;
 
 padding-left: 7px;
 padding-right: 7px;
 padding-top: 3px;
 padding-bottom: 3px;
 
 border-color: black;
 border-width: 1px;
 border-style: dashed; /* Bordure en tirets */
 
 display: block;
}

code textarea

{
 height: 100%;
 width: 100%;
}

hr
{
}

/* Les classes */

.center
{
 text-align: center;
 
 display : block; /* Il faut que ce soit de type block, sinon ça ne marche pas */
}

.gras
{
 font-weight: bold;
}

.souligne
{
 text-decoration: underline;
}

.red
{
 color: red;
}

.lien_normal
{
 text-decoration: none;
 color: black;
}

.lien_normal :visited
{
 color: black;
}

a .lien_normal :visited
{
 color: black;
}

.lien_normal a :visited
{
 color: black;
}

.float
{
 float: left;
 clear: right;
 
 padding-left: 3px;
 padding-right: 5px;
 padding-top: 3px;
 padding-bottom: 3px;
}

.float_left
{
 float: left;
 
 padding-left: 3px;
 padding-right: 5px;
 padding-top: 3px;
 padding-bottom: 3px;
}

.float_right
{
 float: right;
 
 padding-left: 5px;
 padding-right: 3px;
 padding-top: 3px;
 padding-bottom: 3px;
}

.no_float
{
 clear: both;
}

.pas_afficher
{
 display: none;
}

.list-sans-puces
{
 list-style-type: none;
}

.list-sans-retrait
{
 list-style-position: inside;
}

.margin-left-0
{
 margin-left: 0px;
}

.padding-left-0
{
 padding-left: 0px;
}

.list_apparence-normal
{
 margin-left: 0px;
 padding-left: 0px;
 
 list-style-type: none;
 list-style-position: inside;
}

.no-space
{
 margin-top: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
}

Cliquez ici, pour allez là ou est la feuille de style.
Si vous savez faire un design extensible, ce serait mieux qu'un design fixe, sinon tant pis j'essaierais d'adapter moi-même.

Pour me faire un design, vous pouvez modifier le XHTML et le CSS, bien sur.
Envoyez le fichier XHTML et CSS moi par mail : sites.mania@gmail.com. Merci et bonne chance.

Pour la bannière

Vous n'êtes pas obligés de mettre une bannière dans votre design.
Si vous ne m'en donnez pas, je me débrouillerais pour qu'on m'en fasse une.

Si vous voulez en faire une.
Allez cherchez des images de Nico Robin sur mon site ou d'autres sites ou sur les moteurs de recherche.
Elle devra faire entre 100 et 140 pixels de hauteur et entre 550 et 590 de longueur.

Si vous réussissez ...

Si vous me faites un design sur image qui me plait et que j'arrive à le coder en CSS, je mettrais un lien ou une bannière (de maximum 400*100 pixels) du site de votre choix sur la page d'accueil pendant 3 mois.
Si vous me faites un design en CSS (aux normes W3C), je mettrais un lien du site de votre choix sur la page d'accueil pendant 4 mois.
Si vous me faites une belle bannière qui va bien avec le design, je mettrais le lien de votre site un mois en plus.
(Ceci est le minimum, je peux mettre votre lien plus longtemps si le design me plait beaucoup).