28172 sujets

CSS et mise en forme, CSS3

Jumeler l'accordeon et le fixe dans un menu en css et html

Bonjour,
le sujet n'est pas tres clair, je m'explique. Je débute en developpement de site et je cherche à faire un menu vertical en accordeon comme ici : http://demos.w3avenue.com/cross-browser-pure-css3-vertical-accordion/
J'ai récupéré le code et tout fonctionne, mais je voudrais que le HEADING 1 soit fixe car je n'ai pas de sous-menu. J'ai tout essayé en spécifiant des noms de balise spécifique mais rien ne marche.
voila le code CSS en question, si quelqu'un pouvait m'aider ce serait super et je vous en remercie par avance.
Je ne comprends rien au javascript c'est pourquoi je passe par le css et html que j'essai d'apprendre.

.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 500px;
}
 
.verticalaccordion>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;
 
    /* Decorative CSS */
    background-color:#f0f0f0;
}
 
.verticalaccordion>ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;
 
    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;
}
 
.verticalaccordion>ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}
Bonjour,
désolé, voici la partie du code html concerné
Cordialement,
Pierrick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accueil G.F.M.</title>

<link rel="stylesheet" href="verticalaccordion.css" type="text/css" />
</head>

<body>
<div class="verticalaccordion">
<ul>
<li>
<h3> ° Accueil</h3>
</li>

<li>
<h3>° Thématiques</h3>
<div>
<div align="left"><a href="Chien.html" class="Style6">- Analyse génétique fonctionnelle des maladies héréditaires spontanées du chien</a></div>
<br />
<div align="justify"><a href="Cellules_pigmentaires.html" class="Style6">- Physiologie et pathophysiologie des cellules pigmentaires</a></div>
<br />
<div align="justify"><a href="Taille_tissus.html" class="Style6">- Analyse génétique et fonctionnelle des mécanismes contrôlant la taille des tissus animaux</a></div>
</div>
</li>
<li>
<h3>° Enseignement</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>° Infos pratiques</h3>
<div>
<div align="center"><a href="infos_pratiques.html"class="Style6">Nous contacter</a></div>
<div align="center"><a href="Nous rejoindre.html"class="Style6">Nous rejoindre</a></div>

<div align="center"><a href="Plan_Ecole.html"class="Style6">Plan de l'école</a></div>
</div>
</li>
</ul>
</div>
</body>
</html>
[code]
Bon, eh bien...

Le problème est que tout tes liens sont sous le div .verticalaccordeon. Si à la place, tu place tous tes liens seulement dans un div#menu par exemple, et que tu ne donne un conteneur div.verticalaccordeon qu'à tes liens devant se dérouler, tu devrais pouvoir arriver à séparer les liens avec sous-menu et ceux sans.
Sujet clos
Aller à