Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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.
avatar

Anzu
Membre actif

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

https://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