Page 1 sur 1
Menu CSS et contenu
Publié : 23 mai 2006, 10:27
par mymyma
Bonjour,
Je développe un site web avec un menu exclusivement en CSS (utilisant des balises div et des balises a). Le menu est horizontal.
En dessous de mon menu, il y a un formulaire (mais il peut y avoir n'importe quoi, le résultat est le même). Quand je déroule mon formulaire, je n'ai pas acces aux menus qui s'affichent au dessus de mon formulaire et le menu est partiel au dessus des boites de texts.
Je voudrais savoir comment faire pour que mon menu s'affiche corectement au dessus de ce qu'il y a en dessous du menu sans avoir à laisser un espace trop important entre les deux.
Merci d'avance
Mymyma
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Publié : 23 mai 2006, 10:36
par Asumbaa
Bonjour,
Constater de visu de quoi tu parles, pouvoir voir un bout de code, ça nous serait utile pour te répondre
Peux-tu nous donner l'adresse ? Ou s'il n'est pas encore en ligne, un extrait de code (HTML + CSS) ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Le code
Publié : 23 mai 2006, 10:57
par mymyma
Voilà le code de mon menu :
Code : Tout sélectionner
<div id="positioner">
<div class="menu">
<a class="outer" href="../menu/index.html">DEMOS
<table class="first"><tr><td>
<a class="inner hide" href="" >M1.1</a>
<a class="inner" href="" >M1.2</a>
<a class="inner" href="" >M1.3</a>
<a class="inner" href="" >M1.4</a>
<a class="inner second" href="" >M1.5 >
<table><tr><td>
<a class="inner" href="" ">M1.1.1</a>
<a class="inner" href="" >M1.1.2</a>
<a class="inner" href="" >M1.1.3</a>
</td></tr></table>
</a>
<a class="inner" href="" >M1.6</a>
<a class="inner" href="" >M1.7</a>
<a class="inner" href="" >M1.8</a>
<a class="inner" href="" >M1.9</a>
<a class="inner" href="" >M1.10</a>
</td></tr></table>
</a>
<a class="outer" href="index.html">MENUS
<table class="first"><tr><td>
<a class="inner" href="" >M2.1</a>
<a class="inner" href="" >M2.2</a>
<a class="inner" href="" >M2.3</a>
<a class="inner" href="">M2.4</a>
<a class="inner" href="" >M2.5</a>
<a class="inner" href="" >M2.6</a>
<a class="inner" href="" >M2.7</a>
</td></tr></table>
</a>
</div></div>
<div class="corps">
blablablablablablablablablablablabla
blablablablablablablablablablablabla
blablablablablablablablablablablabla
</div>
et le code CSS :
Code : Tout sélectionner
#positioner {
clear:both;
position:relative;
top:50px;
left:1px;
z-index:100;
}
.menu {
display:block;
position:absolute;
text-align: center;
}
.menu a.outer, .menu a.outer:visited {
color:#fff;
width:104px;
height:18px;
background:#e09222;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.menu a.outer:hover {
background:#697210;
overflow:visible;
}
.menu a.outer:hover table.first {
background:#eee;
border-collapse:collapse;
}
.menu a.inner, .menu a.inner:visited {
width:102px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}
.menu a.inner:hover {
background:#add;
}
.menu a.outer table.first a.second {
height:18px;
line-height:18px;
overflow:hidden;
font-weight:bold;
}
.menu a.outer table.first a.second:hover {
position:relative;
overflow:visible;
}
.menu a.outer table.first a.second:hover table {
position:absolute;
top:-2px;
left:102px;
border-collapse:collapse;
background:#eee;
border:1px solid #000;
font-weight:normal
}
.titres {
top: 50px;
position: absolute;
width: 45%;
text-align: right;
heigth: 100px;
left: 5px;
}
.contenu {
top: 50px;
position: absolute;
width: 45%;
text-align: left;
heigth: 100px;
right: 5px;
}
.validate {
margin:5px 5px 5px 5px;
top: 150px;
position: absolute;
width: 100%;
text-align: center;
heigth: 100px;
left: 5px;
}
Publié : 23 mai 2006, 14:09
par Asumbaa
Salut,
Bon, il y a quelques problèmes de validité et d'accessibilité
- tu n'as pas le droit de mettre une table ou n'importe quel autre élément de type bloc dans une balise a
- attention dans la css, "heigth" c'est "height"
- un menu généralement se code comme une liste, puisque c'est une liste de liens. Tu devrais donc avoir des balises ul, li imbriquées pour tes sous-menus.
Plus d'explications, et un chouette code à adapter
chez Alsacreations.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Sans javascript
Publié : 23 mai 2006, 14:27
par mymyma
Le menu que tu m'as montré est très bien mais il utilise javascript que je veux à tout pris éviter.
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Publié : 23 mai 2006, 14:34
par Asumbaa
Mmmh...
Sans aucun Javascript, tu te retrouves obligé d'utiliser la balise a pour chaque élément qui doit avoir une réaction au survol (à cause d'Internet Explorer qui ne comprend le :hover que sur a)
Mais comme dans un a tu ne peux pas mettre un bloc, et que IE ne comprend pas plus le sélecteur a + div, tu te retrouves bloqué par ce navigateur antédiluvien
Si même chez Alsacreations, ils ont pas trouvé le moyen de se passer de js pour les menus déroulants, y'a peu d'espoir...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Menu encore
Publié : 24 mai 2006, 16:18
par mymyma
Coucou
Je me suis résignée à utiliser du javascript cependant, j'ai pris le modèle qui m'a été fourni mais je veux créer un menu à 3 niveaux et je n'y arrive pas.
Avez-vous des sources ou des liens à me proposer ?
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Publié : 24 mai 2006, 17:25
par Asumbaa
Hello,
Où bloques-tu ? A deux niveaux, ça fonctionne ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
3 niveaux
Publié : 26 mai 2006, 17:27
par mymyma
En fait, je veux faire un 3ème niveau à droite du second mais la place est systématiquement réservée en dessous. Mon niveau 3 est donc inclus dans mon niveau 2.
Par exemple si j'ai le sous menu suivant pour un menu
menu 1.1
menu 1.2
menu 1.3
et que le menu 1.2 a un sous menu, j'obtient l'affichage suivant qd je passe au dessus du menu 1.2 :
menu 1.1
menu 1.2
menu 1.2.1
menu 1.2.2
menu 1.3
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Publié : 29 mai 2006, 14:15
par Asumbaa
Salut,
Il faut positionner ton menu de niveau 3 à droite de son menu père.
Peux-tu donner un extrait de code HTML ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3