...

View Full Version : Menu on Image



tqmd1
10-28-2011, 07:27 AM
Dear Sir,

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>



It show menu below background But I want to display it shown in attached imge.

Please help

Excavator
10-28-2011, 10:21 AM
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:

<!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/background_image_resize/index.html

tqmd1
10-28-2011, 11:20 AM
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.

abduraooft
10-28-2011, 11:46 AM
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/cssintermediate/backgroundimages/

tqmd1
10-28-2011, 11:56 AM
Sir, I use


<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

abduraooft
10-28-2011, 02:18 PM
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.

#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}

Excavator
10-28-2011, 04:25 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum