background:url is not displayed properly
I'm stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.
Here is my CSS:
.menu_item {
background:url(../images/menu_normal.png) no-repeat;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d开发者_JAVA百科td">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Quotation Form</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li class = "menu_item"><a href="#">About</li>
<li class = "menu_item"><a href="#">Services</a></li>
<li class = "menu_item"><a href="#">For Translators</a></li>
<li class = "menu_item"><a href="#">Free Quotation</a></li>
</ul>
<img src = "images/menu_normal.png">
</body>
</html>
Here is the result: http://eximi.dreamhosters.com/turbolingvo/menu.html
I want the image to be displayed behind the menu items just like it is displayed in the <img src...> below it.
What am I doing wrong?
Thank you!
You'll need something like:
.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}
You have to style your li element to adjust look
for example
.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}
this is just example, you can style it however you like as per requirement
Change the background to be on ul element and give the ul element the class menu.
CSS
.menu {background:url(../images/menu_normal.png) no-repeat; }
HTML
<ul class='menu'>
<li><a href="#">About</li>
<li><a href="#">Services</a></li>
<li><a href="#">For Translators</a></li>
<li><a href="#">Free Quotation</a></li>
</ul>
加载中,请稍侯......
精彩评论