Member Avatar for tqmd1 
<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

images4.jpg 0.95 KB untitled.JPG 21.22 KB
  • 2 Contributors
  • 6 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by tqmd1
Member Avatar for Dandello 
<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.

Member Avatar for tqmd1

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.

menu.jpg 10.94 KB
Member Avatar for Dandello

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 because: n/a
Member Avatar for tqmd1

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

img_final.png 68.69 KB
Member Avatar for Dandello 
.bg {height:100%; width:100%; z-index:-1; position:absolute; top: 0;left 0;}
Member Avatar for tqmd1

Thanks sir,
Problem solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.