Databases
StackOverflow2013
Postsdbo
POCSS Recreating UL LIs for clickable bullet images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Recreating UL LIs for clickable bullet images
    text
    copied!<p>I am trying to create a true/natural CSS UL LI list (no JQuery, Javascript, etc), but I want to hide the list-style-type and use my own images for the bullets. Also, I want the bullets to be hyperlinked; this is why I am not using images within the LI tag. So, I am having trouble with recreating how a true UL LI would be have with indentation, etc. Here is my JS Fiddle: <a href="http://jsfiddle.net/zenfiddle/Z5pw4/2/" rel="nofollow noreferrer">http://jsfiddle.net/zenfiddle/Z5pw4/2/</a></p> <p>The 1st screenshot below is how my code currently looks. The 2nd screenshot below that is a hypothetical Photoshopped image of how I would like it to look. I would like to meet these ideas:</p> <p>1.) The blue boxes need to be fluid</p> <p>2.) The blue boxes need to sit next to the red box (like the last bullet in my 2nd screenshot)</p> <p>3.) The bullet images are hyperlinked</p> <p>4.) All will sit in a DIV (e.g. the yellow DIV) and the contents (LI text) will be fluid</p> <p>Any ideas on how to fix? I am using a wrapper around each bullet image and bullet text. I am just not sure if I should use float:left, display:inline-block, clear:both; etc, etc.</p> <p><strong>Current</strong></p> <p>Problems:</p> <ul> <li>blue boxes are wrapping underneath the red box (I would like them to sit side by side)</li> <li>blue boxes are not extending to the full width of the container.</li> </ul> <p><img src="https://i.stack.imgur.com/8Wm8l.png" alt="enter image description here"></p> <p><strong>My Goal</strong></p> <p><img src="https://i.stack.imgur.com/EuZna.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload