Me revoilà
J'ai donc dans ma feuille de style (en suivant la syntaxe de GuizBizet) :
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: black; PADDING-TOP:
0px; FONT-FAMILY: verdana, arial, sans-serif
}
DL.menu1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 155px; LIST-STYLE-TYPE: none
}
DT.menu1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; MARGIN: 35px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD.menu1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL.menu1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI.menu1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu1 {
LEFT: 0px; WIDTH: 10.8em; POSITION: absolute; TOP: 1em
}
#menu1 DT {
FONT-WEIGHT: bold; BACKGROUND: #9CA9D1; MARGIN-LEFT: 0px ; PADDING-LEFT: 4px; CURSOR: pointer; LINE-HEIGHT: 13px;
HEIGHT: 19px; TEXT-ALIGN: center
}
#menu1 DD {
MARGIN-TOP: -4.5em; Z-INDEX: 100; BACKGROUND: #CFD6E9; LEFT: 95px; WIDTH: 10.8em; POSITION: absolute
}
#menu1 UL {
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
#menu1 LI {
FONT-SIZE: 10px; LINE-HEIGHT: 14px; HEIGHT: 20px; TEXT-ALIGN: left
}
#menu1 LI A {
DISPLAY: block; COLOR: #000; TEXT-DECORATION: none
}
#menu1 DT A {
DISPLAY: block; COLOR: #000; TEXT-DECORATION: none
}
#menu1 LI A:hover {
TEXT-DECORATION: none
}
(je m'occuperais de mon body pour le simplifier après, quand il me restera plus que cela ...)
et dans ma page htm (le javascript est bien sur dans le head) :
<!-- Menu -->
<DL id="menu1">
<DT onmouseover="javascript:montre('smenu1');"><A href="#">Courses &<br>
déplacements</A> </DT>
<DD id=smenu1 onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="#">- Courses nationnales</A> </LI>
<LI><A href="#">- Courses dans la région</A> </LI>
<LI><A href="#">- Calendrier</A> </LI>
<LI><A href="#">- Résultats</A> </LI>
<LI><A href="#">- Déplacements</A> </LI>
<LI><A href="#">- Déplacements</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>Clubs & collectivités</DT>
<DD id=smenu1 onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="#">- Liste des clubs</A> </LI>
<LI><A href="#">- Partenaires</A> </LI>
</UL>
</DD>
<DT onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>Conseils<br>
& santé</DT>
<DD id=smenu1 onmouseover="javascript:montre('smenu1');"
onmouseout=javascript:montre();>
<UL>
<LI><A href="#">- Fiche 1</A> </LI>
<LI><A href="#">- Fiche 2</A> </LI>
<LI><A href="#">- Fiche 3</A> </LI>
<LI><A href="#">- Fiche 4</A> </LI>
<LI><A href="#">- Fiche 5</A> </LI>
<LI><A href="#">- Fiche 6</A> </LI>
<LI><A href="#">- Les fiches techniques</A> </LI>
</UL>
</DD>
<DT>Contactez<br>
nous</DT>
</DL>
J'ai évitée (je pense la Classite aïgue)
Mais le résultat est pas sympa, c'est tout entremélé, certains ont des puces, d'autres non. les sous menus sont bloqués ouverts.
Même les positionnements on changés alors que je n'y ai pas touché.
Bref c'est une vrai galère. si vous voulez jeter un oeil
http://www.aliane.fr/test/css3/pffff.htm
Je commence à désesperer
Mon sujet est loin d'être résolu et si je le laisse parfois quelque temps c'est parce que je travaille à côté pour mes clients (donc RV, mises à jour de sites ....) J'essaye de me former toute seule dans mon coin sur les css dés que j'ai une seconde de libre mais c'est loin d'être évident.
Je viens de recevoir aujourd'hui mon bouquin sur les css de Meyer.
Le projet que je soumets ci dessus est une maquette que je dois faire pour un client.
Plutôt que de le faire en classique (avec tableau) j'aimerai le faire en css. Le menu est la partie la plus compliquée (je pense) mais si je n'y arrives pas, je vais devoir retourner à mes tableau car le projet va tout de même devoir sortir.
Voilà !
