Menu Vertical

Kolor -
Kolor - 19 juil. 2012 à 14:27

Bonjour,

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.

Afficher la suite

3 réponses

inspiring Messages postés 1936 Statut Membre 265

tu place l'ensemble ton menu dans une autre balise div positionner la où il doit se trouver

Kolor

Merci.
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;
 }

inspiring Messages postés 1936 Statut Membre 265

ta derniere regle css :

#menu {
height:50px;
width: 100px;
}

Kolor

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;}

Réponse 3 / 3
inspiring Messages postés 1936 Statut Membre 265

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
0
1. Kolor
  
  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>
  
  0

Menu Vertical

3 réponses

Discussions similaires

Newsletters