Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS to format an UL List

    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Ok, you first need to fix errors in you code. An unordered list should look like this:
    Code:
    <ul>
    	<li>[...]</li>
    	<li>[...]</li>
    	[...]
    </ul>
    W3C Markup Validation Service
    W3C CSS Validation Service

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Fix your html as he said...
    i dont get why u are inserting the same image 2ce, anyway try something like this

    Code:
    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.
    Last edited by srule_; 07-08-2007 at 04:27 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Nearly there....

    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?

    Code:
    .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
    Last edited by tag_07; 07-09-2007 at 08:16 AM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •