8 replies [Last post]
JJ
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

Hi all,

New to the forums, so hope this is in the right place. I'm new to CSS as well, so any input would be appreciated.

I currently have an unordered list, and am using CSS to define an image for a bullet. This works well and was relatively easy to achieve. However, by default, lists are automatically indented. I was trying to stop this. I had tried setting Margin-Left = 0em, but that doesn't really work in terms of preventing the indent. I wound up using -1.5em, which does work. My question is, is that the best way to achieve my desired result?

Also 508 and accessability are a must for what I'm trying to do. Not sure if there are any experts out there on this or not. One of the requirements of 508 is to use alt tags for every image. However if I use a image as a bullet in CSS, I see no way to define the alt tag. Is there a work around for this? Or since its a bullet, would I be able to get away without an alt tag? I realize that is more of an accessability question, but just wanted to throw it out there.

Again thanks for the help.

JJ

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 5 years 47 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Unordered Lists (unindent and accessibility issues)

Hi JJ.

This method I use seems to work for me across the more modern browsers with fairly consistant results;

CSS

#toolbar ul {
list-style: none;
margin: 0;
border: 0;
padding: 0;
}

#toolbar ul li {
margin: 0;
border: 0;
padding: 0;
background: url(gfx/bulletimage-1.gif) top left no-repeat;
}

#toolbar ul li a {
display: block;
padding-left: 20px; /* just an example */
background: url(gfx/bulletimage-0.gif) top left no-repeat;
}

#toolbar ul li a:hover {
color: #000; /*or whatever your text color is */
background: none;
}

HTML

<div id="#toolbar">
<ul>
<li><a href="link1.html" title="This is link number 1. Be as descriptive as possible">link 1</a></li>
<li><a href="link2.html" title="This is link number 2. Be as descriptive as possible">link 2</a></li>
</ul>
</div>

Basically, I've stripped the bullet list style and replaced it with my own image. Also, I have stripped the indenting as well. I find this the easiest for me.

Now, as for Section 508 and Accessibility, adding alt attributes will be impossible in this case as you don't have <img> tags on the page. But you should get the desired Accessibilty results by adding a 'title' attribute to each of your <a> tags. That's what I do.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

JJ
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

Unordered Lists (unindent and accessibility issues)

Crazybat,

Well first thanks for the help! I just lost my entire message I had transcribed to you, darn. Lol.

I tried a sample code and it worked well (of course). The one problem I noticed was it put extra lines (like a full line break) in between bullets. However I know that was from the block attribute, so I just changed that. In my I used line spacing of 1.5em. However if I try that on yours, it messes up the bullet images. Is there a work around for this?

Here is my old css part, just so you get an idea of what I was going before.

Quote:

.ul_side {
font-family: Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height: 1.6em;
font-weight: bold;
color: #000000;
margin-left:-1.8em;
list-style-image:url(images/dots_bullet.gif)
}

I have the same problem on both our code that if I have a title and then bullets underneath, it puts a significant amout of space.

Example:

TITLE

Bullet 1
Bullet 2

---------
This is despite having no extra breaks or line spacing in between. However I believe this is in FAQ, so I will check there as well Wink

Anyway again thanks for your help and input. You helped tremendously, especially with the accessibility issues.

Thanks,
JJ

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 5 years 47 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Unordered Lists (unindent and accessibility issues)

Hey JJ.

Yeah, I use display:block so my background image of my 'bullet' doesn't interfere with the text of the menu. Also, to mention that my 'bullet' image is the width of the text block. (See attached image) So, if you were to set a fixed width to a '#toolbar' id in your CSS;

#toolbar { 
width: 146px;
margin: 0; 
border: 0; 
padding: 0; 
} 

then the background image will span across the list item block because the image has a width of 146px. and should fit right across. I know this is a bit different than what you are doing, but I find it easier to manage the lists in this fashion. So, yeah if you add the 'line-spacing: 1.5em;', you're going to have a bit of space happening. Try adding this;

#toolbar ul li a { 
display: block; 
padding: 5px 0 5px 20px; /* just an example */ 
background: url(gfx/bulletimage-0.gif) top left no-repeat; 
} 

This should also give more flexibility to the spacing of the menu items. Here's the complete CSS to hopefully avoid confusion :);

#toolbar { 
width: 146px;
margin: 0; 
border: 0; 
padding: 0; 
} 

#toolbar ul { 
list-style: none; 
margin: 0; 
border: 0; 
padding: 0; 
} 

#toolbar ul li { 
display: block;
margin: 0; 
border: 0; 
padding: 0; 
background: url(gfx/bulletimage-1.gif) top left no-repeat; 
} 

#toolbar ul li a { 
display: block; 
padding: 5px 0 5px 20px; /* just an example */ 
background: url(gfx/bulletimage-0.gif) top left no-repeat; 
} 

#toolbar ul li a:hover { 
color: #000; /*or whatever your text color is */ 
background: none; 
} 

Finally, the HTML should have read this from my first post;

<div id="toolbar"><ul><li><a href="link1.html" title="This is link number 1. Be as descriptive as possible">link 1</a></li><li><a href="link2.html" title="This is link number 2. Be as descriptive as possible">link 2</a></li></ul></div> 

Without the hash mark. Oops.

(NOTE: I edited this message for errors about 30 secoinds ago. The CSS was missing a display: block; Also, the HTML does NOT have any line breaks in it. Sorry for the confusion)

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

JJ
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

Unordered Lists (unindent and accessibility issues)

Thanks CrazyBat,

You were a big help! I tried what you had put and it does indeed work better for me now. Still playing with different options, but it definitely works.

Well works with one tiny exception, lol. Even with a fixed float, I'm still going to have code that would drop down to the next line. Meaning a bulleted lists with certain links that extend to two lines (same bullet). However it causes extra spaces to be put between lines.

I'm attatching an example so you can see what I mean. It might just be the fact that my code isn't fitting my image sizes. My bullet is really small, and my background is just a simple gray radial.

Thank-you again for the help! No confusion at all, its just me still learning, lol Wink Thanks again!

JJ

JJ
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

Unordered Lists (unindent and accessibility issues)

P.S. Oops one more thing. So sorry! If you don't want to or can't help, I understand Smile dont' want to over-use your generosity.

Notice on my screencap how the white space is one the left of the side menu? Even with margins of 0 I can't get it to flush completly left.

My code is as follows for that:

Quote:
#sidebar
{
margin:0px,0px,0px,0px;
float: left;
width: 200px;
padding: 5px;
background-image:url(sample_image.jpg);
}

Padding doesn't make a difference in terms of the white space on the left, so is there something else I'm missing? Been trying to search online, but not having much success.

Thanks,
JJ

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 5 years 47 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Unordered Lists (unindent and accessibility issues)

JJ wrote:
P.S. Oops one more thing. So sorry! If you don't want to or can't help, I understand Smile dont' want to over-use your generosity.

Notice on my screencap how the white space is one the left of the side menu? Even with margins of 0 I can't get it to flush completly left.

My code is as follows for that:

Quote:
#sidebar
{
margin:0px,0px,0px,0px;
float: left;
width: 200px;
padding: 5px;
background-image:url(sample_image.jpg);
}

Padding doesn't make a difference in terms of the white space on the left, so is there something else I'm missing? Been trying to search online, but not having much success.

Thanks,
JJ

Hey JJ. First, make sure your #sidebar ID is defined like so;

#sidebar
{
   margin: 0; /*no commas necessary*/
   float: left;
   width: 200px;
/*padding removed*/
   background-image:url(sample_image.jpg);
}

Now, as for the white space, this is a problem with the container around the sidebar. I'm assuming here you have some sort of #container ID to hold all of your sections and I'm taking into account the <html> and <body> tag...like every valid page should have Wink. I would suggest this;

html, body {
margin:0;
border: 0;
padding: 0;
}
#container {
margin:0;
border: 0;
padding: 0;
}

Now, my reasoning for this is that I have completely removed all of the margin, borders and padding from the body tag all the way through the document. This way, I can more easily control the presentation of specific styles within the page. So, if I decide that my content block needs 5px of padding, a 5px margin and a border, I'll define it so;

#content {
margin: 5px;
border: solid 1px red;
padding: 5px;
}

As an example, of course. But, your styles may vary.

As for your other problem with the text breaking to the next line, that's a bit of a pickle as the background image in my example only accounts for one line of text. I suppose you could increase the width of the #sidebar ID to account for the longest menu item. This of course will eat up your content block space. Hmmm....that's a tough problem.

I can't think of an easy solution for that one at this time. But, if I do think of something, I'll post it when I can.

Hope this helps.
cb.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

JJ
Offline
newbie
Last seen: 10 years 10 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

Unordered Lists (unindent and accessibility issues)

Crazybat,

Once more, thanks for the help. I went ahead and added the html body to my css (yep, already had it in my html of course). That made all the difference and now its really coming together Smile

I actualyl hadn't thought about putting a container to hold all my seperate contatiners. But I went ahead and added that too, definitely can't hurt.

Thanks for trying to offer help on the bullet dropping down to 2 lines as well. No worries, at least I know I'm not losing my mind since I couldn't figure out what I could be doing wrong. Lol. For now I actually just redeisgned some things and took out using it as a bullet. Still using css throughout though, and you definitely helped with me accessibility issues. Again thanks so much for the help. I still have a lot of css learning ahead, but you got me on a good path Smile

Thanks,
JJ

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 5 years 47 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Unordered Lists (unindent and accessibility issues)

No worries. Glad I could help. Smile

Yes, I find the #container ID really helps as it holds the entire content and you have more control over the sub ID's and classes within. And, I figured you would have had an <html> tag Wink

I did think of something with the two line menu items, but it's kind of bizzare. If you assign seperate ID's to each <li> item and then define either a smaller font size or a bigger background image (or both), you could differentiate what each menu item looks like.

#toolbar ul li#longmenuitem {
font-size: 0.6em; /*might shrink the text small enough to fit on one line?*/
color: #000;
background: url(gfx/biggerbgimage.gif) top left no-repeat; /*bg image that's basically double the height */
}

Probably not the most ideal way to deal with it and it probably looks weird with different size text on the menu, but it's all I can think of at this point. Feel free to experiment though Smile

Good luck!
cb.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.