Bonjour tous le monde !
Je travaille pour une société et je souhaitais refaire le design du site afin qu'il soit plus compréhensible.
Pour cela je me suis servie de votre tuto Menu vertical déroulant.
A ceci j'ai rajouté des fonctions include (grâce encore à votre tutoriel) et le site commence à prendre forme.
Mais il me reste deux petits soucis auquels je ne trouve pas de solutions :
- Faire en sorte que le menu "suive" le conteneur, ainsi, si l'utilisateur est en bout de page, il peut toujours accéder au menu, sans avoir à scroller à l'envers.
- Afin que le menu soit plus sympathique visuellement, j'ai changé les couleurs des menus et sous menu.
Mais quand on est sur un menu amenant à des sous-menus, la couleur de fond n'est pas appliquée. J'ai vu une réponse dans le forum parlant de mettre onmouseover et de construire le menu de cette manière, mais onmouseover est-il compatible avec onclick?
Alors, afin de mettre en image tout ceci (parce que je me suis peut-être mal exprimée ^^), je vous donne le lien du site d'essai.
Et voici le code CSS :
Et voici le code HTML :
Je précise que je suis une débutante !
S'il vous manque des infos, faites le moi savoir je les mettrais volontier en édit.
Merci d'avance !
Modifié par Ashka (24 Jan 2007 - 11:07)
Je travaille pour une société et je souhaitais refaire le design du site afin qu'il soit plus compréhensible.
Pour cela je me suis servie de votre tuto Menu vertical déroulant.
A ceci j'ai rajouté des fonctions include (grâce encore à votre tutoriel) et le site commence à prendre forme.
Mais il me reste deux petits soucis auquels je ne trouve pas de solutions :
- Faire en sorte que le menu "suive" le conteneur, ainsi, si l'utilisateur est en bout de page, il peut toujours accéder au menu, sans avoir à scroller à l'envers.
- Afin que le menu soit plus sympathique visuellement, j'ai changé les couleurs des menus et sous menu.
Mais quand on est sur un menu amenant à des sous-menus, la couleur de fond n'est pas appliquée. J'ai vu une réponse dans le forum parlant de mettre onmouseover et de construire le menu de cette manière, mais onmouseover est-il compatible avec onclick?
Alors, afin de mettre en image tout ceci (parce que je me suis peut-être mal exprimée ^^), je vous donne le lien du site d'essai.
Et voici le code CSS :
<style type="text/css">
<!--
body {
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.haut {
width: auto;
height: 126px;
color: #000;
font-size: 36px;
padding: 10px;
background-image: url(Logosansframe.jpg);
background-repeat:no-repeat;
background-position:center;
margin-left: 240px;
}
.conteneur {
height: 338px;
width: 100%;
}
.gauche {
position: absolute;
left: 0;
width: 240px;
height: 338px;
background-image: none;
}
.frame {
margin-left: 240px; /* on place ce bloc à droite du bloc menu de 240px de large */
width: auto;
height: auto;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 14px;
color: #fff;
}
.bas {
width: auto;
height: 30px;
background-color: #000;
color: #fff;
font-size: 12px;
padding: 10px;
text-align: center;
}
-->
/* CSS issu des tutoriels css.alsacreations.com */
<!--
body {
margin: 0;
padding: 0;
background: black;
font: 100% arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid black;
background: #ccc;
}
#menu dd {
border: 1px solid black;
}
#menu li {
text-align: left;
background: #000;
}
#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a {
color: #fff;
font-size: 100%;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu dt a:hover {
background: #ffff66;
}
#menu li a:hover {
background: #cc9900;
}
.mentions {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
Et voici le code HTML :
<body>
<div class="haut">
.
</div>
<div class="gauche">
<dl id="menu">
<dt onclick="javascript:montre();"><a href="index.php?page=Accueil">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Nos Produits</dt>
<dd id="smenu2">
<ul>
<li><a href="index.php?page=Afficheurs">Afficheurs</a></li>
<li><a href="index.php?page=AEC">Balisage de Décoration</a></li>
<li><a href="#">Balisage de Sécurité</a></li>
<li><a href="#">Eclairage - Décoration</a></li>
<li><a href="#">Signalisation</a></li>
<li><a href="#">Personnalisables</a></li>
<li><a href="#">Options</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Téléchargements</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Fiches Techniques</a></li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Documentation</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="#">Contacts</a></dt>
<dt onclick="javascript:montre();"><a href="#">Accès</a></dt>
</dl>
</div>
<div class="frame">
<?php
$pages=array(
'Accueil'=>'Accueil2',
'Afficheurs'=>'Afficheurs2',
'AEC'=>'AEC2',
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']].'.txt';
else
include 'Accueil2.txt';
?>
</div>
<div class="bas">
<p>Webmaster : truc bidulle</p>
<p>Dernière Mise à jour : XX/XX/XX</p>
<A HREF="http://www.hit-parade.com/hp.asp?site=p482687" TARGET="_blank"><Img border="0" SRC="http://logp.hit-parade.com/logohp1.gif?site=p482687" WIDTH="88" HEIGHT="15"></A>
</div>
</body>
Je précise que je suis une débutante !
S'il vous manque des infos, faites le moi savoir je les mettrais volontier en édit.
Merci d'avance !
Modifié par Ashka (24 Jan 2007 - 11:07)
, histoire de ne pas faire du "copier-coller" bête.
