Alignement des prédéfinis et du staff

[Dellou]

Bonjour/Bonsoir forumactif ! ^^
Voilà, il se trouve que j'ai un problème :nansansblague:
J'aimerais aligner mes prédéfinis au staff !
Malheureusement, même en utilisant td ou en tripatouillant, les prédéfinis s'aligne à côté de mon image…Urg.



Le code HTML de ma PA :

Spoiler:

Pourriez-vous m'aider ? ;x;

[Dellou]

Up QAQ

[MlleAlys]

Bonjour,
quelque chose comme ça ?

Code:

<center>
    <img border="0" alt="" src="http://img11.hostingpics.net/pics/974309AAzz.png" />
</center>
<div style="border: 1 solid; width: 660px;background-color:#c1d901;border-radius: 10px 10px 10px 10px; -moz-border-radius-bottomright: 5; -moz-border-radius-bottomleft: 10; -moz-box-shadow: 0px 0px 10px #5e5e5e; box-shadow: 0px 0px 10px #5e5e5e; -webkit-box-shadow: 0px 0px 10px #5e5e5e; padding: 5px; text-shadow: black 0px 0px 3px;color:#00acec;font-family: Impact;font-size: 24px; line-height: normal"> <a href="#">Réglement </a>  <a href="#">Intrigue</a>  <a href="#">Crédits</a>  <a href="#"> Partenariats</a>  <a href="#">Prédéfinis</a>
</div>
<table border="0">
    <tbody>
        <tr>
            <td>
                <blockquote style="display: block; width: 400px; height: 200px;box-shadow: 0px 0px 50px #00e3f9;border-radius: 10px; overflow: auto;background-color: #c1d901;font-size: 11px; padding:10px;">Faut écrire le contexte ici quand on l'aura fini comme ça bah les gens ils comprendrons qu'c'est un forum fondés par deux trisomiques qui recherche des amis comme des clochardes, mais je me demande si ce n'est pas un complot monté contre la congoloxicomatisation des lois du marché. C'est un coup des émeus. <a href="#"> Suite</a>

                </blockquote>
            </td>
            <td>
                <img src="http://img15.hostingpics.net/pics/93838238Z.png" alt="" border="0" />
            </td>
        </tr>
    </tbody>
</table>
<div style="display:inline-block; vertical-align:top; margin:10px;">
    <div style="border: 1 solid; width: 200px;background-color:#c1d901;border-radius: 10px 10px 10px 10px; -moz-border-radius-bottomright: 5; -moz-border-radius-bottomleft: 10; -moz-box-shadow: 0px 0px 10px #5e5e5e; box-shadow: 0px 0px 10px #5e5e5e; -webkit-box-shadow: 0px 0px 10px #5e5e5e; padding: 5px;">
        <div style="text-shadow: black 0px 0px 3px; color:#00acec; font-family: Impact; font-size: 24px; line-height: normal">Staff</div>
        <div style="text-shadow: black 0px 0px 3px; font-family: Impact; font-size: 13px;color:#f8bb01;">vénérés et adulés de tous, évidement. HA.HA.</div>
    </div>
    <br/>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="contenant">
                        <div class="contenu">TEXTE DERRIERE L'IMAGE</div>
                        <img src="http://www.hostingpics.net/thumbs/71/61/72/mini_716172SengokuBeasara600962501.jpg" />
                    </div>
                </td>
                <td colspan="2">
                    <div class="contenant">
                        <div class="contenu">TEXTE DERRIERE L'IMAGE</div>
                        <img src="http://www.hostingpics.net/thumbs/71/61/72/mini_716172SengokuBeasara600962501.jpg" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div style="display:inline-block; vertical-align:top; margin:10px;">
    <div style="border: 1 solid; width: 200px;background-color:#c1d901;border-radius: 10px 10px 10px 10px; -moz-border-radius-bottomright: 5; -moz-border-radius-bottomleft: 10; -moz-box-shadow: 0px 0px 10px #5e5e5e; box-shadow: 0px 0px 10px #5e5e5e; -webkit-box-shadow: 0px 0px 10px #5e5e5e; padding: 5px;">
        <div style="text-shadow: black 0px 0px 3px; color:#00acec; font-family: Impact; font-size: 24px; line-height: normal">Prédéfinis</div>
    </div>
    <br/>
    <table>
        <tbody>
            <tr>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
            </tr>
            <tr>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
                <td class="predef_td"> <a style="width: 82px; height: 82px;" href=""><img style="width: 82px; height: 82px;" src="" /></a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

J'ai entouré les deux blocs de divs que j'ai affichées en inline-block, ce permet d'en mettre plusieurs sur la même ligne. Vertical-align permet de contrôler le placement des deux blocs sur cette lignes : ici top, les deux blocs ont leur ligne haute à la même hauteur. On peut modifier top par middle ou bottom.

[Dellou]

Oh !!! Merci beaucoup c'est exactement ça !
Merci d'avoir pris du temps pour mon problème ! Vraiment ! ♥

Le sujet est résolu ! *-* ☆