asked on

A smile css menu with different width

Can anyone please code this simple css menu. Each link must have different width. And please can the other words come on a different line as shown in the demo picture of the menu.
Thank you
menu-Demo.jpg

ASKER CERTIFIED SOLUTION

ad5qa

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ad5qa

Better Yet


<style type="text/css">
#nav
{
	font-size: 14px;
	font-family: arial;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	 
}
#nav li
{
	margin: 0px 0px 0px 3px;
	padding: 0px;
	float: left;
	font-weight: bold;
}
#nav a
{
 
	height: 35px;
	display: block;
	float: left;
	text-align: center;
	color: #800000;
	text-decoration: none;
}
#nav a:hover
{
	background-color: #800000;
	color: #ffffff;
}
#nav li span
{
	height: 35px;
	border-right: 4px solid #ccc;
}
#nav li.oneline
{
	line-height:35px;
}
</style> 
 
 
<ul id="nav">
<li class="oneline"><a href="">About US</a><span></span></li>
<li><a href="">Financial<br />Services</a><span></span></li>
<li><a href="">Social<br />Responsibility</a><span></span></li>
<li><a href="">Social<br />Responsibility</a><span></span></li>
<li><a href="">Financial<br />Services</a></li>
</ul>

Open in new window

menu.jpg

rbudj

here you go... i placed the images in a folder called menu... adjust the paths as needed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title></title>
<style type="text/css">
#container {
width:500px;
}
 
#oneone {
width:76px;
float:left;
}
 
#twotwo {
width:99px;
float:left;
 
}
 
#threethree {
width:107px;
float:left;
 
}
 
#fourfour {
width:131px;
float:left;
}
 
#fivefive {
width:87px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="oneone"><img src="menu/1.jpg" width="76" height="50" /></div>
<div id="twotwo"><img src="menu/2.jpg" width="99" height="50" /></div>
<div id="threethree"><img src="menu/3.jpg" width="107" height="50" /></div>
<div id="fourfour"><img src="menu/4.jpg" width="131" height="50" /></div>
<div id="fivefive"><img src="menu/5.jpg" width="87" height="50" /></div>
 
</div>
</body>
</html>

Open in new window

menu.zip

xposegrafix

ASKER

Okay I will look into it right now and get back to you. Thank you rbudj.