Forum Moderators: not2easy
I am new here!
I have a CSS menu that I am working with and I am trying to get an image as a background the the links. I have got the background showing but it is the wrong size. It would appear that the size of the link is dependant on font size.
I have tried adding the line-height: 30px; and height: 30 px; but doesn't seem to make a difference.
#menu a{
font: bold 12px arial;
color: #999999;
display: block;
background: url(../images/category_bg.jpg) no-repeat bottom left;
text-decoration: none;
line-height: 30px;
height: 30px;
}
It would appear that the size of the link is dependant [sic] on font size.
The 'size' of the link is dependent upon the size of the container and you've got several declarations that affect the container in this case.
By default, it would simply be the 'size' of the space it takes up as an inline element. The font-size: would be a key factor. However, {display: block;} adds full width:, which has been controlled by the seemingly cumbersome addition of no-repeat and possibly unneeded positioning. Also, the additional attempt to control the 'size' with line-height: and height: - These affect the display differently. You might want one or the other, or both, or neither - depends.
Defining the 'right size' as compared to the "wrong size" problem would seem essential before I could suggest a solution. It seems the central issue and needs clarification.
Setting a background-image: is simple enough. Does it need to be on the <a> or would setting it on the <li> be preferable, or does it matter?
the height and line-height elements do not need to be present if the background image at its full size, takes up the full space - this is 230 x 30 px.
As far as I see, whether the background displays on the <li> or the <a> is irrelevant as they are one in the same as far as the results go.
Potentially also the positioning is not needed but I added it trying to achieve the results I need - can be removed no problem.
Quite simply, I have a list of urls that I am trying to fit centrally into their own individual 230 x 30px.
Thanks a lot for your input
<!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" xml:lang="en">
<head>
<style>
/*#menu a{
font: bold 12px arial;
color: #999999;
display: block;
background: url(../images/category_bg.jpg) no-repeat bottom left;
text-decoration: none;
line-height: 30px;
height: 30px;
} */
#menu {
}
#menu li {
list-style-type: none;
background: #fff url(aaa.jpg);
width: 230px;
text-align: center;
}
#menu a {
font: bold 12px arial;
color: #999;
display: block;
text-decoration: none;
line-height: 30px;
/*width: 100%; if supporting IE6 */
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="www.example.com">
LINK
</a>
</li>
<li>
<a href="www.example.com">
LINK
</a>
</li>
</ul>
</div>
<!--
I have a CSS menu that I am working with and I am trying to get an image as a background the the links. I have got the background showing but it is the wrong size. It would appear that the size of the link is dependant on font size.
I have tried adding the line-height: 30px; and height: 30 px; but doesn't seem to make a difference
. . . . . . . . . . . . . . . . . .
the height and line-height elements do not need to be present if the background image at its full size, takes up the full space - this is 230 x 30 px.
As far as I see, whether the background displays on the <li> or the <a> is irrelevant as they are one in the same as far as the results go.
Potentially also the positioning is not needed but I added it trying to achieve the results I need - can be removed no problem.
Quite simply, I have a list of urls that I am trying to fit centrally into their own individual 230 x 30px.
-->
</body>
</html>
Thanks a lot
