Je me permet de poster, une commande vient de se finir, celle de Kyou .

Bonjour, je fais appel à vous, car dans quelque jours je dois changer le design d'un forum, et j'aurais voulu une Page d'accueil, un peu plus travaillée, mais je n'ai pas vraiment le temps en ce moment d'essayer de comprendre comment faire. Avec les tableaux j'ai encore un peu de mal, j'ai vu qu'il y avait des tutoriaux dessus sur le forum, je m'y metterais plus tard. J'ai mis des valeurs pour les couleurs, les bordures, je sais pas si ça peut vous aider, il y a certainement des choses à rajouter. En espérant ne pas mettre trompée. J'ai déjà dans mon QEEL un javascript et un css appelé Onglet. Voila, je remercie d'avance celle ou celui qui pourra répondre à ma demande.

• Objet de la commande: Page d'accueil avec onglets (Partie changeante et parties fixes).
  
  
• Aperçu:

  Spoiler:

• Autoriser un membre à répondre [X] Oui [] Non (En cochant oui, vous donnez le droit aux membres de CSSActif qui ne sont pas codeurs officiels de répondre à votre demande)
  
  
• Détails:

ZONES DE TEXTE (onglets)

font-family: Georgia;
font-size: 12px;
text-align: justify;
color: #8C7F76;
vertical-align: middle;
width: 423px;
height: 134px;

Carré - ZONES DE TEXTE (onglets)

background-color: #DDD4C5;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
vertical-align: middle;
width: 468px;
height: 161px;



ZONES DE TEXTE (fixe à gauche)

font-family: Georgia;
font-size: 12px;
text-align: justify;
color: #8C7F76;
vertical-align: middle;
width: 152px;
height: 103px;

Carré - ZONES DE TEXTE (fixe à gauche)

background-color: #DDD4C5;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 161px;
height: 157px;


Carré - INFOBULLES

background-color: #DDD4C5;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 468px;
height: 105px;


Onglets

font-family: Georgia;
font-variant:small-caps;
font-size: 14px;
color: #8C7F76;
border: 1px solid #8C7F76;
border-left: 2px solid #8C7F76;
border-right: 2px solid #8C7F76;
background-color: #DDD4C5;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 107px;
height: 22px;

Onglets (hover)

font-family: Georgia;
font-variant:small-caps;
font-size: 14px;
color: #DDD4C5;
border: 1px solid #DDD4C5;
border-left: 2px solid #DDD4C5;
border-right: 2px solid #DDD4C5;
background-color: #8C7F76;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 107px;
height: 22px;


NAVIGATION

font-family: Georgia;
font-variant:small-caps;
font-size: 14px;
color: #8C7F76;
border: 1px solid #8C7F76;
border-left: 2px solid #8C7F76;
border-right: 2px solid #8C7F76;
background-color: #DDD4C5;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 137px;
height: 23px;

NAVIGATION (hover)

font-family: Georgia;
font-variant:small-caps;
font-size: 14px;
color: #DDD4C5;
border: 1px solid #DDD4C5;
border-left: 2px solid #DDD4C5;
border-right: 2px solid #DDD4C5;
background-color: #8C7F76;
-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 137px;
height: 23px;


INFOBULLES : (le CSS est déjà fait)

Code:

 <td>
            <div class="infobulle">
            <img src="http://i34.servimg.com/u/f34/09/04/35/83/twilig10.png" alt="Twilight">
            <span><img src="http://img7.hostingpics.net/pics/736704Sans_titre_2.gif"><br>
            Twilight - Fascination<br><br>
            <div><a href="http://twilight-france.1fr1.net/fascination-twilight-f4/">Le livre</a> |
            <a href="http://twilight-france.1fr1.net/film-1-twilight-f46/">Le film</a>
            </div>
            </span>
            </td>

            <td>
            <div class="infobulle">
            <img src="http://i34.servimg.com/u/f34/09/04/35/83/new_mo10.png" alt="New Moon">
            <span><img src="http://img7.hostingpics.net/pics/736704Sans_titre_2.gif"><br>
            New Moon - Tentation<br><br>
            <div><a href="http://twilight-france.1fr1.net/tentation-new-moon-f10/">Le livre</a> |
            <a href="http://twilight-france.1fr1.net/film-2-new-moon-f21/">Le film</a>
            </div>
            </span>
            </td>

            <td>
            <div class="infobulle">
            <img src="http://i34.servimg.com/u/f34/09/04/35/83/eclips10.png" alt="Eclipse">
            <span><img src="http://img7.hostingpics.net/pics/736704Sans_titre_2.gif"><br>
            Eclipse - Hésitation<br><br>
            <div><a href="http://twilight-france.1fr1.net/hesitation-eclipse-f11/">Le livre</a> |
            <a href="http://twilight-france.1fr1.net/film-3-eclipse-f106/">Le film</a>
            </div>
            </span>
            </td>

            <td>
            <div class="infobulle">
            <img src="http://i34.servimg.com/u/f34/09/04/35/83/breaki10.png" alt="Beaking Dawn">
            <span><img src="http://img7.hostingpics.net/pics/736704Sans_titre_2.gif"><br>
            Breaking Dawn - Révélation<br><br>
            <div><a href="http://twilight-france.1fr1.net/revelation-breaking-dawn-f12/">Le livre</a> |
            <a href="http://twilight-france.1fr1.net/film-4-breaking-dawn-f180/">Le film</a>
            </div>
            </span>
            </td>

            <td>
            <div class="infobulle">
            <img src="http://i34.servimg.com/u/f34/09/04/35/83/bree10.png" alt="L'appel du sang">
            <span><img src="http://img7.hostingpics.net/pics/736704Sans_titre_2.gif"><br>
            L'appel du sang<br><br>
            <div><a href="http://twilight-france.1fr1.net/l-appel-du-sang-la-seconde-vie-de-bree-tanner-f174/">Le livre</a>
            </div>
            </span>
            </td>

NAVIGATION :

Code:

<a href="http://twilightlesite.free.fr/gallery/">Galerie</a>
<a href="http://twilight-france.1fr1.net/le-bureau-d-accueil-f1/">Présentation</a>
<a href="http://twilight-france.1fr1.net/la-saga-du-desir-interdit-c2/">Livres</a>
<a href="http://twilight-france.1fr1.net/les-films-twilight-c3/">Films</a>
<a href="http://twilight-france.1fr1.net/actualite-f5/">Actualité</a>
<a href="http://twilight-france.1fr1.net/reglement-f39/reglement-du-forum-t1881.htm">Règlement</a>

ZONES DE TEXTE (en dessous la navigation) :

Code:

Le Forum Twilight France est placé sous copyright. Merci de bien vouloir respecter le travail fourni par toute l'équipe qui fait en sorte de répondre à toutes vos attentes et qui travaille d'arrache-pied pour que le forum soit dans la meilleures des ambiances.

1er - ONGLET :

Code:

Ca sera une photo. width: 468px; height: 161px;

2ème - ONGLET ACCUEIL :

Code:

Si tu étais à la recherche d'un forum convivial et complet, tu viens de dénicher ta perle rare. Tous les membres t'attendent avec impatience. Tu as lu  tous les livres, vu les films nul doute que ce forum est fait pour toi. Viens enchérir ta fan attitude au sein de notre grande famille qui ne demande qu'à s'agrandir. Tu retrouveras, au sein d'un désign inédit en perpétuel évolution, toute l'actualité mise à jour quotidiennement, une section RPG pour te mettre dans la peau de tes personnages préférés, une galerie photo, toutes les vidéos, mais aussi des jeux et concours et pleins d'autres surprises...

3ème - ONGLET PARTENAIRES :
Laisser vide pour l'instant.

4ème - ONGLET DIVERS :
Laisser vide pour l'instant.