Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post

    Menu over background image

    Dear Experts

    I have following codes

    Code:
    <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>
    Proplem is shown in attached image
    Attached Thumbnails Attached Thumbnails Menu over background image-images4.jpg   Menu over background image-untitled.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello tqmd1,
    To make an image a background of an element you should apply it from the CSS.
    Try this for styling your #menu instead:
    Code:
    #menu {
    	width: 15%;
    	float: left;
    	background: #fcf url(images4.jpg);
    	padding: 5px;
    	color: #0f0;
    	font: 15pt/28px arial;
    	margin: 10px 0px 0px;
    }
    See CSS background properties here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post
    Sir, I did not use background-imag in css becuase my IE6 does not support image stretch.

    I used your codes also but problem is still exists.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •