SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attachment not approved yet, in the meantime test something like this:
    Code:
    ul#listmenu li {
    	list-style: none;
    	float: left;
    	width: 100%; /* should now be set to a length according to parent and padding */
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #AC9B62;
    	background: url(../images/usp.jpg) no-repeat left center; /* or pixels instead of center to align vertically */
    	padding-left: 30px; /* make room before text for the icon, maybe the anchor can loose it's padding-left or text-indent */
    }
    Happy ADD/ADHD with Asperger's

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, didn't notice the icons were different to each item. I know you are an experienced developer in spite of you often claim to be new to css.
    I just try answer the question, and maybe someone that don't know will read too.

    Wihtout seen your image though; I think you just need to give the items individual classes/ids.
    Code:
    ul#listmenu li {
    	list-style: none;
    	float: left;
    	width: 100%; /* should now be set to a length according to parent and padding */
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #AC9B62;
    	padding-left: 30px; /* make room before text for the icon, maybe the anchor can loose it's padding-left or text-indent */
    }
    ul#listmenu li.scratch {
    	background: url(../images/scratch.jpg) no-repeat left center;
    }
    ul#listmenu li.hygienic {
    	background: url(../images/hygienic.jpg) no-repeat 0 50%;
    }
    ul#listmenu li.range {
    	background: url(../images/range.jpg) no-repeat 0 4px;
    }
    ...
    And if you want to save http requests, use a sprite image made of vertical stacked icons and give the items their icon's vertical position, e.g. with a grid of 50px including vertical space in between with a 4px adjustment to align:

    Code:
    ul#listmenu li.scratch {
    	background: url(../images/usp-icons.jpg) no-repeat 0 4px;
    }
    ul#listmenu li.hygienic {
    	background: url(../images/usp-icons.jpg) no-repeat 0 54px;
    }
    ul#listmenu li.range {
    	background: url(../images/usp-icons.jpg) no-repeat 0 104px;
    }
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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