Fri, 2004-10-01 19:35
Greetings,
When using the CSS background image function to add bullets to a menu, how does one align the bullet to the first line of a two-line link? Currently the bullet is spaced between the two lines. Included is a screenshot of the problem. Thanks!
Fri, 2004-10-01 20:46
#1
CSS Menu - Align bullet on double-line link?
use a backgroound on an LI as your bullet, adjust it like below:
li {
list-style-type: none;
background: url(bullet.gif) 0px 7px no-repeat;
padding: 0 0 0 5px;
}
first declaration take sthe crummy system bullet off, 2nd dec. adds a bullet on the LI, 3rd dec adds padding so the text inside the LI doesn't overlap the bullet.
Mon, 2004-10-04 09:32
#2
Still need help
Thanks, but actually my problem is not setting up the bullet style with a background image but making the bullet align to the TOP LINE of text on a TWO LINE link. I should have included my CSS in the first place. The screenshot I linked to in my initial message illustrates the problem I'm having. Any ideas? Here's my current CSS. Thanks!
#navcontainer li
{
list-style-type: none;
background: url(../Images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}
Mon, 2004-10-04 12:49
#3
CSS Menu - Align bullet on double-line link?
what if you specified top left for the background image instead of just left...
Mon, 2004-10-04 13:09
#4
CSS Menu - Align bullet on double-line link?
Thanks! The bullets aren't aligned to the center of the text links as I would like, but they are aligning to the top line of the link. Good enough for now ; )
Mon, 2004-10-04 15:50
#5
CSS Menu - Align bullet on double-line link?
Krysia - if you look again at TimeBandit's post you will notice two figures here > background: url(bullet.gif) 0px 7px no-repeat;
The first (0px) is the horizontal distance from the left; the second (7px) is the vertical distance from the top. Play with these two figures to get the exact position required for your bullet point graphic.
Tue, 2004-10-05 20:13
#6
CSS Menu - Align bullet on double-line link?
roytheboy wrote:
Krysia - if you look again at TimeBandit's post you will notice two figures here > background: url(bullet.gif) 0px 7px no-repeat;
tnx, i should've been more clear when i posted. 