0
<html>
<title>Asia Ghee Mills</title>

<style type="text/css">

#menu	{float: left;
	width:15%;height:400px;
	background-color:pink;
	padding:5px 5px 5px 5px;
	font-size:15pt;color:green;font-family:arial;
	margin-top:10px;margin-left:0px;
	line-height:28px}


#menu img {width:100%;height:200px;}


a:link 	{color: blue; text-decoration: none;text-decoration:underline; }
a:visited 	{color: red; text-decoration: none; }
a:hover 	{color:blue; background:url("skyblue.bmp");text-decoration:underline;font-weight:bold} 

</style>


<DIV id="menu"><img src="images4.jpg" alt=" ">
<A HREF="http://wwww.a.com">Home</a><br>
<A HREF="http://wwww.a.com">Products</a><br>
<A HREF="http://wwww.a.com">Health Tips</a><br>
<A HREF="http://wwww.a.com">Others</a><br>
<A HREF="http://wwww.a.com">Contact Us</a>
 </DIV>
</body>
</html>

The problem details is shown in attached image

Attachments images4.jpg 0.95 KB untitled.JPG 21.22 KB
2
Contributors
6
Replies
10
Views
5 Years
Discussion Span
Last Post by tqmd1
0
<div id="menu" style='background-image: url(images4.jpg);'>

You're trying to place the links on top of an image that is not a background. Either make it a background or use positioning and layers to put the links on top of the image.

0

Sir, problem is solved but background image is repeated twice in the div. I want it to be strected in div. (not repeat)
You can see it in attachment please.

Attachments menu.jpg 10.94 KB
0

Since (I assume) your image is 200px tall:

<div id="menu" style='background-image: url(images4.jpg); height 200px'>

OR - since it's a gradient fading to white

<div id="menu" style='background: #fff url(images4.jpg); background-repeat: repeat-x'>

Otherwise - look at some CSS gradient generators for the code (http://www.designdetector.com/demos/css-gradients-demo-1.php is one.)

Edited by Dandello: n/a

0

Sir, Finally I have following codes

<html> 
<title>Menu on div with background image</title> 
 
 
<style type="text/css"> 
 
 
#menu   {float: left;
        width:15%; height: 350px;
        font-size:15pt;color:green;
        font-family:arial;
        margin-top:10px;margin-left:20px;
        line-height:28px}

.bg	{height:100%;width:100%}   
   

a:link          {color: blue; text-decoration: none;text-decoration:underline;}
a:visited       {color: red; text-decoration: none; }
a:hover         {color:blue; background-color:white;text-decoration:underline;font-

weight:bold} 
 
 
</style>
</head>
<body>

<div id="menu"> <img class="bg" src="Flowers.JPG" height=100% width=100%>
<a HREF="http://wwww.a.com">Home</a><br>
<a HREF="http://wwww.a.com">Products</a><br>
<a HREF="http://wwww.a.com">Contact Us</a>
</div>
</body>
</html>

Now I want result shown in attached file

Attachments img_final.png 68.69 KB
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.