Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    long list with multiple columns

    I have a long list - long enough that instead of being one long column, it ends up being three columns - this is godd and what I want.

    The problem is the list points are displayed going from left to right, then down a line and left to right and so on, as if you were writing a letter!

    I want the list to go all the way down one column, then all the way down the secon then all the way down the third.

    That way it will be a lot easier for the user to skim the list and pick the point they want.

    How do i do this?!

    Any help much appreciated. Thanks.

    Code:
    #rightPan ul{width:450px; height:120px; display:block; padding:10px 30px 0;}
    #rightPan ul li{width:150px; height:27px; float:left; position:relative; margin:0 auto;}
    
    	<ul>
    		<li><a href=".html">Belfast</a></li>
    		<li><a href=".html">Birmingham</a></li>
    		<li><a href=".html">Bradford</a></li>
    		<li><a href=".html">Bristol</a></li>
    		<li><a href=".html">Cardiff</a></li>
    		<li><a href=".html">Coventry</a></li>
    		<li><a href=".html">Edinburgh</a></li>
    		<li><a href=".html">Glasgow</a></li>
    		<li><a href=".html">Hull</a></li>
    		<li><a href=".html">Leeds</a></li>
    		<li><a href=".html">Leicester</a></li>
    		<li><a href=".html">Liverpool</a></li>
    		<li><a href=".html">London</a></li>
    		<li><a href=".html">Manchester</a></li>
    		<li><a href=".html">Nottingham</a></li>
    		<li><a href=".html">Plymouth</a></li>
    		<li><a href=".html">Sheffield</a></li>
    		<li><a href=".html">Southampton</a></li>
    		<li><a href=".html">Stoke-On-Trent</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		<li><a href=".html">Wolverhampton</a></li>
    		</ul>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have a look at this.

    It has three columns.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The problem is the list points are displayed going from left to right, then down a line and left to right and so on, as if you were writing a letter!
    Split the list items in to three blocks and wrap inside three separate <ul>s. Then set a float left to these <ul>s in CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    adamclark (07-10-2010)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •