Problem with menu image
-
The size of the image i'm using in the background for <a> element is of width:130px and height:25px. Since <a> element is within <li> and it will act as menus. The problem is that when i run my sorce, the image gets displayed according to the contents of the <a>. How to set the background image for all <a> with width:130px and height:25px. My html code is : ***************** <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Try Web Page</title> <link type=text/css rel=stylesheet href=css/style.css> </head> <body> <div id="container"> <div id="top"> <div id="header">Inside Header Top Container</div> <div id="nav"> <UL> <li><a href=#>Home</a></li> <li><a href=#>About Us</a></li> <li><a href=#>References</a></li> <li><a href=#>Contact Us</a></li> </UL> </div> </div> <div id="main"> <div id="left">Inside Left Main Container</div> <div id="right">Inside Right Main Container</div> </div> <div id="footer">Inside footer Container</div> </div> </body> </html> CSS Part of code is: ******************** #nav { text-align:center; } #nav ul { list-style-type:none; } #nav li { width:200px; border:1px solid red; display:inline; } #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; }
-
The size of the image i'm using in the background for <a> element is of width:130px and height:25px. Since <a> element is within <li> and it will act as menus. The problem is that when i run my sorce, the image gets displayed according to the contents of the <a>. How to set the background image for all <a> with width:130px and height:25px. My html code is : ***************** <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Try Web Page</title> <link type=text/css rel=stylesheet href=css/style.css> </head> <body> <div id="container"> <div id="top"> <div id="header">Inside Header Top Container</div> <div id="nav"> <UL> <li><a href=#>Home</a></li> <li><a href=#>About Us</a></li> <li><a href=#>References</a></li> <li><a href=#>Contact Us</a></li> </UL> </div> </div> <div id="main"> <div id="left">Inside Left Main Container</div> <div id="right">Inside Right Main Container</div> </div> <div id="footer">Inside footer Container</div> </div> </body> </html> CSS Part of code is: ******************** #nav { text-align:center; } #nav ul { list-style-type:none; } #nav li { width:200px; border:1px solid red; display:inline; } #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; }
The answer is in your question itself. I have modified your code as below.
#nav a
{
background-image:url("../images/leftlinkbg1.jpg");
background-repeat:no-repeat;
text-decoration:none;
width:130px;
height:25px;
}The above solution is only for the situation if you want to fix size of all the that is coming under nav. And consider one point that the height and width is applied to only those elements which has image binded line #nav a. HTH
Jinal Desai - LIVE Experience is mother of sage....
-
The answer is in your question itself. I have modified your code as below.
#nav a
{
background-image:url("../images/leftlinkbg1.jpg");
background-repeat:no-repeat;
text-decoration:none;
width:130px;
height:25px;
}The above solution is only for the situation if you want to fix size of all the that is coming under nav. And consider one point that the height and width is applied to only those elements which has image binded line #nav a. HTH
Jinal Desai - LIVE Experience is mother of sage....
Thanks Desai, I tried with but failed. #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; width:130px; height:25px. } is also not working. Blinking what to do further. Also, if i download any sample which contains background-image set for html elements in external stylesheet, is working fine. But when i try to code myself the same sample set with background-image property, It is not working. IF i copy and paste the same code, it is working fine. Also when i do hand-code the sample, differences occurs from browser to browser. How to overcome it too. M.Sworna Vidhya
-
Thanks Desai, I tried with but failed. #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; width:130px; height:25px. } is also not working. Blinking what to do further. Also, if i download any sample which contains background-image set for html elements in external stylesheet, is working fine. But when i try to code myself the same sample set with background-image property, It is not working. IF i copy and paste the same code, it is working fine. Also when i do hand-code the sample, differences occurs from browser to browser. How to overcome it too. M.Sworna Vidhya
You can't set the width or height of inline elements like
<a>, so you need to adddisplay: block. Addingfloat: leftto the<li>makes the blocks line up horizontally, andoverflow: autoin the<ul>prevents items after the list flowing to the right of it.#nav ul
{
list-style-type: none;
overflow: auto;
}#nav li
{
width: 200px;
border: 1px solid red;
display: block;
float: left;
}#nav a
{
background-image: url("../images/leftlinkbg1.jpg");
background-repeat: no-repeat;
text-decoration: none;
width: 130px;
height: 25px;
display: block;
} -
You can't set the width or height of inline elements like
<a>, so you need to adddisplay: block. Addingfloat: leftto the<li>makes the blocks line up horizontally, andoverflow: autoin the<ul>prevents items after the list flowing to the right of it.#nav ul
{
list-style-type: none;
overflow: auto;
}#nav li
{
width: 200px;
border: 1px solid red;
display: block;
float: left;
}#nav a
{
background-image: url("../images/leftlinkbg1.jpg");
background-repeat: no-repeat;
text-decoration: none;
width: 130px;
height: 25px;
display: block;
}Thank you. It works for me. M.Sworna Vidhya