6 replies [Last post]
krysia
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-10-01
Posts: 3
Points: 0

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!

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 21 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

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.

krysia
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-10-01
Posts: 3
Points: 0

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Menu - Align bullet on double-line link?

what if you specified top left for the background image instead of just left...

krysia
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-10-01
Posts: 3
Points: 0

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 ; )

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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.

Life's a b*tch and then you die!

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 21 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

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. Smile