Sujet Précédent Sujet Suivant

Placer une image sous un menu déroulant

Résolu/Fermé
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007 - 17 avril 2007 à 18:15
 atomas59 - 27 oct. 2009 à 16:26
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>
A voir également:

3 réponses

Réponse 1 / 3
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
17 avril 2007 à 19:18
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 !
0
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 20:41
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...
0
Réponse 2 / 3
Jacobéo Messages postés 304 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 28 août 2008 79
17 avril 2007 à 19:38
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="https://gen.xyz/">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 !!
0
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 20:43
Merci aussi pour ta réponse, je teste ta solutio et je te dis quoi...
0
Réponse 3 / 3
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 20:48
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...
-1
Jacobéo Messages postés 304 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 28 août 2008 79
17 avril 2007 à 21:10
Ce que tu veux, c'est de voir monter le texte sans l'image ?
0
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 21:15
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...
0
Jacobéo Messages postés 304 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 28 août 2008 79
17 avril 2007 à 21:24
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="https://gen.xyz/">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>
0
firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 21:35
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>
0
Jacobéo Messages postés 304 Date d'inscription samedi 10 mars 2007 Statut Membre Dernière intervention 28 août 2008 79 > firestorm1991 Messages postés 9 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 22:02
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.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses