Page 1 sur 1
menu tjs actif
Posté : 04 sept. 2007, 10:11
par zacdis
Bonjour,
J'ai un petit soucis (encore!). Sur le menu de ma page web, la première rubrique du menu est active par défaut (cf.image).
Je souhaiterais obtenir un menu "normal", ou seules les rubriques que l'on selectionne sont actives.
Merci pour votre aide
A+
Posté : 04 sept. 2007, 13:57
par sadeq
Bonjour,
Aide nous stp pour que nous puissions t'aider. Donne la partie du code incriminé. et explique mieux que ça ce que tu veux avoir comme résultat
Posté : 04 sept. 2007, 14:00
par Aureusms
Si tu utilise Javascript pour afficher /cacher ton menu, cela vient de l'évènement onmouseover / onmouseout mais sans code pas facile...
menu
Posté : 05 sept. 2007, 16:09
par zacdis
ok salut tout le monde,
Désolé je ne suis pas encore au point question us et coutume du forum, et puis m bon sens commun
, c clair c plus simple avec le code sous les yeux. Alors voilà la bete,
(mdr)
Code : Tout sélectionner
<!-- Menu is displayed in reverse order from how you define it (caused by float: right) -->
<a href="index.html" title="Contact" class="lastMenuItem">Contact<span class="desc">Effectifs</span></a>
<a href="ouvrage.html" title="References">Références<span class="desc">Réalisations</span></a>
<a href="index.html" title="Materiels">Matériels<span class="desc">Véhicules Instruments</span></a>
<a href="index.html" title="Metiers">Métiers<span class="desc">compétences</span></a>
<a href="index.html" title="Accueil" class="active">Accueil<span class="desc">Bienvenue</span></a>
Et voilà pour la feuille de style, je ne suis sur de la portion de code qui gere l'affichage de mon menu, alors je poste tout. De toute facon je pense que ca ne fais peur à personne ici, à part moi
Code : Tout sélectionner
/*
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
*/
/* -- Main layout styles -- */
body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: Helvetica, sans-serif;
font-size: 1.0em;
background-color: #333;
}
#siteBox {
float: left;
width: 100%;
color: #FFF;
}
/* -- Header layout/display styles -- */
#header {
float: left;
width: 100%;
height: 4em;
background: #25509F url(../images/media/bandeau_zenith.jpg) no-repeat bottom left;
}
#header a {
float: right;
width: 8em;
padding: 5px 10px 5px 10px;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
background-color: #666;
border-bottom: 2px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
}
#header a:hover, #header a.active {
padding-top: 10px;
background-color: #333;
}
#header a.lastMenuItem {
background-image: url(../images/corner_tr.gif);
background-repeat: no-repeat;
background-position: top right;
border-right: 0px;
}
a .desc {
display: none;
text-transform: lowercase;
color: #FC0;
}
a:hover .desc, .active .desc {
display: block;
}
/* -- Header title and subTitle layout/display styles -- */
.title {
float: left;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;
}
.subTitle {
display: block;
font-size: 0.4em;
text-transform: lowercase;
line-height: 1.2em;
letter-spacing: 0.01em;
}
/* -- Content layout/display styles -- */
#content {
float: left;
width: 100%;
padding: 1em 0 1em 0;
background-color: #666;
}
#contentLeft {
float: left;
width: 23.3%;
margin-bottom: 1em;
background: #777 url(../images/corner_sub_tr.gif) no-repeat top right;
}
#contentRight {
float: right;
width: 75%;
background: #777 url(../images/corner_sub_tl.gif) no-repeat top left;
}
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
}
#content a {
text-decoration: none;
color: #FC0;
border-bottom: 1px solid #AAA;
}
#content a:hover {
color: #DDD;
background-color: #888;
border-bottom: 1px solid #EEEEEE;
}
.header, .subHeader {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #AAA;
}
.subHeader {
border: 0px;
}
/* -- Content left site links (large plus icon) -- */
#content a.menuItem {
display: block;
padding: 5px 0 5px 54px;
background: url(../images/icn_plus.gif) no-repeat center left;
border: 0px;
}
#content a:hover.menuItem {
color: #DDD;
background: #888 url(../images/icn_plus_on.gif) no-repeat center left;
border: 0px;
}
/* -- Footer layout/display styles -- */
#footer {
float: left;
width: 100%;
height: 3em;
font-size: 0.6em;
text-transform: lowercase;
line-height: 2.6em;
color: #0AD;
background: #25509F url(../images/media/bandeau_zenith.jpg) repeat-y top left;
}
#footerLeft {
float: left;
width: 60%;
height: 3em;
text-align: left;
background: url(../images/corner_bl.gif) no-repeat bottom left;
}
#footerRight {
float: right;
width: 35%;
height: 3em;
text-align: right;
background: url(../images/corner_br.gif) no-repeat bottom right;
}
#footer a {
color: #0AD;
}
#footer a:hover {
color: #666666;
}
/* -- Display formatting styles -- */
.grey {
font-size: 0.9em;
color: #AAA;
}
.white {
color: #FFF;
}
acronym {
cursor: help;
border-bottom: 1px dotted #AAA;
}
/* -- <ul> tag styles -- */
ul{
font-size: 0.8em;
padding-top: 5px;
padding-bottom: 5px;
list-style-image: url(../images/li_bullet.gif);
}
li {
margin-left: 50px;
}
/* -- Image alignment classes -- */
.imgLeft, .imgRight {
margin: 30px;
}
.imgLeft {
float: left;
margin-left: 150px;
}
.imgRight {
float: right;
margin-right: 150px;
}
.imgCenter {
float: left;
margin-left: 250px;
/* -- Utility classes to create the bottom rounded corners -- */
.bottomCorner {
text-align: right;
}
.vBottom {
vertical-align: bottom;
}
Bon voilà, j'espère que tout y est cette fois ci.
Merci pour votre aide.
Salut,
Posté : 05 sept. 2007, 18:04
par Aureusms
Change :
en
Je crois que cela vient de là.
menu
Posté : 06 sept. 2007, 08:51
par zacdis
Salut,
Merci le probleme est en parti résolu, mais ce n'est pas encore tout à fait ca. Tu peux regarder ce que ca donne sur l'image :
La rubrique "accueil" devrait etre comme la rubrique "métiers"...
Alors docteur
???
Posté : 06 sept. 2007, 10:38
par Aureusms
Non car tu as cela :
Ta class "active" te fais un affichage différent. Essaye cela :
menu
Posté : 06 sept. 2007, 15:19
par zacdis
T'assures sévère! Ca marche.
C'est quelque chose que j'aurais pu trouver en cherchant un peu plus, je viens de comprendre la hiérarchie de la ligne de code
Code : Tout sélectionner
<a href="index.html" title="Accueil" class="active">Accueil</a>
Lien - Infobulle - Etat - Texte
Par contre je ne suis pas sur d'avoir bien compris la suite
Code : Tout sélectionner
<a href="index.html" title="Accueil" class="active">Accueil<span class="desc">Bienvenue</span></a>
La portion
C'est pour lui indiquer une sous rubrique ou il y aura marqué "Bienvenue"?
En tout k, Merci
Salut
Posté : 06 sept. 2007, 15:29
par Aureusms
veut dire que tu as un menu caché sur ton bouton. En clair tu as raison... SI tu veiux mettre plus de menu caché reprends la même syntaxe.
Si tu regarde ta feuille de style tu auras
ou
qui t'indique pour le premier : quand je passe la souris sur la classe "
active" tu exécutes le code pour la classe desc et pour le second quand je passe la souris sur le
lien (balise a), tu exécutes le code pour la classe desc. Généralement les codes en dessous des "hovers" sont de types display:block;
Posté : 06 sept. 2007, 17:01
par zacdis
Yep, je crois que g saisi ... sauf la fin c koa un dispaly block : un block d'affichage?? Celui qui se met en place quand tu passe la souris sur la classe active et qui laisse apparaitre la sous-rubrique??
Hover c'est quoi exactement en fait?
Merci
Posté : 06 sept. 2007, 17:28
par Aureusms
hover = h+over = en passant dessus in English