Aide Site Design Menu déroulant
Hors ligneFlorent Le 01/04/2008 à 21:08 Profil de Florent Configuration de Florent

2eme Année DUT Info
Bonjour,
Voila je commence tout juste a faire mon site et j'ai déjà l'idée sur le design... Le problème que j'ai c'est que je ne sais pas quel language utilisé pour ce que je veux faire...
Alors voila ce que je veux... : Des menus déroulants comme Vulgarisation (Cours, tutoriaux, FAQ,..., Services)
Comment faut-il faire ?

Merci :)
--
Quand on veut, on peut...
Hors ligneAnthony Le 01/04/2008 à 23:29 Profil de Anthony Configuration de Anthony

Fou du volant
Salut

Les menus sont réalisés en XHTML / CSS uniquement

Regarde le code source du site, le code source de la feuille de style "style.css" et tu retires petit à petit tout ce qui est inutile au menu, tu resteras avec le code nécessaire ;)

N'hésite pas si t'as un problème durant le processus
--

Hors ligneFlorent Le 02/04/2008 à 09:25 Profil de Florent Configuration de Florent

2eme Année DUT Info
OK
Merci bien de ton aide !
Je vais comment le travail tout de suite ^^
Je te tiens au courant !

EDIT :
Je suis arrivé a voir ton style.css et le code HTML des menus déroulant... J'ai un petit problème c'est que je ne me souviens pas trop du CSS, j'en avais fait un petit peu mais vraiment un petit peu...

Voila ce que je pense être le bon code, peux-tu me confirmer ?
<ul id="bmenu">
     <li class="section"><a href="formation-informatique.php">Cours</a><br />
          <ul class="ssection">
               <li><a href="bases-pc.php">Les bases du PC</a></li>
               <li><a href="architecture-pc.php">Fonctionnement des composants</a></li>
               <li><a href="bases-reseaux.php">Les réseaux</a></li>

               <li><a href="securite-informatique.php">Sécurité informatique</a></li>
               <li><a href="bases-windows.php">Débuter sous Windows</a></li>
               <li><a href="au-coeur-windows.php">Au coeur de Windows</a></li>
               <li><a href="bases-internet.php">Les bases sur Internet</a></li>
               <li><a href="technique.php">Articles avancés</a></li>
               <li><a href="lexique.php">Lexique</a></li>

               <li><a href="documentations.php">Documentations</a></li>
          </ul>
     </li>


Et pour le CSS : (j'hésite entre plusieurs...)

.menu
{
background:url(images/site/menu_gauche.jpg) no-repeat;
height:230px;

.menu2
{
background:url(images/site/menu_gauche2.jpg) no-repeat;
}

.menu2 li
{
background:url(images/site/menu_gauche2_li.jpg) no-repeat;
}

.menu li,.menu2 li
{
width:175px;
line-height:25px;
height:25px;
text-indent:5px;
list-style-type:none;
}

.menu li a:link,.menu li a:visited,.menu2 li a:link,.menu2 li a:visited
{
padding-left:5px;
width:160px;
color:#FFF;
}
.menu li a:hover,.menu2 li a:hover
{
color:#FEEEC9;
}


Merci d'avance !
--
Quand on veut, on peut...
Hors ligneFlorent Le 03/04/2008 à 12:35 Profil de Florent Configuration de Florent

2eme Année DUT Info
Personne ne peut m'aider ?
--
Quand on veut, on peut...
Hors ligneAnthony Le 03/04/2008 à 16:13 Profil de Anthony Configuration de Anthony

Fou du volant
Faut être un peu patient on est pas tout le temps sur le forum

Bref l'<ul> du menu porte l'id "bmenu" il ya donc ce code CSS qui est important (pas forcément pour le fonctionnement du menu mais aussi pour son style, donc tu peux encore épurer pas mal de choses) :



#bmenu li.section
{
font-size:10pt;
font-weight:bold;
color:#FFF;
display:block;
float:left;
line-height:30px;
padding:0 15px 0 10px !important;
}
#bmenu .ssection
{
visibility:hidden;
position:absolute;
margin:0 !important;
padding:0 !important;
z-index:9000;
background:#74A0C3;
border:1px solid #91BBDE;
}
#bmenu .ssection li
{
list-style-type:none;
font-size:8.5pt;
line-height:22px;
margin:0 5px 0 5px;
}
#bmenu .ssection li a
{
display:block !important;
}
#bmenu .ssection li a:hover
{
color:#FFD494;
}
#bmenu li.section:hover > ul
{
visibility:visible;
}
--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels