Tableau non superposé sur l'image de fond

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tableau non superposé sur l'image de fond

Message par Kimi Kozuma le Sam 1 Jan 2011 - 22:10

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 ^_^


Dernière édition par Kimi Kozuma le Sam 1 Jan 2011 - 22:37, édité 1 fois

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau non superposé sur l'image de fond

Message par Anzu le Sam 1 Jan 2011 - 22:25

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 Rolling Eyes

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.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau non superposé sur l'image de fond

Message par Kimi Kozuma le Sam 1 Jan 2011 - 22:36

C'est parfait ^_^

Merci beaucoup

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum