* Just posted this one to general support section but then realised it probably belongs here, so apologies for double posting.
As a newbie I’m having a problem getting my head around trying to adapt an html menu style into a Wayfarer menu and I wondered if anyone might help or advise.
I’m already wading through the Wayfarer PDF book but finding it slow going.
Thanks in advance for any help given
Les
============ CSS CODE ========================
#menu{
background-color:#3C3836;
width:228px;
height:270px;
float:left;
list-style-type:none;
padding:30px 0 0 0;
}
#menu li{
float:left;
}
#menu a{
display:block;
float:left;
width:150px;
background-position:left 5px;
background-repeat:no-repeat;
padding:0 0 0 52px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#E1F8FD;
text-decoration:none;
line-height:30px;
}
.but1:hover, .but1_active{background-image:url(images/but1.gif);}
.but2:hover, .but2_active{background-image:url(images/but2.gif);}
.but3:hover, .but3_active{background-image:url(images/but3.gif);}
.but4:hover, .but4_active{background-image:url(images/but4.gif);}
.but5:hover, .but5_active{background-image:url(images/but5.gif);}
.but6:hover, .but6_active{background-image:url(images/but6.gif);}
.but7:hover, .but7_active{background-image:url(images/but7.gif);}
============= HTML MENU CODE ===================================
<div id="header">
<ul id="menu">
<li><a href="#" class="but1_active">Page 1</a></li>
<li><a href="#" class="but2">Page 2</a></li>
<li><a href="#" class="but3">Page 3</a></li>
<li><a href="#" class="but4">Page 4</a></li>
<li><a href="#" class="but5">Page 5</a></li>
<li><a href="#" class="but6">Page 6</a></li>
<li><a href="#" class="but7">Page 7</a></li>
</ul>
</div>
