Menu Vertical
Kolor
-
Kolor -
Kolor -
Bonjour,
J'aimerais savoir comment faire pour créer un menu vertical en html en le mettant sur le coté gauche.
Dans le css je vois pas quoi mettre
J'ai essayer ça mais ça me le met en haut a gauche avant le header alors que je voudrais après.
Merci.
J'aimerais savoir comment faire pour créer un menu vertical en html en le mettant sur le coté gauche.
<div id="menu"> <div class="menu"> <ul> <li><a href="#">test 1</a></li> <li><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> <li><a href="#">test 4</a></li> <li><a href="#">test 5</a></li> </ul> </div> </div>
Dans le css je vois pas quoi mettre
#menu {
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
padding: 10px;
float: right;
width: 180px;
margin-left: 10px;
background-color: #ff9900;
background-position: right top;
background-repeat: no-repeat;
}
#menu li {
list-style-type: none;
#menu a {
color: white;
text-decoration: none;
}
#menu a:hover {
color: #cc0000;
}
#menu li a:hover {
border-left: 5px solid #cc0000;
background-color: white;
padding-left: 5px;
}
J'ai essayer ça mais ça me le met en haut a gauche avant le header alors que je voudrais après.
Merci.
A voir également:
- Menu Vertical
- Menu déroulant excel - Guide
- Powerpoint vertical - Guide
- Canon quick menu - Télécharger - Utilitaires
- Barre vertical mac ✓ - Forum MacOS
- Trait vertical clavier - Forum Clavier
3 réponses
ta derniere regle css :
#menu {
height:50px;
width: 100px;
}
#menu {
height:50px;
width: 100px;
}
Merci j'ai fais un nouveau css mais le problème c'est qu'au lieu qu'il va en dessous de l'image il va a gauche a coter de l'image.
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#1a61a9; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
list-style:none;
}
.menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(../images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
*html .menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(../images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited {
background:url(../images/menubg1.jpg) no-repeat;
text-decoration:none;
}
.bot{clear:left;}
colle moi ton code page complet parce que là c'est un peu trop leger comme infos
a tu un conteneur de ta page ? une balise <div> ou <tb> qui contient ta page web.
ca faciliterai grandement ton positionnement de balise
a tu un conteneur de ta page ? une balise <div> ou <tb> qui contient ta page web.
ca faciliterai grandement ton positionnement de balise
Je vois de voir que sur ie il est bien placer...
<td><table width="100%" border="0" cellpadding="18" cellspacing="0" class="footer_legal_notice">
<td width="50%">
<img width="470" height="150" src="../image/test.jpg">
<img src="images/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item"><a href="#">test 1</a></li>
<li class=""><a href="#" title="test">test 2</a></li>
<li class=""><a href="#" title="test">test 3</a></li>
<li class=""><a href="#" title="test">test 4</a></li>
<li class=""><a href="#" title="test">test 5</a></li>
<li class=""><a href="#" title="test">test 6</a></li>
</ul>
</div>
<td><table width="100%" border="0" cellpadding="18" cellspacing="0" class="footer_legal_notice">
<td width="50%">
<img width="470" height="150" src="../image/test.jpg">
<img src="images/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item"><a href="#">test 1</a></li>
<li class=""><a href="#" title="test">test 2</a></li>
<li class=""><a href="#" title="test">test 3</a></li>
<li class=""><a href="#" title="test">test 4</a></li>
<li class=""><a href="#" title="test">test 5</a></li>
<li class=""><a href="#" title="test">test 6</a></li>
</ul>
</div>
Mais j'aimerais que ça soit en verticale et non en horizontal.
#menu ul { margin:0; padding:0; list-style-type:none; text-align:center; } #menu li { float:left; margin:auto; padding:0; background-color:black; } #menu li a { display:block; width:100px; color:white; text-decoration:none; padding:5px; } #menu li a:hover { color:#FFD700; } #menu ul li ul { display:none; } #menu ul li:hover ul { display:block; } #menu li:hover ul li { float:none; } #menu li ul { position:absolute; } #menu { height:50px; }