Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

7 mai 2009 4 07 /05 /mai /2009 14:55

Bien contente que le menu en css que je vous ai proposé il n'y a pas longtemps remporte autant de succès. POur trouver l'article, c'est ici : http://awerpi.olympe-network.com/menuderoulantencssethtml2/. Voici maintenant quelques précisions pour disposer votre menu où bon vous semble.

Tout d'abord, il faut savoir que la marche à suivre qui va être expliquée ici ne concerne que le deuxième paragraphe (mais qu'il faut laisser la totalité du code), et que la seule chose à modifier est surlignée en gris :



<style type="text/css">
<!--
#menuDeroulant{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant li{ float: left; margin: 0; padding: 0; border: 0;}

#menuDeroulant li:hover > .sousMenu { display: block; }

#menuDeroulant .sousMenu{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant .sousMenu{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant .sousMenu li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant li{ float: left; width: 100px; margin: 0; padding: 0; border: 0; font-size:12px;}

#menuDeroulant{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 0;}

#menuDeroulant li a:link, #menuDeroulant li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-right: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant li a:hover { background-color: #99CCFF; }
#menuDeroulant li a:active { background-color: #FF3300; }
#menuDeroulant .sousMenu li a:link,#menuDeroulant .sousMenu li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant .sousMenu li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



Le code à modifier est le suivant :
position: absolute; top: 0;

Ce code indique au navigateur où afficher le menu. Il lui dit de partir du haut du blog.

Pour le baisser dans la page, il suffit de lui dire de le mettre plus bas en lui donnant une valeur en pixels.
position: absolute; top :Xpx;

Mais on aussi la possibilité de le placer à droite :
position: absolute; right :Xpx;

Ou de le plasser à gauche :
position: absolute; left: Xpx

Ou en bas :
position absolute; bottom: Xpx


On peut aussi cumuler la valeur verticale et horizontale et faire un mélange de top et right par exemple.
Si je veux indiquer à mon menu de se placer à 300 pixel à partir de la gauche du blog et à 50 pixels en dessous du début du blog, alors j'écris :
position: absolute; left: 300px; top:50px;

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

VANESSA 03/11/2009 08:56


Bonjour,
Je désire mettre un menu déroulant vertical sans javascript dans mon blog, je viens de regarder ta rubrique mais je ne comprends pas ??
quelq'un pourrait il me donner clairement le code qu'il faut mettre avant le texte (;;;;;;;;;texte;;;;;) et le code à mettre après le text, avec un exemple
merci beaucoup de votre aide
vanessa


Luc 25/10/2009 11:30


Super merci

A bientôt
Luc


Luc 25/10/2009 11:23


Merci pour les réponses.
J'ai essayé ta solution et dès que je met une info pour le margin-right, j'ai le scroling!!!!
J'ai donc modifié comme cela:
with: 80% et là c'est bon. J'ai ôté le margin-right

#menuDeroulant{ font-family: Comic sans Ms; width: 80%; list-style-type: none; margin-left: 5%; padding: 0; border: 0; position: absolute; top:620px; margin-left:14%;}

Est-ce bon comme cela, car je ne peux pas vérifier sur l'ordi du bureau ou j'ai mon grand écran

Merci pour la rapidité de la réponse
Tu est "un chef"

Biz
Luc


Christelle Vinsonneau 25/10/2009 11:27


C'est centré !


Luc 25/10/2009 10:13


Bonjour Christelle,
Je reviens vers toi pour ma position "absolute"
J'ai plus d'info sur mon soucis. En fait quand je centre la barre de naviguation, j'ai une "scroling barre" en bas qui se met en place(brrrrrrrr).
J'ai essayé avec la fonction "left:...px" et après j'ai essayé avec la fonction "margin-left: ...%" là c'est idem dès que je dépasse un certain pourcentage j'ai la "scroling barre" qui se met en
place (re brrrrrrrr).
Y a t'il un solution à mon petit soucis.
C'est juste une question d'esthétique.
Merci à toi.

P.S Je suis allé voir un peu plus loin dans les infos que tu donnes "génial"
Biz


Christelle Vinsonneau 25/10/2009 11:10


Il te faut margin left et right.
En pourcentage, dès que tu as la scrollbar, c'est que tu as eu la main lourde (baisse le jusqu'à ce que tu tombes juste!)


Luc 24/10/2009 15:23


Bonjour, j'ai installé le menu déroulant et j'ai une question pour la position absolue.
Sur mon portable il est centré, mais sur mon pc ou j'ai un grand écran il est décalé sur la gauche. Y a t'il moyen qu'il soit centré pour tout modèle d'écran.
Merci
Et merci pour toutes les infos sur newsletter j'en raffole.

A
plus
Luc


Christelle Vinsonneau 25/10/2009 11:07


Oui, c'est possible !
Il suffit d'ajouter des indications de margin en pourcentages.

#menuDeroulant {width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 200px; margin-left:20%; margin-right:20%;}

Au besoin, adapte de façon plus précise les pourcentages que j'ai mis un peu au hasard dans cet exemple.