The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> unordered lists with images, images not appearing correctly on page
Zimphra
post Jun 9 2014, 07:41 AM
Post #1





Group: Members
Posts: 2
Joined: 9-June 14
Member No.: 21,063



Hello,

Have a particular page on my website that is a sales page. Being that it has many lists. Instead of using the default "disc" to better call attention to each list and make them stand out. I decided to find a way to use a different image for each unordered list.

Problem is, the images won't appear correctly on the page.

Here is the page itself: http://bit.ly/1rQHYgI

Here is the CSS:
<head>
<style>
ul.a {list-style-type:none;}
ul.b {list-style-image: url('http://www.cholesterol-coverup.com/wp-content/uploads/2014/05/arrow-maroon-2.png')}
ul.c {list-style-image: url('http://www.cholesterol-coverup.com/wp-content/uploads/2014/05/arrow-blue-92.png')}
</style>
</head>

Here is the HTML code for the two lists, as examples:
<ul class="b">
<li><strong><strong>173 – total cholesterol</strong></strong></li>
<li><strong><strong>102 – LDL</strong></strong></li>
<li><strong><strong>57 – HDL</strong></strong></li>
<li><strong><strong>71 – Triglycerides</strong></strong></li>
</ul>



<ul class="c">
<li><strong><strong>About 600,000 people die of heart disease in the United States every year–that’s 1 in every 4 deaths.</strong></strong></li>
<li><strong><strong>Heart disease is the leading cause of death for both men and women. More than half of the deaths due to heart disease in 2009 were in men.</strong></strong></li>
<li><strong><strong>Coronary heart disease is the most common type of heart disease, killing nearly 380,000 people annually.</strong></strong></li>
<li><strong><strong>Every year about 720,000 Americans have a heart attack. Of these, 515,000 are a first heart attack and 205,000 happen in people who have already had a heart attack.</strong></strong></li>
<li><strong><strong>Coronary heart disease alone costs the United States $108.9 billion each year. This total includes the cost of health care services, medications, and lost productivity</strong></strong></li>
</ul>

You'll notice further down the page I have another list (blue arrows). I hard coded the link to the image into the page and they show up real nice.

Any ideas?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 9 2014, 09:35 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I don't see the code you posted anywhere on that page, nor any UL with a class attribute or any blue arrow image as list-style-image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 9 2014, 09:42 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It looks like none of your 14 style sheets are read. I see a totally unstyled page. I'll have a look at that. Can you tell me which style sheet has the list-style-image stuff? It's not embedded in the page as in your example.

QUOTE
You'll notice further down the page I have another list (blue arrows). I hard coded the link to the image into the page and they show up real nice.

No. I don't see any blue arrows either.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zimphra
post Jun 9 2014, 05:49 PM
Post #4





Group: Members
Posts: 2
Joined: 9-June 14
Member No.: 21,063



Sorry guys my bad. Copied the wrong link.

This is the correct one

http://www.cholesterol-coverup.com/im-blow...esterol-coverup

Thanks for your patience.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 10 2014, 06:47 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And the problem is what, the placement of the list images? That is a problem with this and why inline images or background images are often used instead. The best you can do is create the image in a way that it looks good, cropping and so on. I think CSS3 has more features regarding this, but I'm not read up on that or the browser support.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 10 2014, 07:07 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You need at least leave enough room on the left for the images to show, as they are quite large for a list-style-image.

For the moment, taking one issue at a time, I only looked at the first list. The image there needs a margin-left of 122px instead of the 50px you set, as the image is 122px wide.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 10 2014, 07:36 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Now it looks different. I saw bullet images to the left, but too large ones and placed too high. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 10 2014, 10:34 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Indeed, the bullet images are large to begin with: two are 190px wide and one is 122px wide.
Only, now the arrow has been set as a background-image to UL in two of the lists.
Surely, that's not the desired effect.

The OP should probably better have a look here: http://css.maxdesign.com.au/listutorial/master.htm .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:52 AM