[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

Reprise du message précédent :
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é

T509

$job->GetJob(now)

position: absolute;

oui, il permet un positionnement absolu par rapport au navigateur., là c'est à toi de voir.

Pour chache_all(), je l'ai mis dans la fonction montre(id) et dans les menus sans contenu déroulant

pour centrer ton menu, il y a peut-être une solution en lui mettant une largeur fixe 8*6em + ???
un bord gauche à 50%
une marge gauche à -(largeur/2)

pas sûr que cela fonctionne

bepimaco

Festina lente

J'ai essayé ça :

width: 62em;
left: 50%;
margin-left: -31em;

mais ça ne marche pas.

J'ai essayé de manipulé le left dans un peu tous les sens, mais ça ne donne pas encore de résultats !

EDIT : on ne peut âs lui dire que le début du menu est à 20% à gauche, et 80 % à droite ?

Message édité par bepimaco le 17-06-2004 à 00:53:16

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

T509

$job->GetJob(now)

C'est bon

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;
left: 50%;
bottom : 3px;
width: 780px;
margin-left: -390px;
}
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 id="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>

bepimaco

Festina lente

Merci, ça marche nikel.

Par contre, je l'ai essayé sur IE6 en 800x600, et là, il bug !
Le menu reste à gauche, et ne se met pas en bas de la page !

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

T509

$job->GetJob(now)

C'est normal, ton menu est déclaré plus large que la fenêtre. ALors IE essaie de le caser

bepimaco

Festina lente

Je vais essayer de le réduire, histoire que ça rentre en 800x600 !

Juste un truc : comment tu as calculé 780 px ?
Il me semble que c'est 8x6em= 48 em
Donc 1em=16,25 !

Est-ce que c'est ça !

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

T509

$job->GetJob(now)

780, je ne l'ai pas calculé, mais j'ai essayé jusqu'à temps que tout rentre sur une ligne à l'écran
l'unité em est une unité proportionelle, il y a peu de chance que cela fonctionne bien. Mais essaie et tant que cela ne fonctionne pas, agrandi.

Juste une chose, quand j'ai un cadre à faire passer en 800x600 absolument, je le règle à 770px

Message édité par T509 le 17-06-2004 à 12:31:44

T509

$job->GetJob(now)

#menu {
position : absolute;
left: 50%;
bottom : 3px;
width: 768px;
margin-left: -378px;
}

#menu dl {
float: left;
width: 94px;
}

bepimaco

Festina lente

Merci pour tout T509, ça marche, et j'ai compris le principe : double félicitations.

A bientôt peut-être, et si tu as une question pour utiliser le bloc-note, n'hésite pas, je sais tout comment ça marche !

---------------
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.098 secondes