...

View Full Version : Resolved need help with listing



w3nta1
08-11-2011, 04:56 AM
Hi.
Can anyone guide me how to create a listing style like below using <ul> and <li> only?
Thanks
http://csscreator.com/files/67871/2011/Untitled-1.jpg

bullant
08-11-2011, 05:01 AM
One option is to first create a container (probably a div) to hold the listing.

Then just create your lists using <ul>. Set the width of each list to 33% and float them. To set your own image for the <li> marker, you can use list-style-image in the css.

w3nta1
08-11-2011, 05:49 AM
Thanks Bullant for the prompt response. But i think you do not understand what i mean. If we use normal li method will only achieve the result like the bottom link.
http://clementng.my/temp.html

w3nta1
08-11-2011, 05:57 AM
i need every of the row to have the same height like sample below >.<
can anyone give me comment on my code? thanks

http://clementng.my/css.jpg

bullant
08-11-2011, 06:03 AM
ok, personally I would put each of the 3 rows in a separate div and then have 3 floated <ul>'s in each div. That should set the height of each div (with overflow: hidden) to the height of the longest list in each row.

But if you are limited to using only <ul> and <li>, then you could have an outer <ul> with an <li> for each of the 3 rows and then nested, floated <ul>'s for the 3 lists in each row. But this seems like more code and messier to me.

And if you want heading for each list, I would use a <dl> with its <dt> for the heading and put the list items in the <dd>

Why are you limited to <ul> and <li>?

bullant
08-11-2011, 06:18 AM
something like this:

Add/change styles to suit.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#listingsContainer {
width: 900px;
border: 1px solid red;
}
#listingsContainer div {
border: 1px solid brown;
clear: both;
overflow: hidden;
}
#listingsContainer dl {
width: 33%;
border: 1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="listingsContainer">
<!-- Row 1 -->
<div>
<dl>
<dt>Listing A</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</dd>
</dl>
<dl>
<dt>Listing B</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</dd>
</dl>
<dl>
<dt>Listing C</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</dd>
</dl>
</div>
<!-- Row 2 -->
<div>
<dl>
<dt>Listing D</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</dd>
</dl>
<dl>
<dt>Listing E</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</dd>
</dl>
<dl>
<dt>Listing F</dt>
<dd>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>

w3nta1
08-11-2011, 07:12 AM
ok, personally I would put each of the 3 rows in a separate div and then have 3 floated <ul>'s in each div. That should set the height of each div (with overflow: hidden) to the height of the longest list in each row.

But if you are limited to using only <ul> and <li>, then you could have an outer <ul> with an <li> for each of the 3 rows and then nested, floated <ul>'s for the 3 lists in each row. But this seems like more code and messier to me.

And if you want heading for each list, I would use a <dl> with its <dt> for the heading and put the list items in the <dd>

Why are you limited to <ul> and <li>?

Thanks a lot for your help Bullant :thumbsup:

no it's not limited to only use ul and li. It's my first time expose to dl dt and dd tag. Thanks for the codes, i'll explore it and apply necessary changes. 10Q~~!!! :):):):):):)

bullant
08-11-2011, 07:37 AM
you're welcome :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum