...

View Full Version : CSS to format an UL List



tag_07
07-08-2007, 09:28 AM
Hi Guys,

Im trying to change the un ordered list image from the default to an image I have.
The problem is its not showing and cant see what im doiing..

In my external style sheet I simply have this below but must be missing something and hope someone can point me to my error..

External CSS is like :

.list ul
{
margin:2 0 0 28px;
padding:0px;
line-height:22px;
list-style-image: url(images/1_arrow1.gif);
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
text-decoration: none;
background-image: url(images/1_arrow1.gif);
}


And on the HTML where my list appears I have something like:
<ul>
<p class="list"><a href="help.html" class="list">Help Me</a> </p>
</ul>
Any help appreciated...

Thanks
Tag

koyama
07-08-2007, 10:31 AM
Ok, you first need to fix errors in you code. An unordered list should look like this:


<ul>
<li>[...]</li>
<li>[...]</li>
[...]
</ul>
W3C Markup Validation Service (http://validator.w3.org/)
W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/)

srule_
07-08-2007, 04:22 PM
Fix your html as he said...
i dont get why u are inserting the same image 2ce, anyway try something like this



ul
{
margin:2 0 0 28px;
padding:0px;
line-height:22px;
background:"your color" url(images/1_arrow1.gif) no-repeat top center; (or any other position u want, top bottom ect..)
}

li {
background:"your color" url(images/1_arrow1.gif) no-repeat top center; (or any other position u want, top bottom ect..)
list-type: none;
}

a{
font: Arial, Helvetica, sans-serif 16px normal;
text-decoration: none;
}



PS: be careful with hight properties! stuff may fit nice in your browser but people who view your page with different font sizes may get a navagation that does not fit into the space u allocated for it!

Also make sure your image is in the right folder. If not then your code is looking for an image that does not exist.

tag_07
07-09-2007, 07:41 AM
Thanks guys,

Sorry i never got back sooner yesterday was one of those days.
I changed my CSS and now I have my arrows as image icons for my list ...Here is what I have, Im using Dreamweaver as my html editor, dont know if that makes any difference but thanks again?



.MyList ul
{
margin:2 0 0 28px;
padding:0px;
line-height:22px;
background-color: #FFFFFF;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

.MyList li {
list-type: none;
background-position: left center;
background-color: #FFFFFF;
list-style-type: none;
list-style-position: outside;
list-style-image: url(images/1_arrow1.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

.MyList a{
text-decoration: none;
font-family: Arial, Helvetica, "sans-serif 8px normal";
font-size: x-small;
}



Thanks again
T

_Aerospace_Eng_
07-09-2007, 08:35 AM
Whats the problem? We aren't psychic and can't guess at what you problem is. Tell us exactly what the problem is. What is the width of the image?

Personally I would set the image as a background image to the li and set a left padding equal to or greater than the width of the image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum