Tableau en PA qui ne fonctionne pas

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

Résolu Tableau en PA qui ne fonctionne pas

Message par Aliiisson le Mer 24 Aoû 2011 - 18:38

Bonjour,
J'ai pris sur un forum de design un code qui est en "libre service", cependant, ce code fonctionne mal.
C'est un tableau à onglet en PA, mais il ne s'affiche pas correctement.

Voici le code :
Code:
<center>
 <br><span style="text-shadow: #000000 1px 1px 1px; text-align: right; font-size: 30px; color:#ffffff; margin: 10px; font-family: impact;">Bienvenue sur TheFamilyChon !</span><br><br>
<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script><div id="mes_onglets">
<table><tr><td><ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Bienvenue</li></td><td><li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">News</li></td><td><li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Le Staff</li></td><td><li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Mascottes</li></td></tr></table><br>
<table cellspacing="30"align="center"><tr><div class="clear"><div id="mes_contenus">
 <td ><div id="co_1" class="mon_contenu"><div style="overflow: auto; width: 620px; height: 210px; padding: 10px; text-align:center;">Bonjour {USER&amp;#8288;NAME}!<BR><BR>Bonjour & Bienvenue sur TheFamilyChon, un forum consacré aux cochons d'Inde ! Des rongeurs très à la mode, ce qui entraîne l'achat de personnes mal renseignée sur ces adorables boules de poils! C'est ici que tu pourras faire la connaissance de membres totu aussi passionné(e)s que toi, poser toutes les questions sur les cobayes, montrer la frimousse de ton chon, discuter entre passionnés, etc... Alors, rejoins nous !</div></div><div id="co_2" class="mon_contenu" style="display: none;"><table cellspacing="40" align="center"><tr><td>• A savoir : <br>• Design par TheFamilyChon, Ulrika & Dow', toute reproduction interdite !<br>• Forum ouvert le 29 Octobre 2010</td><td><form><select style="width: 120px; -moz-border-radius: 5px 5px 5px 5px;" onchange="location = this.options
[this.selectedIndex].value"> <option selected="selected">Top-partenaires</option>
<option value="LIEN 1">Vous ? </option>
<option value="LIEN 2">Vous ?</option>
<option value="LIEN 3">Vous ?</option>
</select></form></td></tr></table></div><div id="co_3" class="mon_contenu" style="display: none;"><div class="infobulle" Code par Dakino disponible sur Twi-art.net><img src="http://i54.tinypic.com/5yg5t2.png" class="imagepa" style="margin-left: 150px;"><span>TheFamilyChon
<br> Administratrice & Fondatrice</div> <div class="infobulle" ><img src="http://i54.tinypic.com/5yg5t2.png" class="imagepa" ><span> Polochon
<br> Modératrice</div><div class="infobulle"><img src="http://i54.tinypic.com/5yg5t2.png" class="imagepa" ><span>Liriou
<br> Modératrice</div> <div class="infobulle"><img src="http://i54.tinypic.com/5yg5t2.png" class="imagepa" ><span> PilPoil
<br> Animatrice & sous-Admin</div></div><div id="co_4" class="mon_contenu" style="display: none;"><marquee behavior="scroll" direction="left" scrollamount="3" scrolldelay="60" style="text-align: center;">Election en cours ! :)</marquee></div></td>
</tr></table></div></ul><span style="text-shadow: #000000 1px 1px 1px; text-align: right; font-size: 9px; color:#ffffff; margin: 10px;">PA par Dakino</span></center>

CSS :
Code:
#menu ul li ul {display: none;}

#menu ul li:hover a {background: #Ffffff; color:#  #8C8E8F ; }

#menu ul li:hover ul {display:block; position:absolute; top:10px;margin-left: -10px; }
#menu ul li:hover ul li a.hide { color:#8C8E8F;}
#menu ul li:hover ul li:hover a.hide {width:110px;}
#menu ul li:hover ul li ul {display: none;}
#menu ul li:hover ul li a {display:block; color:#8C8E8F; text-shadow: 1px 1px 3px black;}

#menu ul li:hover ul li a:hover {color:#8C8E8F;}

#menu ul li:hover ul li:hover ul {display:block; position:absolute; margin-left: -10px; top:10px; color:#8C8E8F; background: #EBDFD3; }

#menu ul li:hover ul li:hover ul li a {display:block; color:#8C8E8F; font-weight : bold;}

#menu ul li:hover ul li:hover ul li a:hover {color:#8C8E8F; font-weight : bold;}
Je pense que c'est quelques choses qui ne va pas dans le CSS, mais je n'arrive pas à savoir quoi..

Merci d'avance Smile


Dernière édition par Aliiisson le Jeu 25 Aoû 2011 - 10:55, édité 1 fois

Aliiisson
**

Féminin
Messages : 50
Inscrit(e) le : 28/12/2010

http://www.thefamilychon.com/
Aliiisson a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Invité le Jeu 25 Aoû 2011 - 0:43

Bonjour,

A première vue, le CSS et le tableau ne vont pas ensemble. Que souhaitez-vous réaliser?

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Aliiisson le Jeu 25 Aoû 2011 - 9:25

Bonjour,
Je souhaite réaliser ceci :


Mais sans les barre de navigation du dessus "L'essentiel, groupes, partenaires, autres..."

Aliiisson
**

Féminin
Messages : 50
Inscrit(e) le : 28/12/2010

http://www.thefamilychon.com/
Aliiisson a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Invité le Jeu 25 Aoû 2011 - 10:09

Bonjour,

Cette astuce devrait vous aider:

> http://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Aliiisson le Jeu 25 Aoû 2011 - 10:34

Bonjour,
Oui, j'ai déjà vu cette astuce, je prends le premier modèle Smile
Y a t-il un code à insérer afin que les coins soient arrondis ? (Comme sur la photo).
Comment faut-il faire pour que le tableau donne une impression de "profondeur" (comme sur la photo aussi) ?

Merci d'avance !

Aliiisson
**

Féminin
Messages : 50
Inscrit(e) le : 28/12/2010

http://www.thefamilychon.com/
Aliiisson a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Invité le Jeu 25 Aoû 2011 - 10:53

Pour arrondir les angles, il faut modifier la partie CSS et ajouter après .mon_contenu { :
Code:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Vous pouvez procéder de la même manière pour .mon_onglet; .mon_onglet:hover et .mon_onglet_selected.

L'effet de profondeur est peut être obtenu en utilisant une propriété pour les contours:
Code:
border: 4px inset #FF0000;
4px correspond à l'épaisseur, inset donne un effet de relief et #FF0000 permet de modifier la couleur du contour.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau en PA qui ne fonctionne pas

Message par Aliiisson le Jeu 25 Aoû 2011 - 10:55

Merci beaucoup !

Aliiisson
**

Féminin
Messages : 50
Inscrit(e) le : 28/12/2010

http://www.thefamilychon.com/
Aliiisson 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