remonter (superposer ?) des images

remonter (superposer ?) des images - HTML/CSS - Programmation

Marsh Posté le 25-08-2010 à 10:52:08    

Bonjour  
 
Grande débutante en création de site, cela fait des heures que je m'évertue à essayer de comprendre comment remonter des images. Je crois d'ailleurs que je n'ai pas d'autre choix que de les superposer, et je ne sais pas comment faire.
Je m'explique et vous décrit la page :  
Tout en haut de l'écran, il y a un bandeau fixe (logo).
Juste en dessous, j'ai eu pour ambition de mettre 5 images qui me servent de menu. Ces images changent quand on passe dessus et qu'on clique avec la souris.
J'ai réussis à créer un code javascript (j'y connais que dalle mais à force de recherche sur le net j'ai réussis à dégoter un générateur de codes javascript qui m'a bien aidée) pour faire cet effet.
Mon problème, c'est que j'aimerais légèrement remonter le bouton menu de droite et celui de gauche pour créer un arrondi.  
VSPACE ne fonctionne pas en négatif, alors du coup, je ne sais pas comment faire, surtout qu'il y a plusieurs images, donc je me sens bien perdue.
 
Voici mon code html :  
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>JARDISERRE-Accueil-</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="jardiserre" href="jardiserre.css" />
  7. <!-- DEBUT DU SCRIPT -->
  8. <SCRIPT LANGUAGE="JavaScript">
  9. if(document.images)
  10. {
  11. i651209 = new Image;
  12. i651209 = "images/tomate_clic.jpg";
  13. }
  14. if(document.images)
  15. {
  16. i249058 = new Image;
  17. i249058 = "images/salade_clic.jpg";
  18. }
  19. if(document.images)
  20. {
  21. i494970 = new Image;
  22. i494970 = "images/aubergine_clic.jpg";
  23. }
  24. if(document.images)
  25. {
  26. i887341 = new Image;
  27. i887341 = "images/fraise_clic.jpg";
  28. }
  29. if(document.images)
  30. {
  31. i67436 = new Image;
  32. i67436 = "images/rose_clic.jpg";
  33. }
  34. </SCRIPT>
  35. <!-- FIN DU SCRIPT -->
  36.      
  37.    </head>
  38.    <body>
  39.      </br>
  40.     <p> <div class="logo"> <img class="logo" src="images/logo-final-petite-taille.jpg"  alt="logo"  /> </div> </p>
  41.  
  42.    
  43.    <!-- DEBUT DU SCRIPT -->
  44. <A HREF="accueil.html" onMouseOver="i651209.src='images/tomate_clic.jpg'"  onMouseOut="i651209.src='images/tomate_sans_clic.jpg'">
  45. <IMG SRC="images/tomate_sans_clic.jpg" BORDER=0 NAME="i651209" ALT="accueil" HSPACE=4 VSPACE=0></A>
  46. <A HREF="fabrication.html" onMouseOver="i249058.src='images/salade_clic.jpg'"  onMouseOut="i249058.src='images/salade_sans_clic.jpg'">
  47. <IMG SRC="images/salade_sans_clic.jpg" BORDER=0 NAME="i249058" ALT="fabrication" HSPACE=4 VSPACE=0></A>
  48. <A HREF="serres.html" onMouseOver="i494970.src='images/aubergine_clic.jpg'"  onMouseOut="i494970.src='images/aubergine_sans_clic.jpg'">
  49. <IMG SRC="images/aubergine_sans_clic.jpg" BORDER=0 NAME="i494970" ALT="serres" HSPACE=4 VSPACE=0></A>
  50. <A HREF="conseils.html" onMouseOver="i887341.src='images/fraise_clic.jpg'"  onMouseOut="i887341.src='images/fraise_sans_clic.jpg'">
  51. <IMG SRC="images/fraise_sans_clic.jpg" BORDER=0 NAME="i887341" ALT="conseils" HSPACE=4 VSPACE=0></A>
  52. <A HREF="contact.html" onMouseOver="i67436.src='images/rose_clic.jpg'"  onMouseOut="i67436.src='images/rose_sans_clic.jpg'">
  53. <IMG SRC="images/rose_sans_clic.jpg" BORDER=0 NAME="i67436" ALT="contact" HSPACE=4 VSPACE=0></A>
  54. <!-- FIN DU SCRIPT -->


 
Je vous remercie par avance de vos lumières...

Reply

Marsh Posté le 25-08-2010 à 10:52:08   

Reply

Marsh Posté le 25-08-2010 à 11:21:30    

Citation :

Mon problème, c'est que j'aimerais légèrement remonter le bouton menu de droite et celui de gauche pour créer un arrondi.


Il n'y a pas de boutons dans ton code, juste des liens (href). Je pense que tu fais reference aux liens.
Je ne suis par ailleurs par certain d'avoir tres bien compris ton probleme, mais en supposant quand meme que si, je dirais que tu peux parvenir a l'effet desire en t'aidant des tableaux (<table></table> ) et en reglant l'alignement vertical de tes liens a l'interieur des cellules.

Reply

Marsh Posté le 25-08-2010 à 11:29:51    

Merci de ta réponse OLEV.  
Si tu avais juste un exemple d'application, ça m'aiderait beaucoup.
 
 

Reply

Marsh Posté le 25-08-2010 à 11:40:36    

Tes liens sont actuellement sur une seule ligne.
Si tu souhaite les mettre en forme avec plus de precisions, tu dois les mettre dans un tableau html.
 

Code :
  1. <table>
  2.    <tr>
  3.       <td>Ton lien</td>
  4.       <td>Ton lien2</td>
  5.       <td>Ton lien3</td>
  6.    </tr>
  7. </table>


 
Les reglage plus fin peut ensuite se faire pour obtenir avec des valign pour regler l'alignement vertical, mais je pense qu'en mettant juste un <br /> juste avant les liens "centraux" (donc ni le premier, ni le dernier) tu devrais obtenir un pseudo effet d'arrondi comme tu le recherche.
 
Encore une fois, sous reserve d'avoir bien compris ce que tu souhaites.

Reply

Marsh Posté le 25-08-2010 à 11:57:04    

Non n'utilise pas les tableaux pour faire de la mise en forme, c'est pas un bon conseil.
 
Utilise la mise en forme avec une feuille de style, d'autant plus que tu en a déjà une : jardiserre.css
 
Pour le code html, il te suffit de créer une liste <ul>
 
 

Code :
  1. <ul id="menu">
  2. <li><a href="">ton image</a></li>
  3. <li><a href="">ton image</a></li>
  4. <li><a href="">ton image</a></li>
  5. </ul>


 
Ensuite tu va dans ta feuille de style et tu applique un style à la liste "menu"
 
Il existe pleins de tutos qui t'expliqueront ca, par exemple : http://css.mammouthland.net/menu-horizontal-en-css.php
 
Essaye d'avancer la dessus et poste ton nouveau code, on te filera un coup de main si tu bloque.
 

Reply

Marsh Posté le 25-08-2010 à 20:33:42    

Merci pour vos réponses. Je vais tester tout ça prochainement, et je vous tiens au courant. A bientôt

Reply

Sujets relatifs:

Leave a Replay

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