Problème de code PA (Généralités)

2 participants

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

Résolu Problème de code PA (Généralités)

Message par MelissaD Mar 26 Juin 2012 - 15:56

Bonjour,

Voilà je viens de faire une page d'accueil (dans les généralités) mais ca ne se met pas correctement dans la case prévue pour écrire, alors que sur la page d'accueil de mon autre forum il y a une barre pour monter et descendre dans la lecture qui s'affiche. Je ne sais pas si je suis assez précise, mais en voyant l'image je suppose que vous comprendrez mieux.

Voici un screen :

Spoiler:

Je voudrais également que dans la partie staff, la deuxième ligne soit centrée s'il y a moyen ?

Voici mon css :
Code:
---- PA ----


.onglet{
    color: #ffffff;          /* couleur texte onglet */
    font-size: 20px;
    font-family: Papyrus,Arial;
    display:inline-block;
    padding:4px;
    cursor:pointer;
}
.onglet_0{}      /* personnaliser les onglet ici */
 
.onglet_1{}      /* onglet sélectionné */
 
.contenu_onglet{
  margin-top: -1px;        /* marge entre le cadre et les onglets */
  padding:0px;
  display:none;
  height: 474px;          /* largeur du tableau */ 
  width: 743px;          /* hauteur du tableau */
}
.image_1{width: 743px;height: 474px;  background-image:url('http://i41.servimg.com/u/f41/17/61/34/64/sans_t12.jpg');}
 
 
/* infobulle staff*/
 
.infobull{position: relative;z-index: 0;}
.infobull:hover{z-index: 50;}
.infobull span{  position: absolute;visibility: hidden;}
.infobull:hover span{  visibility: visible;  top: 0px;  left: 0px;  width: auto;  color:#FFFFFF;  font-size: 12px;  font-family: Palatino, time new roman, serif;  padding: 15px;  background-color: #000;  border: 1px outset #fff;  -moz-border-radius: 12px;  -webkit-border-radius: 12px;  border-radius: 12px;}
.infobull a{color:#FFFFFF;}
.infobull a:hover{color:#FFFF00;}
 
/* opacité staff */
.opac{
    opacity : 0.10;
    -moz-opacity : 0.10;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}
 
.opac:hover{
    opacity : 0.99;
    -moz-opacity : 0.99;
    -ms-filter: "alpha(opacity=10)"; /* IE 8 */
    filter : alpha(opacity=10); /* IE < 8 */
}

Et ma page d'accueil :

Code:
              <script type="text/javascript">
                    //<!--
                            function change_onglet(name)
                            {
                                    document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                                    document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                                    document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                                    document.getElementById('contenu_onglet_'+name).style.display = 'block';
                                    anc_onglet = name;
                            }
                    //-->
            </script>

        <table align="center"><tr><td>
              <div class="systeme_onglets">
              <div class="onglets">
        <!-- onglet 1 -->
                        <span class="onglet_0 onglet" id="onglet_one" onmouseover="javascript:change_onglet('one');"><i>Accueil</i></span>

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

              <!--  CONTENU DU TABLEAU  -->

            <div class="contenu_onglets">

<!-- 1ière page -->

                <div class="contenu_onglet" id="contenu_onglet_one">
<table width="100%" class="image_1"><tr><td>

<table width="100%"><tr><td><br>
  <div style="width: 250px;height: 130px;margin-left: 65px;color:#000;word-wrap:break-word;">
...
</div>
</td></tr></table>
</td>

<td>

<table cellpadding="5" cellspacing="0" style="margin-left: 70px;margin-bottom: 0px;"><tr>

<td><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/source11.png" class="opac"><span><center>Source<br><a href="http://woi-athys.forumgratuit.be/u1">Profil</a></span></td>

<td><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/piti_b11.jpg" class="opac"><span><center>Pitipitivier<br><a href="http://woi-athys.forumgratuit.be/u4">Profil</a></span></td>

<td><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/sans_t14.jpg" class="opac"><span><center>Hemoglodreams<br><a href="http://woi-athys.forumgratuit.be/u3">Profil</a></span></td>

<td><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/sans_t14.jpg" class="opac"><span><center>TEMISsX<br><a href="http://woi-athys.forumgratuit.be/u2">Profil</a></span></td>
</tr>
<!-- 2ième ligne img staff -->

<TD><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/sans_t14.jpg" class="opac"><span><center>Hectora<br><a href="http://woi-athys.forumgratuit.be/u6">Profil</a></span></td>

<TD><span class="infobull"><img src="http://i41.servimg.com/u/f41/17/61/34/64/sans_t14.jpg" class="opac""><span><center>Sabzo<br><a href="http://woi-athys.forumgratuit.be/u7">Profil</a></span></td>

</tr></table>

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


        <script type="text/javascript">
                    //<!--
                            var anc_onglet = 'one';
                            change_onglet(anc_onglet);
                    //-->
        </script>


Merci d'avance.



EDIT: J'ai réussi à faire la barre de défilement. Mais je n'arrive toujours pas à centrer les images de la deuxième ligne...
EDIT 2 : Je voudrais également savoir comment remonter les lignes un peu plus haut et comment en créer une 3eme pour plus tard, svp ?


Dernière édition par MelissaD le Sam 30 Juin 2012 - 13:09, édité 1 fois
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code PA (Généralités)

Message par MelissaD Mer 27 Juin 2012 - 20:49

UP svp ?
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code PA (Généralités)

Message par MelissaD Ven 29 Juin 2012 - 12:50

UP ?
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code PA (Généralités)

Message par Threax Sam 30 Juin 2012 - 11:52

Bonjour,

S'il s'agit du forum de votre profil, je ne vois aucun des deux problèmes ?
Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

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

Résolu Re: Problème de code PA (Généralités)

Message par MelissaD Sam 30 Juin 2012 - 12:04

Oui j'ai réussi a faire la barre de défilement, et j'ai ajouté deux modérateurs vu que je n'arrivais pas à centrer.
Mais j'aimerais faire une 3eme ligne de staff et la centrer, mais je ne sais pas comment faire ça. J'aimerais également remonter les images du staff un peu plus haut.

Merci d'avance de votre aide^^
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de code PA (Généralités)

Message par Threax Sam 30 Juin 2012 - 12:28

Votre code est un sacré noeud, je vous souhaite bien du courage pour vous y retrouver Surprised

Le problème avec vos icônes de staff, c'est que vous utilisez une colonne par image. Donc si vous avez 4 colonnes sur la première ligne, il en faut 4 sur les suivantes. Vous ne pouvez pas mettre :
Code:
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>

Ce serait faux (et susceptible de provoquer des problèmes d'affichage)

Vous devez donc utiliser colspan, pour préciser que les 2 colonnes prendront chacune la place de 2 colonnes (pour faire 4) :
Code:
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td colspan="2"></td>
  <td colspan="2"></td>
</tr>

En procédant comme ça, vous obtiendrez cela :
Problème de code PA (Généralités)  Pwet10
Le problème c'est qu'il faudrait que l'icône à gauche vienne à droite, pour être centrée.
Il faut donc ajouter style="text-align: right;" à la colonne :
Code:
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td colspan="2" style="text-align: right;"></td>
  <td colspan="2"></td>
</tr>

Voilà pour le centrage des icônes.

Pour ce qui est de remonter un peu le tout, je vois que vous avez déjà attribué une marge à gauche de 70px au tableau, attribuez-lui : margin-top: -35px; et ça devrait le remonter Wink
Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

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

Résolu Re: Problème de code PA (Généralités)

Message par MelissaD Sam 30 Juin 2012 - 13:09

Merci, ça marche ^^

Le sujet est donc résolu Smile
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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