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

Menu accordéon horizontal

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

Résolu Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc 2010 - 13:19

Bonjour !

Ehhhhh Oui encore moi qui vient réclamer vos lumières ^^

Voilà, je suis donc en train de bidouiller joyeusement un menu accordéon horizontal.
Qui ne fonctionne pas ( ah ah..cela aurait été trop fastoche que ça marche du premier coup ^^ )

Voici donc le code HTML :


Spoiler:
Code:
<!DOCTYPE html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <div id="accordeon">
  <ul>
    <li><a id="current_item"><div class="accordeon-box">BLOG</div>
    <div class="texte-presentation"><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </a></li>
    <li><a><div class="accordeon-box">FANSUB</div>
    <div class="texte-presentation"><p>Voici le contenu de la deuxieme boite</p></div></a></li>
    <li><a><div class="accordeon-box">MANGA</div>
  <div class="texte-presentation"><p>Voici le contenu de la troisieme boite</p></div></a></li>
  </ul>
  <p style="clear:both"> </p>
</div>
<body>

<!-- Document -->

</body>
</html>

et la partie CSS concernée :


Spoiler:
Code:
/* accordeon */

body {
  font: normal .8em/1.5em Arial, Helvetica, sans-serif;
  background-image: url(http://hitskin.com/themes/16/19/06/i_background.png);"
  margin: 100px auto 0;
  }

#accordeon {
  width:800px;
  margin:0 auto;
  }
#accordeon ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#accordeon ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 5px;
  background:none;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E3E3', endColorstr='#FCFCFC');
  background-image: url(http://hitskin.com/themes/16/19/06/i_background.png);"
  background:none;
}

#accordeon ul li a{
  display: block;
  overflow: hidden;
  height: 175px;
  width: 40px;
  outline: none;
  cursor: pointer; 
}

#accordeon #current{
  width: 640px;
}


#accordeon ul li .texte-presentation {
    margin: 0;
  padding: 0;
  width: 520px;
  display: block;
  margin-left: 85px;
  color:#000;
  font-size:14px;
  text-shadow:1px 1px 1px #FFFFFF; 
  }

#accordeon ul li p{
  font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;
 
}

#accordeon ul li .accordeon-box {
  width:150px;
  height:20px;
  font-size:30px;
  position:relative;
  top:50px;
  left:-55px;
  color:#0AA8F7;
  text-shadow:#555159 1px 2px 2px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg); 
  } 

Alors mes petits ennuis :

1 le défilement via la souris ne marchent pas
2 je souhaiterai mettre une image à la place du texte - voir le code html - (plus facile pour nous de changer l'image, car il y aura les infos sur cette image, que de retaper à chaque fois le texte vu que je vais me servir de cet accordéon pour nos infos et MAJ )
3 changer là où il y a marqué blog et forum etc... par une image - en fait cela sera une image coupée en trois : 1 partie pour Blog, 1 partie pour fansub et la dernière pour manga.

Je vous remercie infiniment de votre précieuse aide, j'avais déjà un petit soucis de background que j'ai réussis à rectifier seule, mais là...c'est au-dessus de mon niveau je pense :lol!:

Alors je suis co-admin
je navigue sous google chrome ( je pense que cela a son importance niveau bug de code )
le forum où je bidouille - et qu'il faut regarder - il est là
le forum à qui est destiné ce bidouillage : c'est celui de mon profil ^^

PG alias Jaycee


Dernière édition par Pomme Golden le Mer 22 Déc 2010 - 18:37, édité 1 fois
avatar

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 22 Déc 2010 - 14:47

Bonjour
il manque pas un script dans votre code?

cordialement.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4279
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc 2010 - 14:56

Hellow !



Euh...je ne pense pas..l'original est là :

Spoiler:
Code:
<div id="accordeon">
  <ul>
    <li><a id="current_item"><div class="accordeon-box">Choix n°1</div>
    <div class="texte-presentation"><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </a></li>
    <li><a><div class="accordeon-box">Choix n°2</div>
    <div class="texte-presentation"><p>Voici le contenu de la deuxieme boite</p></div></a></li>
    <li><a><div class="accordeon-box">Choix n°3</div>
  <div class="texte-presentation"><p>Voici le contenu de la troisieme boite</p></div></a></li>
  </ul>
  <p style="clear:both"> </p>
</div>

*En mode quiche lorraine mononeurone de blonde je suis :lol!:
avatar

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 22 Déc 2010 - 15:08

Essayez de faire une recherche accordion jquery

Cordialement.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4279
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc 2010 - 15:24

j'ai déjà fais

(en même temps ça se voit j'aurai été incapable de pondre un code CSS pareil ^^ )
avatar

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc 2010 - 18:38

Mouahahaha en résolu.

la blonde a trouvé ou ça coinçait : javascript.js je te hais ^^
avatar

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden 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