QEEL en 4 blocs

Alors commençons

Code:

/*========================*/
/*=====|QEEL_CodeCSS|=====*/
.qeeltable{
background-color : #404040;
padding-top: 3px;
border: 1px solid #6b6b6b;
border-top: 9px solid #0096d6;
border-bottom: 3px solid #0096d6;
box-shadow: 0px 0px 2px #000000;
padding-bottom: 6px;
margin-top: 6px;
}

FIELDSET.q1{
height: 102px;
margin-right: 6px;
min-width: 33%;
widht: 33%;
font-size: 10px;
color:#FFFFFF;
box-shadow: -1px 2px 2px 2px rgba(0, 0, 0, 0.3) inset;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
}
FIELDSET.q2{
height: 102px;
min-width: 33%;
margin-right: 6px;
widht: 33%;
color:#FFFFFF;
font-size: 10px;
box-shadow: -1px 2px 2px 2px rgba(0, 0, 0, 0.3) inset;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
}
FIELDSET.q3{
height: 220px;
min-width: 33%;
margin-left: 6px;
/*text-shadow: #CBCBCB 0px 0px 2px;*/
color:#FFFFFF;
widht: 33%;
padding:0px;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
}
FIELDSET.qg{
height: 220px;
min-width: 33%;
color:#FFFFFF;
widht: 34%;
font-size: 10px;
box-shadow: -1px 2px 2px 2px rgba(0, 0, 0, 0.3) inset;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
position: center;
}

.fondateur
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.fondateur:hover
{
width: 97%;
border-left: 3px solid #1998FF;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #1998FF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}
FIELDSET.q3{
height: 220px;
min-width: 33%;
margin-left: 6px;
font-size: 12px;
/*text-shadow: #CBCBCB 0px 0px 2px;*/
color:#FFFFFF;
widht: 33%;
padding:0px;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
}
.fondateur
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #0478b1;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.fondateur:hover
{
width: 100%;
border-left: 1px solid #0478b1;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #0478b1;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.administrateur
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #FF0000;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.administrateur:hover
{
width: 100%;
border-left: 1px solid #FF0000;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #FF0000;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.moderateur
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #0ceb00;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.moderateur:hover
{
width: 100%;
border-left: 1px solid #0ceb00;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #0ceb00;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.helpeur
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #FF9900;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.helpeur:hover
{
width: 100%;
border-left: 1px solid #FF9900;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #FF9900;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rppancien
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rppancien:hover
{
width: 100%;
border-left: 1px solid #FFFFFF;
background: #5C5C5C;
border-right:0px;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rpphumain
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #2DDDFC;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rpphumain:hover
{
width: 100%;
border-left: 1px solid #2DDDFC;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #2DDDFC;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rppasgard
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #9F76B3;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rppasgard:hover
{
width: 100%;
border-left: 1px solid #9F76B3;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #9F76B3;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}
 
.rppjaffa
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #d1ac6d;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.rppjaffa:hover
{
width: 100%;
border-left: 1px solid #d1ac6d;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #d1ac6d;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.membreor
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #FF0073;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.membreor:hover
{
width: 100%;
border-left: 1px solid #FF0073;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #FF0073;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.membre
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #FFEA00;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.membre:hover
{
width: 100%;
border-left: 1px solid #FFEA00;
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #FFEA00;
 border-right:0px;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.partenaire
{
width: 100%;
background: #2D2D2D;
border-bottom: 1px solid #5A5A5A;
color: #B403FA;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.partenaire:hover
{
width: 100%;
/*border-left: 2px solid #B403FA;*/
background: #5C5C5C;
border-bottom: 1px solid #5A5A5A;
color: #B403FA;
 border-left:1px solid #B403FA;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
  -webkit-transition : all 1s;
}

.qeelhead{
border-bottom: 1px solid #6b6b6b;
background : url(http://i58.servimg.com/u/f58/16/49/87/27/kk10.jpg);
text-align: center;
font-weight: bold;
color: #FFFFFF;
/*font-size: 10px;*/
padding-bottom: 2px;
text-shadow: #000000 0 0 2px;
/*text-position: center;*/
}

.qeelbox{
margin-top: 0px;
}

FIELDSET.q3{
height: 220px;
/*min-width: 33%;*/
background : #2D2D2D;
margin-left: 6px;
/*text-shadow: #CBCBCB 0px 0px 2px;*/
color:#FFFFFF;
widht: 33%;
padding-bottom: 4px;
margin-top:8px;
background-color : #2E2E2E;
border: 1px solid #6b6b6b;
border-top: 3px solid #6b6b6b;
border-bottom: 3px solid #6b6b6b;
}
.DeBug td.row1{
 background:none;
}
a {
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none!important;
}
legend{
font-size: 14px;
color: #FFFFFF;
}

Code:

<!-- BEGIN disable_viewonline --> et <!-- END disable_viewonline -->

Code:

<table class="qeeltable" width="960px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="18%"><FIELDSET class="q3">
 <nav><div class="qeelbox">
  <div class="qeelhead">Groupes Staff</div>
  <div class="fondateur"><a href="http://laforcedelunion-alli.superforum.fr/g37-fondateur"><font color="#0478b1">Fondateur</font></a></div>
  <div class="administrateur"><a href="http://laforcedelunion-alli.superforum.fr/g38-administrateur"><font color="#FF0000">Administrateur</font></a></div>
    <div class="moderateur"><a href="http://laforcedelunion-alli.superforum.fr/g39-moderateur"><font color="#0ceb00">Modérateur</font></a></div>
    <div class="helpeur"><a href="http://laforcedelunion-alli.superforum.fr/g49-helpeur"><font color="#FF9900">Helpeur</font></a></div>
  <div class="qeelhead">Groupes Rpp</div>
    <div class="rppancien"><a href="http://laforcedelunion-alli.superforum.fr/g30-anciens"><font color="#FFFFFF">groupe</font></a></div>
    <div class="rpphumain"><a href="http://laforcedelunion-alli.superforum.fr/g48-humains"><font color="#2DDDFC">groupe</font></a></div>
        <div class="rppasgard"><a href="http://laforcedelunion-alli.superforum.fr/g46-asgard"><font color="#9F76B3">groupe</font></a></div>
        <div class="rppjaffa"><a href="http://laforcedelunion-alli.superforum.fr/g47-jaffa"><font color="#d1ac6d">groupe</font></a></div>
  <div class="qeelhead">Groupes Hors Rpp</div>
         
        <div class="membre"><a href="http://laforcedelunion-alli.superforum.fr/g31-membres"><font color="#FFEA00">Membre</font></a></div>
        <div class="partenaire"><a href="http://laforcedelunion-alli.superforum.fr/g28-partenaires"><font color="#B403FA">Partenaire</font></a></div>
  </div></nav></FIELDSET></td>

<td rowspan="2" width="46%"><FIELDSET class="qg"><legend>Le Forum</legend>{TOTAL_POSTS}<br/><br/>
    {TOTAL_USERS}<br/><br/>
 {TOTAL_USERS_ONLINE}<br/><br/>
    <table class="DeBug">{L_CONNECTED_MEMBERS}</table><br/><br/>
 {NEWEST_USER}</FIELDSET></td>
<td width="35%"><FIELDSET class="q1"><legend>Les Stats</legend>
    {RECORD_USERS}<br/>
    <span class="gensmall">
    <br />
                {LOGGED_IN_USER_LIST}</span></FIELDSET></td>

</tr>
<tr>
 <td width="35%"><FIELDSET class="q2"><legend>La Chatbox</legend>{TOTAL_CHATTERS_ONLINE}<br/><br/>{CHATTERS_LIST}<br/>
          <center><div id="chatbox_popup"></div>
          <script type="text/javascript">
          //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
          </script></center></FIELDSET></td>
</tr>
<tr><td colspan="3">><center><font color="#7F7F7F">Par Databar, En libre service sur:  <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a></font></center></td></tr>
</table>

Lutine a écrit:Merci!