...

View Full Version : UL LI 4 columns displaying accross then down...



jarv
05-07-2010, 03:02 PM
Is it possible for me to sdisplay my list down then accross?



<div id="diarylinks">
<ul>
<li><a href="#" class="selected" title="Sat 1 May">Sat 1 May</a></li>
<li><a href="#" title="Sun 2 May">Sun 2 May</a></li>
<li><a href="#" title="Mon 3 May">Mon 3 May</a></li>
<li><a href="#" title="Tue 4 May">Tue 4 May</a></li>
<li><a href="#" title="Wed 5 May">Wed 5 May</a></li>
<li><a href="#" title="Thu 6 May">Thu 6 May</a></li>
<li><a href="#" title="Fri 7 May">Fri 7 May</a></li>
<li><a href="#" title="Sat 8 May">Sat 8 May</a></li>
<li><a href="#" title="Sun 9 May">Sun 9 May</a></li>
<li><a href="#" title="Mon 10 May">Mon 10 May</a></li>
<li><a href="#" title="Tue 11 May">Tue 11 May</a></li>
<li><a href="#" title="Wed 12 May">Wed 12 May</a></li>
<li><a href="#" title="Thu 13 May">Thu 13 May</a></li>
<li><a href="#" title="Fri 14 May">Fri 14 May</a></li>
<li><a href="#" title="Sat 15 May">Sat 15 May</a></li>
<li><a href="#" title="Sun 16 May">Sun 16 May</a></li>
<li><a href="#" title="Mon 17 May">Mon 17 May</a></li>
<li><a href="#" title="Tue 18 May">Tue 18 May</a></li>
<li><a href="#" title="Wed 19 May">Wed 19 May</a></li>
<li><a href="#" title="Thu 20 May">Thu 20 May</a></li>
<li><a href="#" title="Fri 21 May">Fri 21 May</a></li>
<li><a href="#" title="Sat 22 May">Sat 22 May</a></li>
<li><a href="#" title="Sun 23 May">Sun 23 May</a></li>
<li><a href="#" title="Mon 24 May">Mon 24 May</a></li>
<li><a href="#" title="Tue 25 May">Tue 25 May</a></li>
<li><a href="#" title="Wed 26 May">Wed 26 May</a></li>
<li><a href="#" title="Thu 27 May">Thu 27 May</a></li>
<li><a href="#" title="Fri 28 May">Fri 28 May</a></li>
<li><a href="#" title="Sat 29 May">Sat 29 May</a></li>
<li><a href="#" title="Sun 30 May">Sun 30 May</a></li>
<li><a href="#" title="Mon 31 May">Mon 31 May</a></li>
</ul>
</div>


CSS


#diarylinks ul{ padding:10px 0 0 10px; width:430px; float:left;}
#diarylinks li{ display:inline-block; width:102px; border-bottom:none; }
#diarylinks a{ font-weight:normal; color:#333333; }
#diarylinks a:hover{ font-weight:bold; color:#333333; }
#diarylinks .selected{ font-weight:bold; color:#333333; }

Excavator
05-08-2010, 03:17 AM
Like this?
http://nopeople.com/CSS/3%20column%20ul/index.html

jarv
05-10-2010, 08:52 AM
yes, like that, but in the code the numbers are not in order



<ul>
<li>one</li>
<li>four</li>
<li>seven</li>
<li>two</li>
<li>five</li>
<li>eight</li>
<li>three</li>
<li>six</li>
<li>nine</li>
</ul>

abduraooft
05-10-2010, 09:05 AM
You might need to use nested unordered list, like

<ul>
<li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</li>
<li>
<ul>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</li>
</ul> and then set a width and float:left; to ul li ul

jarv
05-10-2010, 09:53 AM
ok thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum