Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · Salon spécifique aux Tutoriels et articles Alsacréations · Menu accordeon: mes images ne s'affiche pas !!!
Rechercher dans le sujet :
Auteur
worms30
# 13 Apr 2008 - 02:10:08
Citer
13 Posts
 J'ai suivis avec précision votre tuto concernant le menu accordéon , mais voila après avoir intégrer mes balises comme indiqué, les images (de l'exemple) ne s'affiche pas !

PS: j'ai rien changé un balisage donné sur votre tuto donc ne comprend pas pourquoi elle ne s'affiche plus.

Si non j'aurais aimé savoir comment faire en sorte pour que le menu se déroule lors d'un survole ?

Merci a tous lol ohwell
Modifié par worms30 (13 Apr 2008 - 12:22)
^
Florent V.
# 13 Apr 2008 - 11:31:30
Citer
On va manger des chips.
Modérateur
11436 Posts
 Bonjour,

Merci de corriger le titre de ton sujet pour quelque chose de compréhensible et reflétant ton problème ou ta question.
Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
worms30
# 13 Apr 2008 - 12:22:46
Citer
13 Posts
 Titre rectifier, merci pour le rappel ... cligne

^
Thomas D.
# 15 Apr 2008 - 13:18:30
Citer
Roi sous la montagne
Modérateur
2827 Posts
 Bonjour,

pour bien faire, il faudrait nous donner une page en ligne ... difficile de donner un coup de main sans informations supplémentaires.
Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.
http://www.tequila-studio.com 
^
worms30
# 15 Apr 2008 - 20:55:58
Citer
13 Posts
 Voila l'image,

Su celle ci vous pouvais voir mon problem d'affichage de menu qui apparait n noir au lieu d'afficher les image comme il devrait !!! Autrement j'aimerais placer mon bloc paragraphe ci dessous au meme niveau que le menu accordéon comment faire SVP.

voici un extrait du contenu de ma page : 
<DIV CLASS="header"><P></P>



	<DIV CLASS="navbarre"><!-- MENU VERTICAL-->

		<A CLASS="zone1" HREF="/accueil.html" onMouseOver="self.status='';return true;" title="Accueil">Accueil</A>

		<A CLASS="zone2" HREF="http://www.emu-forum.com/" onMouseOver="self.status='';return true;" title="Forum">Forum</A>

		<A CLASS="zone3" HREF="http://www.emu-forum.com/index.php?showtopic=732" title="Livre d'or">Livre d'or</A>

		<A CLASS="zone4" HREF="/liens.html" title="Liens">Contact</A>

		<A CLASS="zone5" HREF="/contact.html" title="Contact">Connexion</A>

	</DIV><!-- FIN MENU VERTICALE-->

	<ul class="navigation">

    <li><a href="#" title="Aller à la page 1">Item 1</a></li>



    <li class="toggleSubMenu"><span>Item 2</span>

        <ul class="subMenu">

            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>



            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>

            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>



        </ul>

    </li>

    <li class="toggleSubMenu"><span>Item 3</span>

        <ul class="subMenu">



            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>

            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>



        </ul>

    </li>

    <li><a href="#" title="Aller à la page 4">Item 4</a></li>



</ul>    

</DIV>

<!-- BANNIERE ET TITRE-->



<DIV CLASS="menu"><!--MENU HORIZONTAL--></DIV><!--FIN MENU HORIZONTAL-->

<DIV class="block">

<DIV class="headersous">

<H1></H1>

<h2></h2>



<P></P>



<P></P>



   <P><STRONG></STRONG></P></DIV>

  </DIV>

</div>

<DIV class="block2">


Je sais pas si c'est bon comme ça ou si il faut changer quelques trucs... n'hésitez pas a me dire je suis tout ouïe lol

Merci a tous previews/16347-Sanstitre.JPG
Modifié par worms30 (15 Apr 2008 - 20:59)
^
Aurore
# 16 Apr 2008 - 15:10:24
Citer
4 Posts
 Ca va être difficile de t'aider sans le fichier css...
Pour les images, es-tu sûr qu'elles portent le même nom, ou que tu ne les as pas mis dans un répertoire ? Auquel cas il faut changer l'url des "background-image" dans ton fichier css.
Et lorsque tu parles de même niveau, c'est simplement aligner le premier menu sur la gauche ou autre chose ?
^
worms30
# 16 Apr 2008 - 20:05:41
Citer
13 Posts
 glups... confus Comprend pourquoi ce probleme mais enfin , c'est rectifié. Cela venait bien du chemin . pour cela il à fallu que j'ajhoute à chacun de mes liens css "../images" alors qu'au départ mes images était bien dans le dossier source. Bref problèm résolu!!! lol

Merci a tous .

Autrement je n'arrive pas à alligner mon div block vers à hauteur du menu déroulant soit tout les deux en dessous de ma navbarre.

pour vous aider voici mon css:

.navigation {

      margin: 0;

      padding: 0;

      list-style: none;

      background: #000;

      color: #fff;

      width: 200px;

      font: 1.2em "Trebuchet MS", sans-serif;

      }

   .navigation a, .navigation span {

      display: block;

      padding: 4px 10px;

      color: #fff;

      text-decoration: none;

      background: #000 url(../images/menu-item.png) left bottom no-repeat;

      }

   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {

      background-image: url(../images/menu-item-deroule.png);

      }

   .navigation .open a, .navigation .open span {

      background-image: url(../images/menu-item-enroule.png);

      }

   .navigation a:hover, .navigation a:focus, .navigation a:active {

      text-decoration: underline;

      }

   .navigation .subMenu {

      font-size: .8em;

      background: #ccc url(../images/subMenu.png) 0 0 repeat-x;

      font-size: .9em;

      margin: 0;

      padding: 0;

      border-bottom: 1px solid #666;

      }

   .navigation ul.subMenu a {

      background: none;

      padding: 3px 20px;

      }



body {

background: url(../images/font210.png);

}

.navbarre {

background: url(../images/ban2.png)repeat-x;

font-size:18px;

text-align: center;

}

h1 {

color:#CC3300;

margin: 20px;

font-size:24px;

}

h2 {

color:#CC6600;

margin: 20px;

font-size:18px;

}

p {

margin: 5px 50px 5px 50px;

color:#333333;

}

.block {

background-color:#FFFFFF;

margin: 5px 50px 5px 220px;

}

.block2 {

background-color:#FFFFFF;

margin: 5px 50px 5px 220px;

}

.block3 {

background-color:#FFFFFF;

margin: 5px 50px 5px 220px;

}

.headersous {

background: url(../images/ban2.png)repeat-x;

}


Merci encore à vous cligne

^
Aurore
# 17 Apr 2008 - 09:59:20
Citer
4 Posts
 A priori il suffit simplement de modifier ton css en rajoutant les propriétés suivantes :

.navigation {float:left;.....}


Ca devrait fonctionner.

Et si jamais tu ne l'as pas encore vu, regarde ce tuto pour comprendre http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Maitriser-le-positionnement-CSS-dans-toutes-les-situations
Modifié par Aurore (17 Apr 2008 - 10:18)
^
Aurore
# 17 Apr 2008 - 10:01:01
Citer
4 Posts
 Désolé, problème avec le lien rolleyes
Celui qui fonctionne
^
Thomas D.
# 17 Apr 2008 - 18:01:36
Citer
Roi sous la montagne
Modérateur
2827 Posts
 Salut,

pour ce qui est du problème du chemin, il ne faut pas oublier qu'on doit renseigner dans la feuille de style le chemin des images par rapport au fichier CSS, et non par rapport au fichier HTML cligne
Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.
http://www.tequila-studio.com 
^
worms30
# 23 Apr 2008 - 18:53:51
Citer
13 Posts
 Désolé pour le retard mais j'avais pas beaucoup de temps ces jours ci... Donc j'ai bien n'éssayer d'y comprendre quelques chose mais j'avoue que pour un novice absolu et de l'anglais ça ne me facilite pas la tache... En tout cas merci quand meme j'y reviendrais une prochaine fois une fois l'essentiel de mon site terminé...

Le fin du fin serrait le tuto façon recette à mémé lol Mais, c'est vrai que ça n'apporte rien!!! cligne

Qui sais peut être qu'apres quelques mois à construire mon site je serrais suffisamment alaise pour me lancer dans un menu accordeon horizontaux et verticaux . Je me contenterais de mon jolie menu vertical sur e coup.

Par contre si quelqu'un pouvais me dire si il est possible de personnaliser l'ouverture de mon menu en accélérant ou ralentissant la vitesse d'ouverture des tiroirs ?

J'ai une dernière question concernant la personnalisation du menu:

Voila j'ai essayé de découper un image en plusieurs bandes et placer chacune d'elle sur mon menu se qui rend plutôt pas mal mais je ne sais pas comment faire pour faire en sorte à se que l'on donne un effet d'agrandissement lors de l'ouverture des tiroir . Pourriez vous m conseiller ?

Merci encore smile

^
Thomas D.
# 24 Apr 2008 - 23:37:51
Citer
Roi sous la montagne
Modérateur
2827 Posts
 Salut,

tu peux contrôller la vitesse d'ouverture des sous-menus avec l'argument passé à slideDown() : 
slideDown('normal')
Il suffit de remplacer 'normal' par la valeur que tu veux utiliser. Les valeurs acceptées sont (de mémoire) 'normal', 'slow' et 'fast', ou un entier qui représente le temps d'exécution de l'effet en millisecondes ...

Idem pour la fermeture, il suffit de modifier l'argument de slideUp().
Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.
http://www.tequila-studio.com 
^
6l20
# 25 Apr 2008 - 00:06:07
Citer
Chasseur de 1/2 Kiwiz
651 Posts
 Bonne mémoire cligne
http://jquery.developpeur-web2.com/documentation/effets/slideDown.php
XHTML: structure. CSS: présentation. Javascript: comportement.
^
worms30
# 25 Apr 2008 - 14:41:34
Citer
13 Posts
 Merci pour votre rapidité, génial enfin un site en français qui décrit les fonctions JQuery. Par contre ne sais pas si ça existe mais j'aimerais lancer mon menu depuis le bas de ma page vers le haut à l'inverse de celui que propose le tutoriel alsacréation. et si possible l'ouvrir au survol du curseur .

Est réalisable ça ?

Merci à tous,

PS: Thomas, c'est impressionnant de voir ça, comment fait tu pour être aussi callé!!! C'est vrai tu est partout sur le fofo lol
Modifié par worms30 (25 Apr 2008 - 14:42)
^
Thomas D.
# 25 Apr 2008 - 15:46:44
Citer
Roi sous la montagne
Modérateur
2827 Posts
PS: Thomas, c'est impressionnant de voir ça, comment fait tu pour être aussi callé!!! C'est vrai tu est partout sur le fofo lol

Moi calé en JS ? Raconte ça à Koala64 et Julien Royer (entre autres) ! lol

Blague à part, à force de bosser avec js, css, php, etc., ça finit bien par rentrer un peu dans la caboche cligne

Pour ce qui est de lancer le menu "vers le haut", il faut que tu changes le positionnement du menu (probablement en le mettant en absolu en bas de ton conteneur de référence ...)
Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.
http://www.tequila-studio.com 
^
worms30
# 25 Apr 2008 - 16:57:19
Citer
13 Posts
 A chacun c'est connaissance... C'est vrai que l'aplication web à un coté vraiment attrayant. Depuis que j'ai commencé mon site je n'arrete pas de trouver des petits trucs pour le rendre plus agréable et pratique possible. Ce qui est génial c'est de voir qu'un petit code à la ... modifie l'affichage de l'image , d'un texte ou autres. Meme si des fois une peut têtu comme cette fichu visionneuse de fichier pdf "scibd" que j'essai de centrer sur mon bloc mais rien y fait ... j'y arriverais lol tout fois si quelqu'un utilise ce type de visonneuse ou un autre je suis pas contre ... cligne

Pour revenir à mon menu, je voulais parlais non pas du positionnement du menu sur mes pages mais bien du sens d'ouverture qui actuelement par defaut s'ouvre de haut en bas, j'aimerais qu'il s'ouvre du bas vers le haut.

Désolé Thomas mais ne voie pas comment le positionnement de mon menu à l'aide de la fonction absolut modifirer son sens d'ouverture.

J'ai deja vue ça pour des menus déroulants du genre placé dans le fooder mais pas encore pour les menu accordéon.

Voici c'est que j'ai trouvé comme exemple de survol, mais ne sais pas comment l'applique tant sur ma feuille de style que sur ma page html

With options, container is a definition list, header dt, content dd
Code


jQuery('#list2').accordion({ 

    event: 'mouseover', 

    active: '.selected', 

    selectedClass: 'active', 

    animated: "bounceslide", 

    header: "dt" 

}).bind("change.ui-accordion", function(event, ui) { 

    jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log'); 

});

Exemple provenant de ce site : http://jquery.bassistance.de/accordion/demo/?p=1.1.1

^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta © dew
Contacter l'administrateur - 18.7 ms - Charte