Aligning Bullets (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

BeTheBall -> Aligning Bullets (1/7/2005 19:11:53)

I am using CSS to use an image for my bullets. The only issue I am having is that the image sits too high causing the text to appear slightly below the level of the image. I would like the text to line up with the middle of the bullet. I have tried a vertical-align attribute, but it has no effect. Thoughts???



skip -> RE: Aligning Bullets (1/8/2005 0:19:42)

i hadn't noticed this until you pointed it out

i didn't find any css to change the possition so i made the background of my image taller and it seemed to work fine



Donkey -> RE: Aligning Bullets (1/8/2005 2:14:03)

Have you tried adjusting the line height using the css either on the< li >or a <span> nested inside each <li> eg
line-height: 120%;
(Adjust the percentage to suit).



skip -> RE: Aligning Bullets (1/8/2005 19:14:20)

quote:

Have you tried adjusting the line height using the css either on the< li >or a <span> nested inside each <li> eg


i didn't have any luck with line-height, the bullet image still wants to go to the top of the text
i made my image taller so it would be about the same height as the text and would appear to be centered vertically. if i make the line height 120% the text space is taller but my image is the same size and is to high.



jaybee -> RE: Aligning Bullets (1/9/2005 5:13:12)

Put top and bottom padding in on the a link. The code below works for one of mine. The more padding you use the bigger the image stretches to fill the space.

Remember when specifying padding the way I have it works like a clock face. First number is 12 o'clock position (top), 2nd is 3 o'clock (right) and so on. 

#vertnavlist a{ display: block; padding: 4px 2px 4px 2px; text-align:center;
  background-color: #00000; background-image: url("../images/butdown.jpg");
  border: 1px solid #333333; width: 100%; color:#ffffff; text-decoration: none;}


Don't forget to apply the padding to your hover states as well otherwise the menu will jump up and down.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625