Tableau non superposé sur l'image de fond

[Kimi Kozuma]

Bonsoir bonsoir.

J'ai un petit problème (encore).

J'ai une image de fond pour mon tableau en onglets sauf que les onglets son tout en haut de l'image et non sur l'image elle-même. j'aimerais savoir comment faire pour que mon tableau se situe exactement sur l'image de fond.

Spoiler:

Code:

.paonglet
        {
        display:inline-block;
        margin-left: 2px;
        margin-right:2px;
        padding:5px;
        cursor:pointer;
        background-color: #;
        color: #fff;
font-size: 14px;
}
        .paonglet_0
        {
        border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        -webkit-border-radius: 2px 2px 2px 2px;
        }
        .paonglet_1
        {
          color: #;
          border-radius: 2px 2px 2px 2px;
          -moz-border-radius: 2px 2px 2px 2px;
          -webkit-border-radius: 2px 2px 2px 2px;
        }


 .contenu_paonglet
        {
                margin-top:-1px;
                padding: 2px;
                display:none;
                height: 320px;
        }

.contenu_paonglets{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
 background-repeat: no-repeat;
 background-position: top center;
 height: 561px;
}

Code:

<script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script><div class="paonglets">
            <span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Soul Seoul</span>
            <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">News</span>
            <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Partenaires</span>
<span class="paonglet_0 paonglet" id="paonglet_staff" onclick="javascript:change_paonglet('staff');">Staff</span>
         

        </div>

        <div class="contenu_paonglets">
            <div class="contenu_paonglet" id="contenu_paonglet_accueil">

Contenu page d'accueil

</div>

            <div class="contenu_paonglet" id="contenu_paonglet_effectif">



</div><div class="contenu_paonglet" id="contenu_paonglet_autre">

Contenu partenaire

</div>

</div><div class="contenu_paonglet" id="contenu_paonglet_staff">

Contenu staff

</div>
</div>
    <script type="text/javascript">
        //<!--
                var anc_paonglet = 'accueil';
                change_paonglet(anc_paonglet);
        //-->
        </script>

Merci d'avance ^_^

[Anzu]

Rebonsoir ^^

J'espère que j'ai bien cerné votre demande:

Donc code de la PA modifié, j'ai fait un tableau car vous n'en aviez pas

Code:

<script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
<table class="fondtable"><tr><td rowspan="2" width="159px"></td><td width="450px"><div class="paonglets">
            <span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Soul Seoul</span>
            <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">News</span>
            <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Partenaires</span>
<span class="paonglet_0 paonglet" id="paonglet_staff" onclick="javascript:change_paonglet('staff');">Staff</span>
       

        </div></td><td rowspan="2" width="159px"></td></tr><tr><td valign="top">

        <div class="contenu_paonglets">
            <div class="contenu_paonglet" id="contenu_paonglet_accueil">

Contenu page d'accueil

</div>

            <div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenue effectif

</div><div class="contenu_paonglet" id="contenu_paonglet_autre">

Contenu partenaire

</div>

</div><div class="contenu_paonglet" id="contenu_paonglet_staff">

Contenu staff

</div>
</div></td></tr></table>
    <script type="text/javascript">
        //<!--
                var anc_paonglet = 'accueil';
                change_paonglet(anc_paonglet);
        //-->
        </script>


+ CSS modifiée:

Code:

.paonglet
        {
        display:inline-block;
        margin-left: 2px;
        margin-right:2px;
        padding:5px;
        cursor:pointer;
        background-color: #;
        color: #fff;
font-size: 14px;
}
        .paonglet_0
        {
        border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        -webkit-border-radius: 2px 2px 2px 2px;
        }
        .paonglet_1
        {
          color: #;
          border-radius: 2px 2px 2px 2px;
          -moz-border-radius: 2px 2px 2px 2px;
          -webkit-border-radius: 2px 2px 2px 2px;
        }


 .contenu_paonglet
        {
                margin-top:-1px;
                padding: 2px;
                display:none;
                height: 320px;
        }

.fondtable{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
 background-repeat: no-repeat;
 background-position: top center;
 height: 561px;
width: 769px;
padding-top: 80px;
}

J'ai donc rajouté ceci:

Code:

.fondtable{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
 background-repeat: no-repeat;
 background-position: top center;
 height: 561px;
width: 769px;
padding-top: 80px;
}

Cordialement.

[Kimi Kozuma]

C'est parfait ^_^

Merci beaucoup