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 7 of 7

Thread: Menu on Image

  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post

    Menu on Image

    Dear Sir,

    I have following codes

    Code:
    <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>
    It show menu below background But I want to display it shown in attached imge.

    Please help
    Attached Thumbnails Attached Thumbnails Menu on Image-img_final.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello tqmd1,
    To move your links up over that image you will need to position them. In this example I put your links in a list so that could be positioned:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Menu on div with background image</title>
    <style type="text/css">
    body, html {
    	background: #fc0;
    	font: 15pt/28px Arial, Helvetica, sans-serif;
    	color: #0f0;
    }
    #menu {
    	height: 350px;
    	width: 15%;
    	float: left;
    	position: relative;
    	margin: 10px 0px 0px 20px;
    }
    .bg {
    	height: 100%;
    	width: 100%
    }
    #menu ul {
    	position: absolute;
    	top: 10px;
    	left: 10px;
    }
    a:link {
    	color: #00f;
    	text-decoration: underline;
    }
    a:visited {
    	color: #f00;
    	text-decoration: none;
    }
    a:hover {
    	color: #00f;
    	background: #fffte;
    	text-decoration: underline;
    	font-weight: bold
    }
    </style>
    </head>
    <body>
        <div id="menu"> 
            <img class="bg" src="Flowers.JPG" alt="" /> 
                <ul>
                    <li><a href="http://wwww.a.com">Home</a></li>
                    <li><a href="http://wwww.a.com">Products</a></li>
                    <li><a href="http://wwww.a.com">Contact Us</a></li>
                </ul>
        <!--end menu--></div>
    </body>
    </html>
    Another example along the same line can be found here - http://nopeople.com/CSS%20tips/backg...ize/index.html
    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

  • Users who have thanked Excavator for this post:

    tqmd1 (10-28-2011)

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post
    Thanks Sir,
    Problem is solved successfully.
    Now I need more help,
    Is it possible to show my background inside div shown in attached image.

    Pink color around background image.
    Attached Thumbnails Attached Thumbnails Menu on Image-img_final.jpg  

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    One sec... you are talking about having "background" image and you are using an <img> tag. The background-image should be set using style/CSS. See the syntax at http://www.htmldog.com/guides/cssint...kgroundimages/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post
    Sir, I use

    Code:
    <img  src="Flowers.JPG">
    becuse some browsers like IE6 does not support CSS codes fully.

    If I am wrong then convert above codes for IE6.

    May I ask How to stretch controls with div while useing CSS.

    Thanks

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    becuse some browsers like IE6 does not support CSS codes fully.
    background is a basic CSS property and thus it'll be supported by all major browsers.
    Remove that <img> and try the following.
    Code:
    #menu   {float: left;
            width:<give width of image here>;
            height: <give height of image here>;
            background: url(Flowers.JPG) no repeat;
            font-size:15pt;color:green;
            font-family:arial;
            margin-top:10px;margin-left:20px;
            line-height:28px}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Why does Flowers.JPG need to stretch?
    The percentage width doesn't really work since the li items overflow once #menu is too narrow. It's already a set height.
    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


  •  

    Posting Permissions

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