unordered lists with images, images not appearing correctly on page |
unordered lists with images, images not appearing correctly on page |
Zimphra |
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? |
Frederiek |
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.
|
pandy |
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. |
Zimphra |
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. |
pandy |
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.
|
Frederiek |
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. |
pandy |
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.
|
Frederiek |
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 . |
Lo-Fi Version | Time is now: 19th March 2024 - 01:52 AM |