...

View Full Version : put 'img' inside 'ul'



mehere8
07-10-2011, 07:48 PM
is it a good practice to put 'img' tag inside 'ul'?
e.g. have certain pictures somewhere inside the list

it seems that if an img or div is put inside the 'ul', the behaviour is quite unexpected~~~

if it is not a good practice, how to deal with this situation?

thx in advance.

Sammy12
07-10-2011, 08:00 PM
If you put the <img> inside a <li> then it's valid and should not have any unexpected results.



<ul>
<li><img src="" /></li>
<li><p></p></li>
</ul>


Try posting your full script and tell us the unexpected results you are seeing.

I wouldn't consider it "good practice" to put img inside a ul. A ul is a list! Inless your listing <img>s then there isnt a reason to use it.

-thanks

mehere8
07-11-2011, 09:52 AM
it seems merely inserting an img into the list doesn't incur any side effect. I find my problem results from a containing div in the list:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: yellow;
width: 100px;
}
ul li {
background-color: #9F0;
margin: 5px 10px;
padding: 0px;
}
.wrapper {
background-color: #FC6;
}
</style>
</head>

<body>
<ul>
<div class="wrapper">
<li>haha</li>
<li>hehe</li>
</div>
<img src="" width="100" height="10" />
</ul>
</body>
</html>


the last 'li' has a 5px margin-bottom but the bottom side of the 'wrapper' div overlaps the bottom of that 'li'. Also the first 'li' has a 5px margin-top, which doesn't show up ~~~

Further, it seems that
<ul>
<li>haha</li>
<li>hehe</li>
</ul> also ignore the top margin of the first list item and the bottom margin of the last. Why is it like that ~~~

vikram1vicky
07-11-2011, 12:21 PM
Your code is invalid.

You cannot use any element inside <ul> or <ol> elements other than <li>.

Only <li> can be the child element of <ul> or <ol>.

If you want to use in list, you should use following code:


<ul>
<li>haha</li>
<li>hehe</li>
<li><img src="" width="100" height="10" /></li>
</ul>

Cheers :)

mehere8
07-11-2011, 03:07 PM
thx
i may ask my another question in another thread

vikram1vicky
07-11-2011, 03:47 PM
U r welcome :).....

let me know through PM whenever you ll ask another ques...

take care :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum