[Résolu] Menu déroulant inversé en CSS

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : [Résolu] Menu déroulant inversé en CSS

bepimaco

Festina lente

Bonjour,

J'ai récupéré un bout de code sur internet pour faire le menu déroulant de mon site. MAis j'ai quelques petits problèmes :

- il se déroule vers le bas, peut-il le faire vers le haut ?
- comment centrer le tout ?
- si j'arrive à changer la police des sous-menu, je n'arrive pas à réduire la taille des menus !

Vous pouvez voir un exemple ici :
http://perso.wanadoo.fr/scouts-stegreve/index7.htm

Merci,
Bepimaco

Message édité par bepimaco le 18-06-2004 à 10:57:25

---------------
Bepimaco

Publicité

bepimaco

Festina lente

bepimaco a écrit :

:bounce:

---------------
Bepimaco

T509

$job->GetJob(now)

2 défauts

1- la partie <style> doit être dans le <head>
2- ton menu <div ...> doit être dans <body>

Ce sont des défauts majeurs !!!

Pour le reste, mettre une marge négative sur les propriétés <dl> et un alignement en bas sur <dd> dans tes CSS devrait permettre d'approcher le résultat

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Merci beaucoup, j'ai fait les changement dans le <head> et le <body>, mais je n'arrive pas à trouver où mettre une marge négative, et l'alignement du bas.

Je sais, je suis vraiment newbie, mais bon, il en faut de tous niveaux ...
En tout cas, merci

---------------
Bepimaco

T509

$job->GetJob(now)

je t'ai dit dans le CSS, il faut ajouter la propriété margin-top:-50px pour <dl> et bottom:0px pour <dd>

Si tu ne sais pas comment faire, il faut que tu lises un tuto sur le CSS.

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

C'est toujours faux tes changements :
toute la partie <style> ... </style> (qui est ta feuille CSS) il faut le mettre avant </head>

Ta partie <div class="menu"> ... </div> il faut le mettre avant </body>

je te conseilles un très boin bouquin sur HTML. HTML niveau 1 et 2, Créez votre site web de compétence micro. C'est tout petit et tu comprendras plein de choses. Surtout le dernier

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

J'ai pas mis la bonne en ligne, mais normalement c'est bon. QUoi qu'il y a un truc que je pige pas : si je récupère la page qui est sur le net, il n'y a plus les head et body !

Je suis en train de parcourir le net pour trouver un tuto CSS. J'ai essayé de placer :

.menu dl {
float: left;
width: 6em;
margin-top: -50px;
}

mais ça donne rien (le menu disparait entièrement).

---------------
Bepimaco

T509

$job->GetJob(now)

Il disparait en dessous de ton image centrale ou en dehors de la fenêtre ?
ajoute un z-index : 2; pour voir

Pour les tutos, il y a http://forum.hardware.fr/forum2.ph [...] 941&cat=10
au chapitre Les liens qui-vont-bien

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Merci pour le lien, je vais voir, y'a l'air d'y avoir des trucs très intéressants.

En fait, le Head est toujours à, mais pas au même endroit, mais le Body, il n'est plus là :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Scouts de St Egrève - Page de test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>
<SCRIPT type=text/javascript>
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->
</SCRIPT>
<STYLE type=text/css>DT {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu DL {
FLOAT: left; WIDTH: 6em
}
.menu A {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: block; FONT-WEIGHT: bold; BACKGROUND: #fff; MARGIN: 0px 2px; BORDER-LEFT: gray 1px solid; COLOR: #000; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.menu A:hover {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #ccc; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#smenu1 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu2 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu3 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu4 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu5 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu6 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu7 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu8 {
DISPLAY: none; FONT-SIZE: 12px; WIDTH: 100%
}
#smenu1 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu2 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu3 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu4 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu5 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu6 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu7 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
#smenu8 A {
BORDER-TOP: 0px; FONT-WEIGHT: normal
}
</STYLE>
<META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<DIV align=center>
<DIV align=center>
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center><STRONG><FONT face="Times New Roman, Times, serif"
color=#ff0000 size=+4><EM>Les Scouts et Guides de France de Saint
Egrève</EM></FONT></STRONG></DIV></TD></TR>
<TR>
<TD vAlign=top colSpan=3 height=50>
<DIV align=center></DIV></TD></TR>
<TR>
<TD vAlign=top width="12%">
<DIV align=center></DIV>
<DIV align=center><A href="http://www.godasse.ch/vote.php?545"><IMG
src="Scouts de St Egrève - Page de test_fichiers/godasse.gif"
border=0><BR><FONT color=#0000ff size=-2><U>La Godasse est un site qui
classe les sites scouts. Si notre site vous a plu, soutenez-le par votre
vote</U></FONT></A> </DIV></TD>
<TD width="77%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=397 border=0>
<TBODY>
<TR>
<TD width=185 height=101><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_01.gif"
width=132 useMap=#Map border=0></TD>
<TD width=153><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_02.gif"
width=133 useMap=#Map2 border=0></TD>
<TD width=59><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_03.gif"
width=132 useMap=#Map3 border=0></TD></TR>
<TR>
<TD><IMG height=100
src="Scouts de St Egrève - Page de test_fichiers/accueil_04.gif"
width=132 useMap=#Map8 border=0></TD>
<TD><IMG height=100
src="Scouts de St Egrève - Page de test_fichiers/accueil_05.gif"
width=133 useMap=#Map7 border=0></TD>
<TD><IMG height=100
src="Scouts de St Egrève - Page de test_fichiers/accueil_06.gif"
width=132 useMap=#Map4 border=0></TD></TR>
<TR>
<TD><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_07.gif"
width=132 useMap=#Map9 border=0></TD>
<TD><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_08.gif"
width=133 useMap=#Map6 border=0></TD>
<TD><IMG height=101
src="Scouts de St Egrève - Page de test_fichiers/accueil_09.gif"
width=132 useMap=#Map5 border=0></TD></TR></TBODY></TABLE></DIV></TD>
<TD width="11%">
<DIV align=center>
<P> </P></DIV></TD></TR>
<TR>
<TD colSpan=3> </TD></TR></TBODY></TABLE></DIV></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><MAP name=Map4><AREA shape=POLY alt="les louveteaux"
coords=-10,19,66,63,130,20,130,-8,0,-8
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm"><AREA
shape=POLY alt="les scout(e)s" coords=66,71,-9,29,0,99,58,101
href="http://perso.wanadoo.fr/scouts-stegreve/scout_principal.htm"></MAP><MAP
name=Map3><AREA shape=POLY alt="la sizaine adaptée"
coords=-5,87,95,30,61,-4,-4,-5
href="http://perso.wanadoo.fr/scouts-stegreve/sizaine_adaptee_principale.htm"><AREA
shape=POLY alt="les louveteaux" coords=0,94,56,63,74,105,1,105
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm"></MAP><MAP
name=Map2><AREA shape=POLY alt="les compagnons"
coords=-4,49,86,106,-6,105
href="http://perso.wanadoo.fr/scouts-stegreve/compagnons_principal.htm"><AREA
shape=POLY alt="les sarabandes" coords=99,32,100,104,9,44,47,22
href="http://perso.wanadoo.fr/scouts-stegreve/sarabandes_principal.htm"><AREA
shape=POLY alt="la sizaine adaptée" coords=106,100,106,34,138,7,136,83
href="http://perso.wanadoo.fr/scouts-stegreve/sizaine_adaptee_principale.htm"><AREA
shape=POLY alt="les louveteaux" coords=132,93,118,103,134,102
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm"></MAP></DIV></TD></TR></TBODY></TABLE></DIV><MAP
name=Map><AREA shape=POLY alt="les compagnons"
coords=33,77,90,26,131,53,140,105,39,101
href="http://perso.wanadoo.fr/scouts-stegreve/compagnons_principal.htm"></MAP><MAP
name=Map5><AREA shape=POLY coords=""
href="http://perso.wanadoo.fr/scouts-stegreve/index7.htm#"><AREA shape=POLY
alt="les scout(e)s" coords=-6,-9,-8,48,42,44,47,64,95,62,113,38,66,18,52,-5
href="http://perso.wanadoo.fr/scouts-stegreve/scout_principal.htm"></MAP><MAP
name=Map6><AREA shape=POLY alt="les scout(e)s"
coords=133,48,105,15,105,-3,134,-6
href="http://perso.wanadoo.fr/scouts-stegreve/scout_principal.htm"><AREA
shape=POLY alt="les pionniers" coords=97,-12,97,99,-4,104,-8,51,-3,-3
href="http://perso.wanadoo.fr/scouts-stegreve/pionniers_principal.htm"></MAP><MAP
name=Map7><AREA shape=POLY alt="les scout(e)s"
coords=106,17,107,112,143,103,137,35
href="http://perso.wanadoo.fr/scouts-stegreve/scout_principal.htm"><AREA
shape=POLY alt="les louveteaux" coords=104,8,142,28,146,-5,121,-3
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm"><AREA
shape=POLY alt="les pionniers" coords=98,19,98,109,-12,106,-9,78
href="http://perso.wanadoo.fr/scouts-stegreve/pionniers_principal.htm"><AREA
shape=POLY alt="les compagnons" coords=98,7,-13,72,-9,-8,78,0
href="http://perso.wanadoo.fr/scouts-stegreve/compagnons_principal.htm"></MAP><MAP
name=Map8><AREA shape=POLY alt="les compagnons"
coords=137,59,79,95,-2,85,-7,61,30,54,42,-16,138,-20
href="http://perso.wanadoo.fr/scouts-stegreve/compagnons_principal.htm"><AREA
shape=POLY alt="les pionniers" coords=135,92,130,72,103,104,139,108
href="http://perso.wanadoo.fr/scouts-stegreve/pionniers_principal.htm"></MAP><MAP
name=Map9><AREA shape=POLY alt="les pionniers"
coords=105,5,132,-5,132,44,94,18
href="http://perso.wanadoo.fr/scouts-stegreve/pionniers_principal.htm"></MAP>
<DIV class=menu>
<DL onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/le_groupe_principal.htm">Groupe</A>
</DT>
<DD id=smenu1 onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<UL>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_presentation.htm">Présentation</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_activites.htm">Activités</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_actualites.htm">Actualités</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_archives.htm">Archives</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_prive.htm">Espace
privé</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/groupe_divers.htm">Divers</A>
</LI></UL></DD></DL>
<DL onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/sarabandes_principal.htm">Sarabandes</A>
</DT>
<DD id=smenu2 onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<UL></UL></DD></DL>
<DL onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<DT><A
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Louveteaux</A>
</DT>
<DD id=smenu3 onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<UL>
<LI><A
href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Présentation</A>
<LI><A
href="http://perso.wanadoo.fr/site-lvt/louveteaux_calendrier.html">Calendrier</A>
<LI><A
href="http://perso.wanadoo.fr/site-lvt/louveteaux_photos.html">Photos</A>
<LI><A
href="http://perso.wanadoo.fr/site-lvt/louveteaux_chefs.html">Chefs</A>
</LI></UL></DD></DL>
<DL onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/sizaine_adaptee_principale.htm">Siz.
adaptée</A> </DT>
<DD id=smenu4 onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<UL></UL></DD></DL>
<DL onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_principal.htm">Scouts</A>
</DT>
<DD id=smenu5 onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<UL>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_presentation.htm">Présentation</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_la_troupe.htm">Troupe</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_les_activites.htm">Activités</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_mini_camp.htm">Mini-camp</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_le_camp.htm">Camp</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_espace_prive.htm">Espace
privé</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/scout_divers.htm">Divers</A>
</LI></UL></DD></DL>
<DL onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/pionniers_principal.htm">Pionniers</A>
</DT>
<DD id=smenu6 onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
<UL></UL></DD></DL>
<DL onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/compagnons_principal.htm">Compagnons</A>
</DT>
<DD id=smenu7 onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
<UL></UL></DD></DL>
<DL onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<DT><A
href="http://perso.wanadoo.fr/scouts-stegreve/divers_principal.htm">Divers</A>
</DT>
<DD id=smenu8 onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<UL>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/divers_liens.htm">Liens</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/divers_documents.htm">Documents</A>
<LI><A href="http://pagesperso.laposte.net/bepimaco/livre.php">Livre
d'or</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/divers_ressources.htm">Ressources</A>
<LI><A
href="http://perso.wanadoo.fr/scouts-stegreve/divers_contacts.htm">Contact</A>
</LI></UL></DD></DL></DIV></BODY></HTML>

Message édité par bepimaco le 15-06-2004 à 14:08:23

---------------
Bepimaco

bepimaco

Festina lente

J'ai rajouté :

.menu dl {
float: left;
width: 6em;
z-index: 2;
}

Mais je ne suis pas sûr qu'il faille le mettre là !

---------------
Bepimaco

Publicité

T509

$job->GetJob(now)

essaie plutot un z-index:2; sur la classe menu

toute déclaration de style fini par un ;

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

T509 a écrit :

essaie plutot un z-index:2; sur la classe menu

toute déclaration de style fini par un ;

Code :

<STYLE type=text/css>
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
z-index:2;
}

---------------
Bepimaco

T509

$job->GetJob(now)

cela doit aller oui

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

et ça marche ?

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

ça ne change rien sur le final

Et si tu ouvres cette feuille :
http://perso.wanadoo.fr/scouts-stegreve/index7.htm

tu verras que le body n'est plus là, alors que sur celle que je mets transfert sur internet, il y est : je ne comprends plus rien !

---------------
Bepimaco

T509

$job->GetJob(now)

en affichant les sources, j'ai trouvé : <body bgcolor="#FFFFFF"> donc ton body est là. A moins que tu parles d'autres choses. Dans ce cas sois plus précis.

Autre chose, ton menu apparait tout déroulé quand on ouvre la page avec Firefox.
Il faudrait que tu ajoutes la choses suivantes :
dans la partie <script>...</script>

Code :

function cache_all() {
var i=1;
var max=9;
var menu="";
for(i; i<max; i++) {
menu = "smenu"+i;
cache(menu);
}
}
et remplace <body bgcolor="#FFFFFF"> par
<body bgcolor="#FFFFFF" onload="cache_all();">

Pour le menu, il y a un article sur openweb.eu.org qui traite une chose un peu identique. As tu été voir ?

Message édité par T509 le 16-06-2004 à 17:26:55

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

J'ai intégré ce que tu m'as dit de faire, en revanche, ça fait quelques minutes que je navigue sur openweb.eu.org, et je n'ai pas trouvé d'article sur ce sujet (catégorie CSS et XHTML)

---------------
Bepimaco

T509

$job->GetJob(now)

http://www.openweb.eu.org/articles/menu_universel/

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Merci, je ne cherchait pas au bon endroit !

---------------
Bepimaco

bepimaco

Festina lente

J'ai bien tout lu, tout essayé, et je n'arrive pas à l'adapter à mon cas.

Si je résume la situation :

1 - J'arrive à changer la police, la taille, la couleur, etc ... de mon menu, mais
2 - Je n'arrive pas à le faire dérouler vers le haut
3 - Je n'arrive pas à le centrer sur la page
4 - La page qui se trouve sur le web est différente de celle que j'écrit

---------------
Bepimaco

T509

$job->GetJob(now)

il faut que tu étudies le javascript des 2 variantes expliquées pour voir ce qu'il modifient pour passer d'un menu horizontal à un menu vertical

Je regarde plus en détail ta page

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

essaie ceci :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Scouts de St Egrève - Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
function cache_all() {
var i=1;
var max=9;
var menu="";
for(i; i<max; i++) {
menu = "smenu"+i;
cache(menu);
}
}
//-->
</SCRIPT>
<STYLE type=text/css>
.menu {
position : absolute;
bottom : 0px;
}
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
z-index:2;
}
.menu dl {
float: left;
width: 6em;
}
.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, {
position : absolute;
display: none;
width: 100%;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a {
font-weight: normal;
border-top: 0 none;
}
#smenu1 {
margin : -140px 0px 0px 0px;
}
#smenu2 {
margin : -140px 0px 0px 0px;
}
#smenu3 {
margin : -100px 0px 0px 0px;
}
#smenu4 {
margin : -140px 0px 0px 0px;
}
#smenu5 {
margin : -160px 0px 0px 0px;
}
#smenu6 {
margin : -140px 0px 0px 0px;
}
#smenu7 {
margin : -140px 0px 0px 0px;
}
#smenu8 {
margin : -120px 0px 0px 0px;
}
</STYLE>
</head>
<body bgcolor="#FFFFFF" onload="cache_all();">
<div class="menu">
<dl onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<dt><a href="le_groupe_principal.htm">Groupe</a></dt>
<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<ul>
<li><a href="groupe_presentation.htm">Présentation</a></li>
<li><a href="groupe_activites.htm">Activités</a></li>
<li><a href="groupe_actualites.htm">Actualités</a></li>
<li><a href="groupe_archives.htm">Archives</a></li>
<li><a href="groupe_prive.htm">Espace privé</a></li>
<li><a href="groupe_divers.htm">Divers</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<dt><a href="sarabandes_principal.htm">Sarabandes</a></dt>
<dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<dt><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Louveteaux</a></dt>
<dd id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<ul>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Présentation</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_calendrier.html">Calendrier</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_photos.html">Photos</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_chefs.html">Chefs</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<dt><a href="sizaine_adaptee_principale.htm">Siz. adaptée</a></dt>
<dd id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<dt><a href="scout_principal.htm">Scouts</a></dt>
<dd id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<ul>
<li><a href="scout_presentation.htm">Présentation</a></li>
<li><a href="scout_la_troupe.htm">Troupe</a></li>
<li><a href="scout_les_activites.htm">Activités</a></li>
<li><a href="scout_mini_camp.htm">Mini-camp</a></li>
<li><a href="scout_le_camp.htm">Camp</a></li>
<li><a href="scout_espace_prive.htm">Espace privé</a></li>
<li><a href="scout_divers.htm">Divers</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
<dt><a href="pionniers_principal.htm">Pionniers</a></dt>
<dd id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
<dt><a href="compagnons_principal.htm">Compagnons</a></dt>
<dd id="smenu7" onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<dt><a href="divers_principal.htm">Divers</a></dt>
<dd id="smenu8" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<ul>
<li><a href="divers_liens.htm">Liens</a></li>
<li><a href="divers_documents.htm">Documents</a></li>
<li><a href="http://pagesperso.laposte.net/bepimaco/livre.php">Livre d'or</a></li>
<li><a href="divers_ressources.htm">Ressources</a></li>
<li><a href="divers_contacts.htm">Contact</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

ça semble être pas top avec Firefox

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Mais ça marche très bien sous IE 6 !

En tout cas, merci beaucoup de ton aide. J'ai passé une bonne partie de mon après-midi à chercher et à consulter les différents sites, et maintenant, je comprends un peu mieux le principe du CSS.

Juste pour finir, est-ce que tu sais comment on fait pour qu'il soit centré ?

---------------
Bepimaco

T509

$job->GetJob(now)

regarde les méthodes de centrage sur openweb ou sur alsacecreation

Si tu as progressé, c'est cool. Par contre ne fait pas un site qui n'est valable que sur IE6, essaie sur d'autres version d'IE et sur mozila, opéra

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

tu t'en sors ?

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

$man

salut,
n'étant pas ni un pro du js, ni du css je ne pourrais apporter mon aide.
Juste pour dire à T509 que son activité sur le forum et l'aide qu'il nous apporte est très appréciable.
merci

T509

$job->GetJob(now)

de rien, je n'ai pas une activité très prenante actuellement alors cela m'occupe.
je ne suis pas un pro non plus.
En tout cas j'apprécie beaucoup ta reconnaissance. Ce n'est pas le cas de tout le monde ...

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

EpoK

Let's burn

sous firefox ca fait bien nimp

T509

$job->GetJob(now)

Oui, il faut optimiser le CSS, mais je n'ai pas cherché

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

Pour que cela fonctionne mieux sous firefox, je crois qu'il ne faut pas mettre la partie <dd> ... </dd> quand il n'y a pas de menu déroulant

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Salut T509, aujourd'hui j'ai pas eu bcp de temps, mais je vais regarder ça ce soir. Je m'occupe des DD à virer. Et comme le dit $man : merci

Je n'ai jamais eu de cours ni de bouquins et mes études ne sont pas vraiment dans cette branche (économie). Et c'est grâce à de l'aide comme celle que tu viens de m'apporter que j'ai réussi à monter quelques projets.

Je ne sais pas si tu as vu la pub de Wanadoo d'il y a quelques mois, mais ce forum me fait vraiment penser à ça.

Encore milles fois merci de ce que tu fais, parceque même si tu dis n'avoir rien d'autre à faire, tu pourrais ne rien faire du tout.

PS : je cherche cette histoire de centrage, et je compte bien trouver

---------------
Bepimaco

T509

$job->GetJob(now)

bepimaco a écrit :

Encore milles fois merci de ce que tu fais, parceque même si tu dis n'avoir rien d'autre à faire, tu pourrais ne rien faire du tout.

Je n'ai pas dit que je n'avais rien à faire loin de là. Je cherche du boulot (pas dans l'info) et en attendant, j'aide des potes à faire un site pour un joli projet sportif et je participe à ce forum.
Dès que j'en aurais retrouvé, vous ne me verrez plus ...

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

J'ai essayé d'enlever les DD :

Code :

<dd id="smenu7" onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
<ul>
</ul>
</dd>

Mais ça marche pas sous IE 6 : il me met un message d'erreur

Pour être précis :

Code :

Erreur
Une erreur est survenue.
Souhaitez-vous un débogage ?
Ligne : 19
Erreur : objet requis

Et la ligne 19, c'est :
if (document.getElementById) {

pareil pour la ligne 28

Message édité par bepimaco le 16-06-2004 à 21:18:39

---------------
Bepimaco

T509

$job->GetJob(now)

bon eh bien je ne sais pas. Il faudra de toutes les façons optimiser la choses car sous firefox, c'est l'absence de contenu dans certains menu déroulant qui pose problème.

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

ou alors là où il n'y a pas de contenu déroulant, enlève les appaels javascript onmouseover et onmouseout

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

cela marche mieux comme cela sous firefox :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Scouts de St Egrève - Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
<!--
function montre(id) {
cache_all();
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
function cache_all() {
var i=1;
var max=9;
var menu="";
for(i; i<max; i++) {
menu = "smenu"+i;
cache(menu);
}
}
//-->
</SCRIPT>
<STYLE type=text/css>
.menu {
position : absolute;
bottom : 3px;
}
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
z-index:2;
}
.menu dl {
float: left;
width: 6em;
}
.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, {
position : absolute;
display: none;
width: 100%;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a {
font-weight: normal;
border-top: 0 none;
}
#smenu1 {
margin : -140px 0px 0px 0px;
}
#smenu2 {
margin : -140px 0px 0px 0px;
}
#smenu3 {
margin : -100px 0px 0px 0px;
}
#smenu4 {
margin : -140px 0px 0px 0px;
}
#smenu5 {
margin : -160px 0px 0px 0px;
}
#smenu6 {
margin : -140px 0px 0px 0px;
}
#smenu7 {
margin : -140px 0px 0px 0px;
}
#smenu8 {
margin : -120px 0px 0px 0px;
}
</STYLE>
</head>
<body bgcolor="#FFFFFF" onload="cache_all();">
<div class="menu">
<dl onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<dt><a href="le_groupe_principal.htm">Groupe</a></dt>
<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<ul>
<li><a href="groupe_presentation.htm">Présentation</a></li>
<li><a href="groupe_activites.htm">Activités</a></li>
<li><a href="groupe_actualites.htm">Actualités</a></li>
<li><a href="groupe_archives.htm">Archives</a></li>
<li><a href="groupe_prive.htm">Espace privé</a></li>
<li><a href="groupe_divers.htm">Divers</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="cache_all();">
<dt><a href="sarabandes_principal.htm">Sarabandes</a></dt>
<dd id="smenu2">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<dt><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Louveteaux</a></dt>
<dd id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<ul>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_principal.htm">Présentation</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_calendrier.html">Calendrier</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_photos.html">Photos</a></li>
<li><a href="http://perso.wanadoo.fr/site-lvt/louveteaux_chefs.html">Chefs</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="cache_all();">
<dt><a href="sizaine_adaptee_principale.htm">Siz. adaptée</a></dt>
<dd id="smenu4">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<dt><a href="scout_principal.htm">Scouts</a></dt>
<dd id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<ul>
<li><a href="scout_presentation.htm">Présentation</a></li>
<li><a href="scout_la_troupe.htm">Troupe</a></li>
<li><a href="scout_les_activites.htm">Activités</a></li>
<li><a href="scout_mini_camp.htm">Mini-camp</a></li>
<li><a href="scout_le_camp.htm">Camp</a></li>
<li><a href="scout_espace_prive.htm">Espace privé</a></li>
<li><a href="scout_divers.htm">Divers</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="cache_all();">
<dt><a href="pionniers_principal.htm">Pionniers</a></dt>
<dd id="smenu6">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="cache_all();">
<dt><a href="compagnons_principal.htm">Compagnons</a></dt>
<dd id="smenu7">
<ul>
</ul>
</dd>
</dl>
<dl onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<dt><a href="divers_principal.htm">Divers</a></dt>
<dd id="smenu8" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<ul>
<li><a href="divers_liens.htm">Liens</a></li>
<li><a href="divers_documents.htm">Documents</a></li>
<li><a href="http://pagesperso.laposte.net/bepimaco/livre.php">Livre d'or</a></li>
<li><a href="divers_ressources.htm">Ressources</a></li>
<li><a href="divers_contacts.htm">Contact</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

EDIT : dernière modif qui marche mieux sous firefox

Message édité par T509 le 16-06-2004 à 22:11:04

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

bepimaco

Festina lente

Merci,

j'ai fait la modif, et je cherche comment centrer

---------------
Bepimaco

T509

$job->GetJob(now)

C'est le float: left; qui gène. mais si on l'enlève, cela ne marche plus.

J'avais modifié le javascript aussi ...

bepimaco

Festina lente

Tu as rajouté : cache_all();
Je l'ai mis dès le première fois ! Sinon, je viens de relire les 2 codes javascript, et je ne vois pas d'autres changements.

Pour le float, c'est bien ce qu'il me semblait, et j'ai essayé de changer, mais ça ne marche jamais.

Si j'ai bien compris,
position: absolut permet de le garder en bas de la page. Si on l'enlève, il se met juste en dessous du calque précédent.

J'ai essayé les vertical-align, mais ça ne donne rien

---------------
Bepimaco

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] Menu déroulant inversé en CSS

Sujets relatifs
[VB 6] Liste d'un seul élément et affichage [RESOLU]	[MYSQL] faire la somme de la selection ? [RESOLU]
[php] Afficher des enregistrements sans doublon [résolu]	[ XHTML et CSS ] Problème d'overflow: auto...
forcer date jj/mm/aaaa [Résolu]	CSS et impression
[RESOLU][API WIN] List box	[résolu]DropDownList: récupération données
[C#] nombre de lignes dans un datagrid ? [résolu]	[Résolu] Utilisation de getch et getkey
Plus de sujets relatifs à : [Résolu] Menu déroulant inversé en CSS

Page générée en 0.298 secondes