probleme IE - site EXTENSIBLE -- site d'archi

probleme IE - site EXTENSIBLE -- site d'archi - HTML/CSS - Programmation

Marsh Posté le 20-01-2010 à 20:18:52    

Bonjour,  
Je suis étudiant en architecture, et je voudrais améliorer mon site.
Je voudrais donc réaliser un menu déroulant
J'ai déja commencer e dessiner les boutons, et le fond du site, mais je ne connais pas grand chose en script.
Je voudrais donc que lorsque je passe dur les bouton, s"affiche un menu déroulant avec les sous catégories.
 
Pour le moment, j'utilise dreamweaver, mais je n'écris pas directement le code.
Alors je ne sais pas si c'est possible de réaliser ce que je souhaite sans apprendre le CSS ou le javascript? Parce que cela fait deux jours que je cherche, mais je ne trouve que des explication de code CSS. Et je n'y comprends rien dutout.
J'ai essayer de le faire par le code mais bon, je n'y arrive pas du tout.
 
- est-ce donc possible de faire un menu déroulant sur dreamweaver par exemple, sans utiliser les codes?
- Si c'est impossible, avez vous un lien qui explique vraiment en détail, ce que je souhaite faire, parce que je ne m'en sors pas :/
 
Merci d'avance à tous
Nico


Message édité par nico2302 le 27-08-2011 à 14:19:46
Reply

Marsh Posté le 20-01-2010 à 20:18:52   

Reply

Marsh Posté le 21-01-2010 à 10:14:01    

up

Reply

Marsh Posté le 21-01-2010 à 13:05:14    

Reply

Marsh Posté le 25-01-2010 à 10:01:21    

Je te remercie pour ton aide, je me suis décidé à apprendre le xhtml et le css. Je ne fais plus que ça ^^
 
J'ai réussi à faire mon menu déroulant, voici le lien:  

http://www.hotosting.com/portfolioarchi/index.html
 
Comme vous pouvez le voir, j'ai mis des margin-top:1px solid black; Mais j'aurais bien voulu les mettre transparent. Le problème c'est que je n'y arrive pas.
Lorsque je mets 1px solid transparent, on ne voit pas le résultat. Sans doute parce que le fond reste derrière.
Je suppose donc que je dois empêcher le fond de s'étendre en dessous des margin mais je ne sais pas comment faire.
 
Je cherche donc de l'aide pour designer mon menu
 


Message édité par nico2302 le 27-01-2010 à 23:36:35
Reply

Marsh Posté le 25-01-2010 à 17:07:03    

Bon, j'ai un peu continuer :
 
http://www.hotosting.com/portfolioarchi/index.html
 
Maintenant, je compte m'attaquer au design du menu.
Est-ce que vous n'auriez pas des lien de beau site, ou de tuto pour réaliser de belle barre de menu?
En fait j'aurais bien voulu arriver à un menu comme celui-ci
 
http://www.pckult.net/tutoriaux
 
Mais je suppose que je dois le faire en javascript alors?
Avez vous un tuto pour ce genre de menu en javascript? (c'est surtout pour le petit rectangle gris clair qui se déplace avec la souris dans le menu)


Message édité par nico2302 le 25-01-2010 à 17:08:37
Reply

Marsh Posté le 26-01-2010 à 15:32:26    

Reply

Marsh Posté le 27-01-2010 à 23:34:52    

merci pour ton lien David Boring, mais j'ai depuis un autre problème (je ferai peut-etre mon menu en javascript plus tard car je voudrais avancer un peu dans mon site), avec firefox et pas avec IE. bizare non?
 
En effet, la div logo ne s'affiche pas dans firefox (celle au dessus du menu) alors que dans IE si.
 
Comment cela se fait-il?
 
http://www.hotosting.com/portfolioarchi/index.html
 
 
 
 
 
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Document sans nom</title>
  6. <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
  7. <style type="text/css">
  8. <!--
  9. .police {
  10. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  11. }
  12. -->
  13. </style>
  14. </head>
  16. <body>
  18. <!-- ------------------------------------------------------------------------------------- LOGO -------------------------------------------------------------------------------------- -->
  19. <div id="logo_logo">
  20. </div>
  22. <!-- ------------------------------------------------------------------------------------- MENU -------------------------------------------------------------------------------------- -->
  23. <div id="menu">
  24. <ul class="niveau1">
  25.        
  26.         <!----------------- BAC 1 ----------------->
  27.        
  28.          <li class="sousmenu"><a class="fleche" href="#">B<span class="bac1">AC</span> 1</a>
  29.              <ul class="niveau2">
  30.                  <li class="autremenu"><a href="#">Cours</a></li>     <!-- autremenu=menu sans sous menu déroulant / sousmenu=menu avec menu deroulant-->
  31.                     <li class="sousmenu"><a href="#">Projets</a>
  32.                      <ul class="niveau3">
  33.                          <li class="autremenu"><a href="#">Allemagne</a></li>
  34.                             <li class="autremenu"><a href="#">Luminaire</a></li>
  35.                             <li class="autremenu"><a href="#">Analyse maison</a></li>
  36.                             <li class="autremenu"><a href="#">Ecluse</a></li>
  37.                             <li class="autremenu"><a href="#">Maison canal</a></li>
  38.                         </ul>
  39.                     </li>
  40.                     <li class="autremenu"><a href="#">Travaux</a></li>
  41.                   </ul>
  42.               </li>
  43.              
  45.         <!----------------- BAC 2 ----------------->
  46.        
  47.           <li class="sousmenu"><a class="fleche" href="#">B<span class="bac2">AC</span> 2</a>
  48.              <ul class="niveau2">
  49.                  <li class="autremenu"><a href="#">Cours</a></li>
  50.                     <li class="sousmenu"><a href="#">Projets</a>
  51.                      <ul class="niveau3">
  52.                          <li class="autremenu"><a href="#">Kot-story</a></li>
  53.                             <li class="autremenu"><a href="#">Central parc</a></li>
  54.                             <li class="autremenu"><a href="#">Projet 3</a></li>
  55.                             <li class="autremenu"><a href="#">Projet 4</a></li>
  56.                         </ul>
  57.                     </li>
  58.                     <li class="autremenu"><a href="#">Travaux</a></li>
  59.                   </ul>
  60.               </li>     
  61.          
  63.         <!----------------- BAC 3 ----------------->
  64.        
  65.           <li class="sousmenu"><a class="fleche" href="#">B<span class="bac3">AC</span> 3</a>
  66.              <ul class="niveau2">
  67.                  <li class="autremenu"><a href="#">Cours</a></li>
  68.                     <li class="sousmenu"><a href="#">Projets</a>
  69.                      <ul class="niveau3">
  70.                          <li class="autremenu"><a href="#">Projet 1</a></li>
  71.                             <li class="autremenu"><a href="#">Projet 2</a></li>
  72.                             <li class="autremenu"><a href="#">Projet 3</a></li>
  73.                             <li class="autremenu"><a href="#">Projet 4</a></li>
  74.                         </ul>
  75.                     </li>
  76.                     <li class="autremenu"><a href="#">Travaux</a></li>
  77.                   </ul>
  78.               </li>
  80.         <!----------------- Master 1 ----------------->
  81.        
  82.           <li class="sousmenu"><a class="fleche" href="#">M<span class="ma1">A</span> 1</a>
  83.              <ul class="niveau2">
  84.                  <li class="autremenu"><a href="#">Cours</a></li>
  85.                     <li class="sousmenu"><a href="#">Projets</a>
  86.                      <ul class="niveau3">
  87.                          <li class="autremenu"><a href="#">Projet 1</a></li>
  88.                             <li class="autremenu"><a href="#">Projet 2</a></li>
  89.                             <li class="autremenu"><a href="#">Projet 3</a></li>
  90.                             <li class="autremenu"><a href="#">Projet 4</a></li>
  91.                         </ul>
  92.                     </li>
  93.                     <li class="autremenu"><a href="#">Travaux</a></li>
  94.                   </ul>
  95.               </li>
  97.         <!----------------- Master 2 ----------------->
  98.        
  99.           <li class="sousmenu"><a class="fleche" href="#">M<span class="ma2">A</span> 2</a>
  100.              <ul class="niveau2">
  101.                  <li class="autremenu"><a href="#">Cours</a></li>
  102.                     <li class="sousmenu"><a href="#">Projets</a>
  103.                      <ul class="niveau3">
  104.                          <li class="autremenu"><a href="#">Projet 1</a></li>
  105.                             <li class="autremenu"><a href="#">Projet 2</a></li>
  106.                             <li class="autremenu"><a href="#">Projet 3</a></li>
  107.                             <li class="autremenu"><a href="#">Projet 4</a></li>
  108.                         </ul>
  109.                     </li>
  110.                     <li class="autremenu"><a href="#">Travaux</a></li>
  111.                   </ul>
  112.               </li>
  114.         <!----------------- Contact ----------------->
  115.        
  116. <li class="autremenu"><a class="contact_accueil" href="#">C<span class="contact">ONTACT</span></a></li> 
  117.            
  118.         <!----------------- Accueil ----------------->
  119.                    
  120.     <li class="autremenu"><a class="contact_accueil" href="#">A<span class="accueil">CCUEIL</span></a></li>       
  121.            
  122.              
  123. </ul>
  124. </div> 
  128. <div id="bac2_1">
  129.      <img src="image/bac2_1.png"/>   
  130.     </div>
  131.    
  132.     <div id="bac2_2">
  133.      <img src="image/bac2_1.png"/>
  134.     </div>
  135.    
  137.            
  138. </body>   
  139. </html>


 

Code :
  1. body {background: url(image/fond.jpg) top center fixed no-repeat;
  2. background-color:#CCC;}
  4. #logo_logo {
  5. width:910px;
  6. height:50px;
  7. background:url(image/logo.png) no-repeat;
  8. margin:0px auto 10px auto;}
  10. div#menu {
  11. font: 14px  Arial, sans-serif;
  12. background-repeat: no-repeat;
  13. width: 910px; height: 40px;
  14. color:#CCC;
  15. margin:auto; padding:0px;border:0;
  17.          }
  19. /* div#menu a {color:#000000} ----------------------------INUTILE */
  21. div#menu ul {
  22.    margin: 0px;
  23.    padding: 0px;
  24.    /*width: 980px;*/
  25.    border:0;
  26.             }
  28. /*On positionne les elements du menu */
  29. div#menu ul li {
  30.                 position:relative;
  31.                 list-style: none; /*on enleve les icones de liste */
  32.                 float:left;border:0;
  33.                }
  34. .niveau1{ border:0;padding:0;border:o; }
  35. .niveau1 li { border:O;padding:O;border:O;}
  36. #menu li.sousmenu                               /* MENU AVEC UN DEROULEMENT */
  37. {
  38. padding:0px;margin-top:2px;margin-bottom:2px;border:0;
  39. height: 36px;
  40. }
  41. #menu li.autremenu                             /* MENU SANS DEROULEMENT */
  42. { border:0;padding:0;margin-top:2px;margin-bottom:2px;border:0;
  43. height: 36px;
  44. }
  46. div#menu ul ul {
  47.                 position: absolute;
  48.                 display: none;
  49.    width: 130px;
  50.    border:0;padding:0;margin:0;
  51.                }
  53. div#menu li a {
  54.                text-decoration: none; /* plus de soulignement pour les liens */
  55.      padding: 0px 5px 0px 10px;
  56.      display: block;
  57.      width: 115px;  /* taille du bloc = padding + margin + width */
  58.      color:white;
  59.      text-align:left;
  60.      text-indent: 0px;
  61.      line-height: 39px;
  62.      /* border-top:1px solid black; */
  63.               }
  64. /*choix du fond des menu*/
  65. .contact_accueil { background: url(image/menu.png) repeat-x}
  66. .fleche {background:url(image/fond_fleche_1.png);}
  67. div#menu ul.niveau2 li , div#menu ul.niveau3 li  { background: url(image/menu.png);}
  69. /* changement de fond des fleche lorsque la souris est sur BAC1, BAC2, BAC3, MA1 ou MA2 */
  70. .fleche:hover {background:url(image/fond_fleche_2.png)}
  72. /*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
  73. div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
  74. div#menu ul.niveau2 li.sousmenu:hover ul.niveau3, .fleche {display:block;}
  76. /*Lors du passage de la souris: choix du fond des menu*/
  77. div#menu ul.niveau1 li a:hover {color:#000}
  79. div#menu ul.niveau1 li.sousmenu a:hover {}
  80. div#menu ul.niveau1 li.autremenu a:hover {}
  81. div#menu ul.niveau2 li.sousmenu a:hover; {}
  83. /* Decalage du niveau 3 avec le niveau 2 */
  84. div#menu ul.niveau3 {
  85. top:-2px; left: 130px; }
  87. /* Taille des span menu */
  89. .bac1 {font: 10px Arial}
  90. .bac2 {font: 10px Arial}
  91. .bac3 {font: 10px Arial}
  92. .ma1 {font: 10px Arial}
  93. .ma2 {font: 10px Arial}
  94. .contact {font: 10px Arial}
  95. .accueil {font: 10px Arial}
  97. /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
  101. #bac2_1 {
  102. width:920px;
  103. height:238px;
  104. margin: 20px auto 0 auto;
  105. padding: 0px 0 0 10px;}
  107. #bac2_2 {
  108. width:920px;
  109. height:300px;
  110. margin: 20px auto 0 auto;
  111. padding: 0px 0 0 10px;}

Reply

Marsh Posté le 28-01-2010 à 09:37:08    

Je vois ton logo, à l'inverse des moteurs de recherche et de ceux qui surfent avec un handicap.
Tu dois avoir dans ton html le contenu de ton logo, que tu caches ensuite à la vue.
Cet article t'explique une bonne manière de le faire
http://www.webaim.org/techniques/css/invisiblecontent/

Reply

Marsh Posté le 28-01-2010 à 10:03:54    

en fait, je crois que firefox croyait qque c'était un commentaire.
Depuis que j'ai effacé les deux commentaire au dessus et en dessous, firefox veut bien l'afficher
 
merci pour ton aide

Reply

Marsh Posté le 27-04-2010 à 21:36:27    

me revoila, j'ai pas mal avancé sur mon site, je voudrais savoir ce que vous en pensiez. il n'est pas encore très rempli mais sa viendra.
 
Si vous avez des idées pour l'améliorer, je suis preneur :)
 
http://horta.ulb.ac.be/studentpubl [...] index.html

Reply

Marsh Posté le 27-04-2010 à 21:36:27   

Reply

Marsh Posté le 27-04-2010 à 21:54:31    

l'utilisation dégueulasse de tableau doit être arrêtée.

 

RIen que sur ta home, de simples lien en position:absolute, auraient suffit au lieu de ta soupe dégueulasse de tableaux.
pourquoi découper tes images en tous petits morceaux alors que tu aurais pu les afficher normalement en PNG :'(
tu as fait ton site comme on faisait en 1996


Message édité par gatsu35 le 27-04-2010 à 21:56:24

---------------
Blablaté par Harko
Reply

Marsh Posté le 27-04-2010 à 22:15:24    

Je fais pas des études d'informatique. Je suis en archi donc j'ai fait ce que je pouvais... On nous a donné un cahier des charge avec notamment une image découpée sur photoshop (page de garde). DOnc la page de garde, j'avais pas vraiment le choix.
 
Sinon pour le reste du site qu'en pensez vous?

Reply

Marsh Posté le 28-04-2010 à 08:51:56    

Ben pareil tout est découpé en tout petits morceau alors que 3 bouts de HTML et un peu de CSS et 5 images auraient suffit à faire les secondes pages internes.

 

PS : tu es sur un forum de developpeurs donc on te donnera qu'un avis de developpeur. Donc c'est bon à refaire :o


Message édité par gatsu35 le 28-04-2010 à 08:52:23

---------------
Blablaté par Harko
Reply

Marsh Posté le 28-04-2010 à 12:10:28    

Un conseil : lire le livre de Raphaël Göetter (auteur du site alsacreation, mentionné précédemment dans un post). Très pédago et pleins de bonnes pratiques ;)
 
Mais +1 pour Gatsu35. Le code date d'avant 1999, là, on dirait.
html = structuration des infos -> pas de mise en page, utilisation des balises pour leur sémantique pas pour leur rendu visuel
css = mise en page/forme
javascript = à rajouter de manière non intrusive (donc pas direct dans les balises html), juste pour améliorer l'ergonomie et l'aspect "dynamique".


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 30-07-2010 à 11:13:00    

Cela fait déja environ 6 mois que j'ai fait mon site web, mais je compte profiter des vacances pour l'améliorer.
D'après les critiques reçues, le site n'est pas assez optimisé. En gros il est mal foutu.
Voici une page d'exemple :
http://horta.ulb.ac.be/studentpubl [...] /bac2.html
Voici mon modèle :
http://vincent.callebaut.org/projets-groupe-tout.html
 
Je voudrais réaliser un site sobre, simple que celui ci-dessus.
J'aurais donc besoin de votre aide pour mieux comprendre la structure du site "modèle".
par exemple, je me demandais comment le créateur du site a t'il fait pour que le menu reste en dessus de page?
Si vous avez d'autre reproche à me faire, je suis tout ouïe.
 
Merci d'avance pour votre aide

Reply

Marsh Posté le 30-07-2010 à 11:21:59    

Probablement avec un position: absolute; pour el coup du menu qui reste en haut.
 
Pour ton menu, mettre comme couleur "noir" un lien survolé, c'est pas terrible (ie pas lisible) vue que ton fond est plutôt sombre :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 30-07-2010 à 11:39:27    

Je compte de toute façon remplacer le fond par quelque chose de plus sobre et qui mettra moins de temps à charger.
En fait, je compte quasiment recommencer à zero parce que pour le moment, je le trouve mal structuré.
De plus, j'ai travaillé avec des tableaux et des images fracationnée qui complique beaucoup lle code.
 
Si vous avez d'autres critiques ou dautres idées allez y :)

Reply

Marsh Posté le 03-08-2010 à 15:31:53    

Voila à peut près 6 mois que j'ai fait mon tout premier site web.
 
J'ai décider de l'améliorer, et de changer son design.
 
Il s'agit en fait d'un portfolio de mes études dans lequel je placerai mes projets d'archi mon CV...
voici une idée du design que je voudrais faire:
http://img197.imageshack.us/img197/6199/designsiteweb.jpg
 
Le site serait constitué d'une barre de menu horizontal et de sous menu (je l'ai déja faite en html css) et d'un bloc où je placerai le contenu (les cadres en gris translucide).
Pour le mettre en oeuvre, j'ésite entre trois possibilité:
 

  • un cadre fixe centré au milieu de la page dans lequel je placerai une div avec ascenseur.
  • une colonne centrée comme la plupart des site, mais dans ce cas, je ne vois pas trop comment faire continuer le fond sur une longue page.
  • utiliser le flash,  que je ne connait pas dutout pour créer certaine animation, comme par exemple la barre grise qui pourrait se déplacer en fonction de la page sur laquelle nous sommes.


Voila, je ne sais pas ce que vous en pensez? Quelle serait la meilleur solution?
 
Merci d'avance pour votre aide

Reply

Marsh Posté le 04-08-2010 à 17:11:53    

voici l'avancement de mon portfolio.

 

http://www.nicolas-gustin.com

 

J'ai donc deux question:

 
  • J'aurais bien voulu avoir l'avis de personnes plus expérimentées que moi. avez vous des reproches ou suggestion pour l'améliorer?
  • J'aurais aussi voulu que le barre verticale grise se déplace lors du survol du menu. est-il possible de réaliser cela en flash?


Message édité par nico2302 le 21-08-2010 à 22:35:28
Reply

Marsh Posté le 04-08-2010 à 17:13:00    

pourquoi du flash alors que du JS ferai le même boulot ?


---------------
Blablaté par Harko
Reply

Marsh Posté le 04-08-2010 à 17:14:37    

je ne sais pas je ne connais ni l'un ni l'autre.
Quel serait le plus simple et surtout le plus rapide à apprendre?

Reply

Marsh Posté le 04-08-2010 à 17:16:56    

JS

Reply

Marsh Posté le 04-08-2010 à 17:26:50    

  • je suppose que la barre grise doit alors être dans un div à part en positionnement absolu ?


  • Devrais-je utiliser jquery ou dois-je apprendre le JS sans jquery?

Reply

Marsh Posté le 04-08-2010 à 17:36:18    

Ben c'est quand même mieux de connaître le langage de base avant de travailler avec des libs. Surtout que des fois, pour faire un truc, ça sera moins lourd de la coder à la main que de faire appel à une lib pas forcément légère si c'est pour utiliser une fonction basique :/

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 04-08-2010 à 17:49:07    

Bon, OK juste encore une chose, est-il possible que je fasse mon site sans utiliser JS en premier lieu, et lorsque j'ai fini d'annimer certain élément en JS. Ou alors dois-je déja prévoir le code JS dès le début. Je ne sais pas si je suis très clair.

Message cité 1 fois
Reply

Marsh Posté le 04-08-2010 à 17:49:08    

rufo a écrit :

Ben c'est quand même mieux de connaître le langage de base avant de travailler avec des libs. Surtout que des fois, pour faire un truc, ça sera moins lourd de la coder à la main que de faire appel à une lib pas forcément légère si c'est pour utiliser une fonction basique :/


 
Oui mais en même temps jquery enlève bien des problèmes et facilite des choses (intéropérabilité, sélecteurs, syntaxe, etc). Pourquoi pas.
A mon avis il y gagne a commencer a coder en jquery, ça lui fera autant à apprendre mais moins de coups de tête contre le clavier.

Reply

Marsh Posté le 04-08-2010 à 17:50:04    

nico2302 a écrit :

Bon, OK juste encore une chose, est-il possible que je fasse mon site sans utiliser JS en premier lieu, et lorsque j'ai fini d'annimer certain élément en JS. Ou alors dois-je déja prévoir le code JS dès le début. Je ne sais pas si je suis très clair.


 
Tu peux tout faire sans js et ajouter le js ensuite. Pense à donner des id uniques aux éléments que tu voudras animer en js, ça te facilitera la tâche.

Reply

Marsh Posté le 04-08-2010 à 19:22:13    

OK merci pour votre aide, est-ce que vous ne connaitriez pas un tuto pour réaliser un glissement d'un élément. Parce que j'ai déja appris un peu les base de jquery, mais je n'ai pas trop envie de tout apprendre juste pour réaliser un petit effet. En plus, je ne risque plus de réutiliser JS avant longtemps ^^.
Donc si vous avez un tuto ce serait sympa
merciiiii :)

Reply

Marsh Posté le 04-08-2010 à 21:07:48    

Voila, j'ai trouvé un exemple pour mieux expliquer ce que je voudrais faire.

 

http://www.gmarwaha.com/blog/2007/ [...] ry-lovers/

 

Donc, dans mon cas, au lieux que ce soit le petit rectangle qui se déplace, se serait la grande barre grise verticale.

 

Est-ce la même méthode?

 

re-voici le lien de la page en travaux:
http://www.nicolas-gustin.com/


Message édité par nico2302 le 21-08-2010 à 22:35:49
Reply

Marsh Posté le 04-08-2010 à 21:50:30    

L'intégration est différente, mais oui, c'est là même methode que tu dois adopter...
Apprend dans un premier temps le XHTML/CSS de manière à faire ta div de fond qui pourra se déplacer indépendamment du reste, puis, pour Jquery, la fonction animate() suffit (super simple à utiliser si tu connais le CSS, et bien sûre un minimum de JS que tu semble deja connaitre un minimum)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 04-08-2010 à 21:56:56    

ok merci pour ton aide, je m'y met dès demain matin
bonne nuit ;)

Reply

Marsh Posté le 04-08-2010 à 23:49:30    

voila, j'ai réussi à mettre la barre grise en positionnement relatif,  
mais j'ai maintenant deux problèmes:
 

  • le navigateur croient que la barre grise est positionnée en dessous de toutes les autres div. Ce qui fait qu'il nous permet de descendre plus bas dans la page alors qu'il n'y a rien.

Ce n'est pas très bien, mais bon c'est un peu chiant
 

Il faudrait grâce à JS dire de changer la position de la div "barre grise" en fonction de mouseover" Mais je ne sais pas trop comment faire ?
 
http://users5.nofeehost.com/nico2302/test/menu.html

Message cité 1 fois
Message édité par nico2302 le 04-08-2010 à 23:50:20
Reply

Marsh Posté le 05-08-2010 à 09:30:18    

Rapidement et pour la partie animation:
Sur chaque mousover de tes menus tu vas appeler la même fonction à toi, disons mafonctionanimation.
 
Elle va faire la chose suivante:
 
1- Définir les coordonnées de la cellule de menu actuelle: le point A
2- Définir les coordonnées de la barre grise: le point B
 
3- Si elles sont différentes, la fonction va utiliser animate pour amener la barre du point A au point B.

Reply

Marsh Posté le 05-08-2010 à 12:03:49    

nico2302 a écrit :

voila, j'ai réussi à mettre la barre grise en positionnement relatif,
mais j'ai maintenant deux problèmes:

 
  • le navigateur croient que la barre grise est positionnée en dessous de toutes les autres div. Ce qui fait qu'il nous permet de descendre plus bas dans la page alors qu'il n'y a rien.

Ce n'est pas très bien, mais bon c'est un peu chiant

 

Il faudrait grâce à JS dire de changer la position de la div "barre grise" en fonction de mouseover" Mais je ne sais pas trop comment faire ?

 

http://users5.nofeehost.com/nico2302/test/menu.html

 

=> http://urfman.free.fr/fhw/nico2302/
=> Source : http://urfman.free.fr/fhw/nico2302/nico2302.rar

 

#colonnegrise doit etre positionné en absolute (pour ne pas que ses frères l'encombrent) !
Tu dois donc mettre une position relative à ton #cadre pour servir de referenciel à #colonnegrise.
#colonnegrise doit avoir un top:0 (pour que l'absolue soit pris en compte) et un height:100% pour prendre toute la hauteur de son parent...

 

Je t'ai fais l'exemple avec JQuery...
J'ai aussi importé jquery.easing.1.2.js dans ton .html, c'est un plug-in de Jquery qui te permet d'avoir plus de possibilité en matière d'Easing (effet d'animation : rebonds, ralentie, elastique...)
Le "moteur" de #colonnegrise se trouve dans barreGrise.js (je l'ai commenté)

 

L'animation de la largeur ne sert à rien vu que tout tes menus on l'a même largeur, mais bon...
La largeur et le position left contenu dans le CSS sur #colonnegrise sont utile pour la position de l'élément par défaut (à l'ouverture de la page)..

 

J'ai pas trop changé le reste...


Message édité par abais le 12-08-2010 à 09:37:37

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 05-08-2010 à 13:29:22    

Un ENORME merci
 
J'étais entrain d'essayer de le faire, mais je galérais complètement.
Merci beaucoup, tu me fais gagner des heures :D

Reply

Marsh Posté le 05-08-2010 à 14:19:03    

bah, faut surtout que tu comprennes le bousain hein ! afin que moi je "perde" pas mon temps ;)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 05-08-2010 à 14:21:57    

Oui, je sais bien, j'ai pas envie d'abuser de tes aides non plus.
Mais ça m'a donné envie de mieux connaitre JS.
Donc je vais m'y mettre :)

Reply

Marsh Posté le 10-08-2010 à 12:51:39    

Me revoila, j'ai pas mal avancé dans mon site web après un petit tour chez les webdesigners.
voici ou j'en suis
http://users5.nofeehost.com/nico2302/test2/index.html
J'ai encore quelque petit problème au niveau du code :
Quand on passe sur la première image en haut a gauche, j'ai essayer de faire apparaitre un div qui indiquerait le titre du projet.
dans ce style ci

 

J'ai essayer de réaliser cet effet avec la fonction "slidetoggle" de jquery sans succès, ensuite avec la fonction "slideup", "slidedown", mais la div ne se déroulait pas dans le bon sens.
Puis je suis arriver à un résultat semblable avec la fonction "animate", mais ça me semble un peu bizarre. le code JS est assez ong pour pas grand chose.
Alors voila, je ne sais pas quelle est la meilleur solution pour réaliser ce type d'effet.

 

Voici le code JS:

Citation :

$("#projet1" ).hover(function () {
        $("#titreprojet1" ).animate({
  height: '60px',
  top: '119px',
  }, { duration: 600, easing: "easeOutExpo", queue: false });
 });
 
 $("#titreprojet1" ).hover(function () {
        $("#titreprojet1" ).animate({
  height: '60px',
  top: '119px',
  }, { duration: 600, easing: "easeOutExpo", queue: false });
 });
 
 $("#projet1" ).mouseleave(function () {
        $("#titreprojet1" ).animate({
  height: '0px',
  top: '179px',
  }, { duration: 600, easing: "easeOutExpo", queue: false });
 });


Message édité par nico2302 le 10-08-2010 à 13:00:13
Reply

Marsh Posté le 10-08-2010 à 12:59:53    

Animate est plus générique comme fonction donc plus de code, c'est normal.
Mon avis est de pas te prendre la tête. Tu mets ton code dans une fonction que tu appelles sur chaque image et basta.
edit: la quantité de code reste très raisonnable.


Message édité par gelatine_velue le 10-08-2010 à 13:00:27
Reply

Marsh Posté le 10-08-2010 à 13:08:06    

en fait je posais la question parce que quand je tappais du texte dans la div, il y avait des petit problèmes (le n'était pas masqué lors du chargement de la page). Donc j'étais obligé de mettre du texte en background. Je ne sais pas si c'est très grave?

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed