/    Sign up×
Community /Pin to ProfileBookmark

How to add content to UL with LI

I have issue how to add additional content within UL.
UL already includes LI images. But These images have background defined within LI. Is semantically possible to put other background for other LI INSIDE the SAME UL?

Sample is like:

[code=php]
<ul>
<li><img src=”images/image1″ alt=”” /></li>
<li><img src=”images/image1″ alt=”” /></li>
<li><img src=”images/image1″ alt=”” /></li>
<li><img src=”images/image1″ alt=”” /></li>
<li><img src=”images/image1″ alt=”” /></li>
<li><img src=”images/image1″ alt=”” /></li>
<img src=”images/image2″ alt=”” />
<img src=”images/image2″ alt=”” />
<img src=”images/image2″ alt=”” />
</ul>
[/code]

I like to add to the [B]same[/B] UL [B]other[/B] LI image2 background.

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@tirnaMay 17.2010 — If I understand you correctly, you can give each <li> an id or class name and then assign a background to each id or class name as you would with any other element.
Copy linkTweet thisAlerts:
@WebJoelMay 20.2010 — <ul>

<li><img src="images/image1" alt="" /></li>

<li><img src="images/image1" alt="" /></li>

<li><img src="images/image1" alt="" /></li>

<li><img src="images/image1" alt="" /></li>

<li><img src="images/image1" alt="" /></li>

<li><img src="images/image1" alt="" /></li>

[B]<img src="images/image2" alt="" />

<img src="images/image2" alt="" />

<img src="images/image2" alt="" />[/B]


</ul>[/QUOTE]

[B]Invalid[/B]: the only element that can exist in an UL or OL list, is "<li>~</li>"

You CAN use a background-image in the UL however... but no element except "list item" belongs in UL or OL. Unbreakable rule

...

Different (background) images in "<li>" is totally do-able though..

[B]

CSS[/B]

<style>

ul {....}

ul li[B][COLOR="Red"].one[/COLOR][/B] {background-image:url([B][COLOR="Red"]one.gif[/COLOR][/B]);....}

ul li[B][COLOR="Blue"].two[/COLOR][/B] {background-image:url([B][COLOR="Blue"]two.gif[/COLOR][/B]);....}

ul li[B][COLOR="DarkOrchid"].three[/COLOR][/B] {background-image:url([B][COLOR="DarkOrchid"]three.gif[/COLOR][/B]);....}

..etc.

</style>[/QUOTE]


and

[B]HTML[/B]
<ul>

<li [B][COLOR="Red"]class="one"[/COLOR][/B];>~</li>

<li [B][COLOR="Blue"]class="two"[/COLOR][/B];>~</li>

<li [B][COLOR="DarkOrchid"]class="three"[/COLOR][/B];>~</li>

....

</ul>[/QUOTE]


makes a lot more sense and we've separated the CONTENT from the STYLE
Copy linkTweet thisAlerts:
@toplisekauthorMay 20.2010 — Thank you
×

Success!

Help @toplisek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...