High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Placer une image sous un menu déroulant

Dernière réponse le 27 oct 2009 à 16:26:30 firestorm1991, le 17 avr 2007 à 18:15:47 
 Signaler ce message aux modérateurs

Bonjour,
J'ai une page principale divisée en 3 cadres. Dans le cadre de gauche, j'ai un menu déroulant permettant d'ouvrir différentes pages dans le cadre cantral.
J'aimerais bien ajouter des images en bas du menu déroulant(dans le cadre de gauche donc), mais c'est là que je bloque. Les images se mettent en dessous(le menu déroulant est sur l'image) et non pas en bas. Je fais une copie du script ci dessous... J'ai mis le script du menu deroulant dans un div et l'image dans un autre mais ça ne change rien. Merci de votre aide.


<body>
<div>



<dl id="menu">

<dt onmouseover="javascript:montre();" onclick="javascript:cache();"><a href="#">Belgian citizens</a></dt>

<dt onmouseover="javascript:montre('smenu2');" onclick="javascript:cache('smenu2');">Links</dt>

<dd id="smenu2">
<ul>
<li><a href="#" target="mainFrame">Belgium</a></li>
<li><a href="#" target="mainFrame">blank</a></li>

<li><a href="#">Sous-Menu 2.3</a></li>
</ul
></dd>

<dt onmouseover="javascript:montre('smenu3');" onclick="javascript:cache('smenu3');">Menu 3</dt>

<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu4');" onclick="javascript:cache('smenu4');">LINKS</dt>

<dd id="smenu4">
<ul>
<li><a href="quicklinks.php" target="mainFrame">Quick links</a></li>
<li><a href="usefullinks.php" target="mainFrame">Useful links</a></li>

</ul>

</dd>




</dl>
</div>

<div>
<img src="../images/otan.jpg" /> //image à ajouter
</div>



</body>

Configuration: Windows XP
Internet Explorer 6.0

Posez votre question Répondre

1

Dalida, le 17 avr 2007 à 19:18:08

Salut,

si ton image est décorative tu peux la mettre en 'background' du <div> du menu. tu la place en bas et au milieu et tu ajoutes une marge intérieure basse égale à la hauteur de l'image. et le tout en css : et oui monsieur (ou madame d'ailleurs !) ! 

div{
	background-image:url("../images/otan.jpg");
	background-repeat:no-repeat;
	background-position:center bottom;
	padding-bottom:??px;
}

aperçu

sinon, on en reparle avec ta css sous les yeux, à plus !
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...

   
Répondre à Dalida

3

firestorm1991, le 17 avr 2007 à 20:41:28

Merci beaucoup pour ta réponse! En fait, mon image n'est pas décorative, je voudrais la mettre en dessous(en bas ;) ) du menu déroulant car elle servirait de lien pour aller sur le site de l'Otan. J'ai pensé la mettre en dernier élément <dt> mais ce n'est pas vraiment idéal...

   
Répondre à firestorm1991

2

Jacobéo, le 17 avr 2007 à 19:38:19

Bonsoir,

et en faisant comme cela ?

<div>
<marquee direction="up" scrollamount="1" > <img src="../images/otan.jpg" /><img src="file:///C|/Documents and Settings/JOUENNE DEPREUX/Bureau/Maintenance des sites/J-Images-J-In Conception/essai 1 J-Images-J-In Conception 10.03.07/discussions CommentCaMarche.com/Sans-titre-1.jpg" width="100" height="50" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="5,4,95,46" href="#celui que tu veux" />
</map> //<a href="http://www.xyz.com">image à ajouter</a>
</marquee>
</div>

Mais peut-être pas ompris la question. Enfin moi j'aime bien faut juste savoir viser pour les lliens.

Très drôle l'adresse est faite au hasard (xyz.com), et cela tombe sur un site dédié Apache !!
Internet ne vaut que s'il est partagé ...
Jacques

   
Répondre à Jacobéo

4

firestorm1991, le 17 avr 2007 à 20:43:26

Merci aussi pour ta réponse, je teste ta solutio et je te dis quoi...

   
Répondre à firestorm1991

5

firestorm1991, le 17 avr 2007 à 20:48:14

C'est assez joli comme effet ;) Je ne m'attendais pas à ça. En fait, c'est presque ça que je veux, mais sans l'effet de montée. J'aimerais que l'image reste fixe à l'endroit où elle démarre en bas du menu. Je ne sais pas commet tu as fait pour qu'elle démarre bien plus bas que le menu...

   
Répondre à firestorm1991

6

Jacobéo, le 17 avr 2007 à 21:10:06

Ce que tu veux, c'est de voir monter le texte sans l'image ? Internet ne vaut que s'il est partagé ...
Jacques

   
Répondre à Jacobéo

7

firestorm1991, le 17 avr 2007 à 21:15:06

No no, ce que je veux, c'est d'avoir une image qui est affichée en bas de mon menu, qu'il soit déroulé ou non. Le problème, c'est que dès que j'ajoute mon image dans le script, elle apparaît littéralement "en dessous" du menu et non pas en bas du menu. Même si elle est dans un bloc div a part du bloc menu...

   
Répondre à firestorm1991

8

Jacobéo, le 17 avr 2007 à 21:24:14
  • +1

Voilà une autre manière, image fixe et défilement du texte sur le dessus. A noter qu'en obtenant un lien depuis l'image, tu peuxchanger l'ensemble (image/texte) et obtenir un texte défilant correspondant avec plusieurs liens, ex. image: une 2cv, et au dessus les pièces disponibles avec un lien vers ce que tu veux. Tu vois ?

<body>
<div>
<marquee direction="up" scrollamount="1" >
<p><img src="../images/otan.jpg" /></p>
<p>//<a href="http://www.xyz.com">image à ajouter</a></p>
</marquee>
<img src="../discussions CommentCaMarche.com/Sans-titre-1.jpg" width="100" height="50" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="0,0,253,49" href="#celui que tu veux" />
</map>

</div>

</body> Internet ne vaut que s'il est partagé ...
Jacques

   
Répondre à Jacobéo

9

firestorm1991, le 17 avr 2007 à 21:35:08

Merci. Je vois oui, en fait, maintenant que je regarde bien, c'est surtout ton area shape qui m'intéresse. Car dans le dernier script que tu viens de me donner, l'image "otan" défile toujours vers le haut, mais le bloc "area shape" est fixe et positionné à l'endroit que je veux. Est-il possible de mettre l'image otan dans le bloc area shape? Car c'est à ça que je voulais arriver en fait, je me suis sans doute mal exprimé...

PS: Quelle est cette balise, "marquee"?
PS 2: Je ne connaissais pas non plusla balise <map>

   
Répondre à firestorm1991

10

Jacobéo, le 17 avr 2007 à 22:02:28

Marquee est une balise permettant le défilement de ce que tu veux, texte ou image pourvu que cela soit enfermé dans <marquee> xxxx </marquee> Elle défile par défaut de droite à gauche, mais tu peux changer le sens horizontal (right ou leight) ou vertical (direction ="up", rapide ou lent (scrolldellay = vitesse en millisecondes ou scrollamount = vitesse en pixels).

Attention, il est possible que cette balise ne fonctionne pas sur tous les serveurs, mais elle fonctionne sur IE5,6 et 7.

La balise <map> xx </map> donne un lien "zoné" sur image. Elle est soit rectangulaire, ovale, ou polygonale. c'est ce que l'on appelle "zone réactive" Il peut y en avoir plusieurs sur une image.
Internet ne vaut que s'il est partagé ...
Jacques

   
Répondre à Jacobéo

11

firestorm1991, le 17 avr 2007 à 22:07:51

Merci beaucoup pour tes explications et pour ton aide Jacobéo. Je vais mettre mon image dans une balise <map> afin de la coincer en bas de mon menu déroulant.
Une dernière question... Sais-tu pourquoi lorsque l'image défile, elle passe en dessous du menu? et pas, soit au dessus, ou mieux, s'arrêter dès qu'elle arrive au niveau du menu?

   
Répondre à firestorm1991

12

Jacobéo, le 17 avr 2007 à 22:12:53

Pour faire cela, il te faut JavaScript. Ce que je t'ai donné est basique et utilisé en HTML. Attendons les spécialistes, eh, holà ..
Ils se reposent pour mieux te répondre ;) Internet ne vaut que s'il est partagé ...
Jacques

   
Répondre à Jacobéo

13

firestorm1991, le 17 avr 2007 à 23:05:01

Héhé, ;) ok. en tout cas, merci encore pour tout!

   
Répondre à firestorm1991

14

 atomas59, le 27 oct 2009 à 16:26:30

Utilise le : z-index

   
Répondre à atomas59
Posez votre question Répondre
Ils ont besoin de votre aide